Reactjs With TypeScript Index

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

type AppProps = {
  message: string
  count: number
  disabled: boolean
}

type AppProps = {
  names: string[]
}

type AppProps = {
  status: "loading" | "success" | "error"
}

type AppProps = {
  /** interface with no required properties **/
  obj: {}
  /** useful placeholder **/
  obj2: object
}

type AppProps = {
  obj: {
    lkes: number
    id: string
    title: string
    description: string
  }
}

type AppProps = {
  objArr: {
    id: string
    title: string
    description: string
  }[]
}

type AppProps = {
  dict: {
    [key: string]: TypeHere
  }
}

type AppProps = {
  dict: Record<string, TypeHere>
}

type AppProps = {
  onClick: () => void
}

type AppProps = {
  onClick: (id: number) => void
}

type AppProps = {
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  /**alternative**/
  onClick: (event: React.MouseEvent<HTMLInputElement>) => void
}

type AppProps = {
  optional?: OptionalType
}

type AppProps = {
  setState: React.Dispatch<React.SetStateAction<number>>
}

npm i @types/react

type FooProps = {
  children: React.ReactNode
}

export const Foo = ({ children }: FooProps) => {
  return <div>{children}</div>
}

//....
const App = () => {
  return (
      <div>
        <Greet name="Ben"/>
        <MessageCount count={5}>
        <DarkToggle isDark={true}>
    </div>
    )
}

type GreetProps = {
  name: string
}
export const Greet = (props: GreetProps) => {
  return (
    <div>
      <h3>Welcome to React TypeScript {props.name}</h3>
    </div>
  )
}

type GreetProps = {
    name: string
}
export const Greet = ({name}: GreetProps) => {
    return (
        <div>
            <h3>Welcome to React TypeScript {props.name}
        </div>
    )
}

type MessageProps = {
  count: number
}
export const Greet = ({ count }: MessageProps) => {
  return (
    <div>
      <p>You have {count} messages</p>
    </div>
  )
}

type DarkToggleProps = {
  isDark: boolean
}
export const Greet = ({ isDark }: DarkToggleProps) => {
  return (
    <div>
      <p>You are using dark mode {isDark ? "true" : "false"}</p>
    </div>
  )
}