resolve linting error by migrating custom components to typescript #2188
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates custom React components from JavaScript to TypeScript to resolve linting errors as part of issue #1646. The migration involves converting .js files to .tsx files, removing PropTypes in favor of TypeScript types, and updating function syntax to use function declarations.
Changes:
- Converted four JavaScript components to TypeScript with inline prop type definitions
- Updated two existing TypeScript components to use function declarations and ReactNode return types
- Replaced deprecated PropTypes with TypeScript type annotations
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/YouTube/index.tsx | New TypeScript YouTube embed component with inline prop types |
| src/components/YouTube.js | Deleted JavaScript version of YouTube component |
| src/components/RedirectPage.tsx | New TypeScript redirect component with inline prop types |
| src/components/RedirectPage.js | Deleted JavaScript version of RedirectPage component |
| src/components/CodeExample.tsx | New TypeScript code example component (needs prop types) |
| src/components/CodeExample.js | Deleted JavaScript version of CodeExample component |
| src/components/WrapperApiReference.tsx | Updated to function declaration with ReactNode return type (needs prop types) |
| src/components/EndpointsTable.tsx | Updated to function declaration with ReactNode return type (needs prop types) |
| src/components/AttributeTable/index.tsx | Updated with ReactNode return type (needs prop types) |
| src/components/AttributeTable/ListItem/index.js | Deleted JavaScript version of ListItem component |
Comments suppressed due to low confidence (5)
src/components/WrapperApiReference.tsx:14
- The function parameters 'children' and 'props' are missing type annotations. In TypeScript, all function parameters must have explicit types. Consider defining a proper interface for the component props.
src/components/EndpointsTable.tsx:13 - The function parameters 'children' and 'title' are missing type annotations. In TypeScript, all function parameters must have explicit types. Consider defining a proper interface for the component props, especially since 'title' has a default value.
src/components/EndpointsTable.tsx:17 - Inconsistent use of semicolon after the function declaration. The function uses a semicolon after the closing brace on line 17, which is inconsistent with JavaScript/TypeScript conventions for function declarations. Function declarations typically don't require trailing semicolons.
src/components/AttributeTable/index.tsx:6 - The 'children' parameter is missing a type annotation. In TypeScript, all function parameters must have explicit types. Consider defining a proper interface for the component props.
src/components/AttributeTable/index.tsx:15 - The map function is being used but its return value is not being used. This is a code smell - map should be used when you want to transform an array and use the result. Since the code is using map only for its side effect (pushing to renderArray), consider using forEach instead, which more clearly expresses the intent of iterating for side effects.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { CODE_LANGS } from "@site/config/constants"; | ||
| import Translate from '@docusaurus/Translate'; | ||
|
|
||
| export function CodeExample({ children }): ReactNode { |
There was a problem hiding this comment.
The function parameter 'children' is missing a type annotation. TypeScript requires explicit types for all function parameters. Consider adding a type annotation such as { children } or defining a proper interface for the props.
Suggested change
| export function CodeExample({ children }): ReactNode { | |
| export function CodeExample({ children }: { children: ReactNode }): ReactNode { |
|
Preview is available here: |
1 similar comment
|
Preview is available here: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #1646