Skip to content

Converting js to tsx and using types - #2

Open
awais627 wants to merge 3 commits into
Developmentfrom
typescript
Open

Converting js to tsx and using types#2
awais627 wants to merge 3 commits into
Developmentfrom
typescript

Conversation

@awais627

Copy link
Copy Markdown
Owner

API integration with Typescript

Comment thread package.json
Comment on lines +9 to +12
"@types/jest": "^27.5.1",
"@types/node": "^17.0.35",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.5",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why you have added these packages is typescript dependent on it.

Comment thread src/App.tsx
import Home from "./components/Home";

function App() {
function App():JSX.Element{

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using generic types and use proper type.

Comment on lines +4 to +6
type HandleChange={
handleChange:any;
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove any type use correct type.

type HandleChange={
handleChange:any;
}
const Filters:FC<HandleChange> = ({ handleChange }) => {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make a separate interface fort the props that you pass to components.

Comment thread src/components/Table.tsx Outdated
import React, { FC } from "react";
import "./Table.css";
const Table = ({ currentPage, post, setCurrentPage }) => {
type Props = {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why use type here?

Comment thread src/components/Table.tsx Outdated
type Props = {
currentPage: number;
post: {
id: number;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make separate interfaces for nested objects.

Comment thread src/components/Table.tsx Outdated
}[];
setCurrentPage: any;
};
const Table: FC<Props> = ({ currentPage, post, setCurrentPage }) => {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This type is wrong. Please use the correct type.

Comment thread tsconfig.json
@@ -0,0 +1,105 @@
{

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this file from the PR.

Comment thread src/components/Api.tsx
type filters={

export interface IFilters {
beerName: String

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why you are using "String" instead of "string"?

Comment thread src/components/Table.tsx Outdated
abv: string;
}[];
post: IPostdata[];
setCurrentPage: any;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace any with appropriate type.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants