How to fix Type "unknown" is not assignable to type "FC<Props>" in React

import React, { FC } from 'react';

interface MyComponentProps {
  title: string;
  count: number;
}

// Explicitly type the component
const MyComponent: FC<MyComponentProps> = ({ title, count }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
    </div>
  );
};

export default MyComponent;

import React, { ReactElement } from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent = ({ title }: MyComponentProps): ReactElement => {
  return <h1>{title}</h1>;
};

export default MyComponent;

import React from 'react';

interface PageProps {
  params: { id: string };
}

// Async components need explicit Promise<ReactElement> return type
export default async function Page({ params }: PageProps): Promise<React.JSX.Element> {
  const data = await fetchData(params.id);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

# Search for available types
npm search @types/library-name

# Or check DefinitelyTyped repository
# https://github.com/DefinitelyTyped/DefinitelyTyped

# Install types for a specific library
npm install --save-dev @types/react-router-dom
npm install --save-dev @types/lodash
npm install --save-dev @types/node

# For libraries without official types, you may need to:
# 1. Create a custom declaration file
# 2. Use declare module in your code
# 3. Or add "skipLibCheck": true to tsconfig.json (not recommended)

// Declare module for JavaScript library
declare module 'untyped-library' {
  const value: any;
  export default value;
}

// Or provide more specific types
declare module 'custom-react-library' {
  import { FC } from 'react';

  interface CustomComponentProps {
    value: string;
    onChange: (value: string) => void;
  }

  export const CustomComponent: FC<CustomComponentProps>;
  export default CustomComponent;
}

{
  "compilerOptions": {
    "jsx": "react-jsx", // or "react" for older versions
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "target": "es5", // or higher
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": false, // Keep false for type safety
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true, // For Next.js/Webpack builds
    "allowJs": true,
    "checkJs": false
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

// Basic React imports
import React from 'react';
import { FC, ReactElement, ReactNode, ComponentProps } from 'react';

// For class components (if needed)
import { Component, PureComponent } from 'react';

// Hooks
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';

// Context
import { createContext, useContext, Context } from 'react';

// For Next.js App Router
import type { Metadata } from 'next';

// ❌ Missing React import (causes "unknown" type)
const Component = () => <div>Hello</div>;

// ✅ Correct - import React
import React from 'react';
const Component = () => <div>Hello</div>;

// ❌ Using JSX without proper configuration
// Fix: Ensure tsconfig.json has "jsx": "react-jsx"

// ❌ Missing type-only imports
import type { FC } from 'react'; // Type-only import (React 17+)

import React, { ComponentType } from 'react';

interface WithLoadingProps {
  isLoading: boolean;
}

// Generic HOC that preserves component props
function withLoading<P extends object>(
  WrappedComponent: ComponentType<P>
): ComponentType<P & WithLoadingProps> {
  const WithLoading = (props: P & WithLoadingProps) => {
    const { isLoading, ...restProps } = props;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return <WrappedComponent {...restProps as P} />;
  };

  // Display name for DevTools
  WithLoading.displayName = `WithLoading(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithLoading;
}

// Usage
interface UserProfileProps {
  name: string;
  email: string;
}

const UserProfile: FC<UserProfileProps> = ({ name, email }) => (
  <div>
    <h2>{name}</h2>
    <p>{email}</p>
  </div>
);

const UserProfileWithLoading = withLoading(UserProfile);
// Type: ComponentType<UserProfileProps & WithLoadingProps>

import React, { ReactNode } from 'react';

interface DataProviderProps<T> {
  children: (data: T) => ReactNode;
  fetchData: () => Promise<T>;
}

function DataProvider<T>({ children, fetchData }: DataProviderProps<T>): ReactElement {
  const [data, setData] = useState<T | null>(null);

  useEffect(() => {
    fetchData().then(setData);
  }, [fetchData]);

  if (!data) return <div>Loading...</div>;

  return <>{children(data)}</>;
}

// Usage with explicit type parameter
<DataProvider<{ id: string; name: string }>
  fetchData={() => fetch('/api/user').then(res => res.json())}
>
  {(user) => (
    <div>
      <h1>{user.name}</h1>
      <p>ID: {user.id}</p>
    </div>
  )}
</DataProvider>

import { ComponentProps, ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';

// Get props from existing component
type ButtonProps = ComponentProps<typeof Button>;
type InputProps = ComponentPropsWithoutRef<'input'>;
type DivProps = ComponentPropsWithRef<'div'>;

// For event handlers
type ClickHandler = React.MouseEventHandler<HTMLButtonElement>;
type ChangeHandler = React.ChangeEventHandler<HTMLInputElement>;
type SubmitHandler = React.FormEventHandler<HTMLFormElement>;

// Children types
type PropsWithChildren<P = unknown> = P & { children?: ReactNode };
type PropsWithoutChildren<P = unknown> = Omit<P, 'children'>;

// Conditional rendering
type ConditionalProps = {
  isLoading: boolean;
  data: string | null;
  error: Error | null;
};

const ConditionalComponent: FC<ConditionalProps> = ({ isLoading, data, error }) => {
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>No data</div>;

  return <div>{data}</div>;
};

// Generic component
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>): ReactElement {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

// Usage
<List<{ id: number; name: string }>
  items={users}
  renderItem={(user) => <span>{user.name} (ID: {user.id})</span>}
/>