fix: add explicit types to resolve all implicit 'any' parameters#5277
fix: add explicit types to resolve all implicit 'any' parameters#5277PPRAMANIK62 wants to merge 5 commits intoasyncapi:masterfrom
Conversation
Add proper TypeScript type annotations to 27 callback parameters across components and pages that were implicitly inferred as 'any'. Also adds @types/json-schema to resolve the missing module declaration for json-schema in Visualizer.tsx. Closes asyncapi#5073 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
PPRAMANIK62
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughApplied explicit TypeScript parameter annotations across several components and one page to remove implicit Changes
Sequence Diagram(s)(omitted — changes are type-only and do not introduce new multi-component control flow) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The .map() returns (string | JSX.Element)[], so .reduce() params must match that union type instead of React.ReactNode or string. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/newsroom/FeaturedBlogPost.tsx (1)
89-98:⚠️ Potential issue | 🟠 MajorType mismatch in reduce callback may cause incorrect rendering.
The
.map()returns either a<span>JSX element (whenauthor.linkexists) or a string (author name). However, the.reduce()callback typesprevandcurrasstringand calls.join('')on an array containing these values.When
prevorcurris a JSX element, calling.join('')will produce"[object Object]"instead of the author name, resulting in incorrect rendering.🐛 Proposed fix to use React.ReactNode consistently
{post.authors .map((author: IBlogPost['authors'][number], index: number) => author.link ? ( <span key={index} data-alt={author.name} rel='noreferrer'> {author.name} </span> ) : ( author.name ) ) - .reduce((prev: string, curr: string) => [prev, ' & ', curr].join(''))} + .reduce((prev: React.ReactNode, curr: React.ReactNode) => [prev, ' & ', curr] as React.ReactNode[])}This aligns with the pattern used in
BlogLayout.tsx(line 70).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/newsroom/FeaturedBlogPost.tsx` around lines 89 - 98, The map currently returns a mix of string and JSX (in FeaturedBlogPost.tsx mapping over IBlogPost['authors']) but the reduce types both as string and uses .join(''), causing "[object Object]" for JSX nodes; change the pipeline to treat items as React.ReactNode (update the map's return type) and rewrite the reduce callback to operate on React.ReactNode (e.g., reduce<React.ReactNode>((prev, curr, i) => i ? <>{prev} & {curr}</> : curr)) so separators are inserted as React nodes instead of calling .join on an array; update type annotations for the map/reduce callbacks to React.ReactNode and adjust the reduce initial/value handling accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@components/newsroom/FeaturedBlogPost.tsx`:
- Around line 89-98: The map currently returns a mix of string and JSX (in
FeaturedBlogPost.tsx mapping over IBlogPost['authors']) but the reduce types
both as string and uses .join(''), causing "[object Object]" for JSX nodes;
change the pipeline to treat items as React.ReactNode (update the map's return
type) and rewrite the reduce callback to operate on React.ReactNode (e.g.,
reduce<React.ReactNode>((prev, curr, i) => i ? <>{prev} & {curr}</> : curr)) so
separators are inserted as React nodes instead of calling .join on an array;
update type annotations for the map/reduce callbacks to React.ReactNode and
adjust the reduce initial/value handling accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1d86da5f-0172-445b-83d1-2b345ad93792
📒 Files selected for processing (11)
components/CaseStudyCard.tsxcomponents/FinancialSummary/BarChartComponent.tsxcomponents/FinancialSummary/Card.tsxcomponents/layout/BlogLayout.tsxcomponents/layout/Layout.tsxcomponents/navigation/BlogPostItem.tsxcomponents/newsroom/FeaturedBlogPost.tsxcomponents/newsroom/NewsroomBlogPosts.tsxcomponents/newsroom/NewsroomSection.tsxpackage.jsonpages/casestudies/[id].tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/layout/BlogLayout.tsx`:
- Line 70: In BlogLayout replace the unsafe .reduce(...) on post.authors (which
uses the cast as unknown as string & React.JSX.Element and breaks on empty
arrays) with a safe map rendering: check post.authors.length first, then map
authors to elements and insert separators conditionally using the index (e.g.,
authors.map((a, i) => <>{i>0 && " • "}{...}</>)), and eliminate the unsafe cast;
also remove nested <a> tags by following the BlogPostItem/FeaturedBlogPost
pattern — render author names as non-interactive <span> or as <button
onClick={() => window.open(url, "_blank")}> when an interactive element is
required (use onClick instead of nested anchors) so hydration and type-safety
issues are resolved.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 78aecd7f-921e-470c-aa6e-dd8fbb433cb0
📒 Files selected for processing (2)
components/layout/BlogLayout.tsxcomponents/newsroom/FeaturedBlogPost.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- components/newsroom/FeaturedBlogPost.tsx
Replace fragile .reduce() pattern with .map() + React.Fragment for joining author names. The reduce approach had unsafe type casts and would throw on empty arrays. The map approach is type-safe, handles empty arrays, and produces the same visual output. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/newsroom/FeaturedBlogPost.tsx`:
- Around line 88-99: In FeaturedBlogPost.tsx, remove the invalid
rel='noreferrer' attribute from the <span> used inside the post.authors.map(...)
fragment (the JSX returning <span data-alt={author.name} rel='noreferrer'>)
since rel is only valid on <a>/<link>/<area>; keep data-alt and the conditional
rendering logic intact and ensure the key remains on the React.Fragment for
index-based mapping.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: bc983c10-4481-440e-aa7b-fdadad74b300
📒 Files selected for processing (2)
components/layout/BlogLayout.tsxcomponents/newsroom/FeaturedBlogPost.tsx
- Remove invalid rel='noreferrer' from <span> in FeaturedBlogPost - Replace unsafe .reduce() with .map() + React.Fragment in BlogPostItem for consistency and empty-array safety Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5277--asyncapi-website.netlify.app/ |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
components/newsroom/FeaturedBlogPost.tsx (1)
88-99: Type annotations and refactor look good; verify author link behavior is intentional.The explicit type annotations and the refactor from
.reduce()to.map()withReact.Fragmentare correct. The removal of the invalidrel='noreferrer'attribute from the<span>(flagged in a previous review) has been addressed.The index-as-key usage is acceptable here for the same reasons as in
BlogPostItem.tsx(static, small list without stable unique IDs).One observation: unlike
BlogPostItem.tsxwhich uses a<button>withonClickto open author links, this component renders a plain<span>whenauthor.linkis truthy, making the author name non-clickable. If this is intentional (to avoid hydration issues as per learnings), theauthor.linkconditional anddata-altattribute appear to be remnants with no functional purpose.Based on learnings, using anchor tags for author names in this component leads to hydration issues, so the non-interactive approach may be intentional—but then consider removing the conditional check for
author.linkentirely to simplify the code.,
♻️ Optional simplification if author links are intentionally non-interactive
{post.authors.map((author: IBlogPost['authors'][number], index: number) => ( <React.Fragment key={index}> {index > 0 && ' & '} - {author.link ? ( - <span data-alt={author.name}> - {author.name} - </span> - ) : ( - author.name - )} + {author.name} </React.Fragment> ))}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/newsroom/FeaturedBlogPost.tsx` around lines 88 - 99, In FeaturedBlogPost, the conditional branch around post.authors.map that checks author.link and renders a <span data-alt=...> leaves a non-functional check and a redundant data-alt when author links are intentionally non-interactive; simplify by removing the author.link conditional and data-alt so you always render the author name inside the React.Fragment (keep the existing React.Fragment key usage and the ' & ' separator), or if you actually want clickable authors, replace the span with the same clickable <button> + onClick behavior used in BlogPostItem to open author.link—update the mapping in FeaturedBlogPost (post.authors, React.Fragment, and any data-alt usage) accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/newsroom/FeaturedBlogPost.tsx`:
- Around line 88-99: In FeaturedBlogPost, the conditional branch around
post.authors.map that checks author.link and renders a <span data-alt=...>
leaves a non-functional check and a redundant data-alt when author links are
intentionally non-interactive; simplify by removing the author.link conditional
and data-alt so you always render the author name inside the React.Fragment
(keep the existing React.Fragment key usage and the ' & ' separator), or if you
actually want clickable authors, replace the span with the same clickable
<button> + onClick behavior used in BlogPostItem to open author.link—update the
mapping in FeaturedBlogPost (post.authors, React.Fragment, and any data-alt
usage) accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 19ae6df0-4f13-4424-b7d1-3cc360598634
📒 Files selected for processing (2)
components/navigation/BlogPostItem.tsxcomponents/newsroom/FeaturedBlogPost.tsx
2 participants
Add proper TypeScript type annotations to 27 callback parameters across components and pages that were implicitly inferred as 'any'. Also adds @types/json-schema to resolve the missing module declaration for json-schema in Visualizer.tsx.
Closes #5073
Description
pages that were implicitly inferred as
any@types/json-schemadev dependency to resolve the missing module declaration inVisualizer.tsxanyerrors remain (tsc --noEmitverified)Summary by CodeRabbit
Refactor
Chores