Pular para o conteúdo
Typescript no React

Transformando um componente em Typescript

Agora, começando a brincadeira de verdade. Vamos criar nosso primeiro componente typescript. Na verdade, não vamos criar, mas transformar o componente App.jsx para App.tsx. Vamos então renomear o arquivo.

Mas aí quebra tudo.

Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

Mais alguns erros: o TS não entende JSX

Precisamos dizer para o compilador typescript que estamos lidando com React e não com javascript convencional. pra isso, vamos setar no tsconfig.json dentro de compilerOptions a propriedade jsx com o valor react-jsx.

Vamos aproveitar também e atualizar outras propriedades para deixar nosso código mais moderno

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "esModuleInterop": true,
    "moduleResolution": "Bundler",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "allowJs": true
  }
}

Com isso, os erros vão desaparecer.