React 18 alpha tem foi lançado , o que é muito emocionante! Mas podemos usá-lo com TypeScript?
A resposta é “sim”, mas precisamos fazer algumas coisas para que isso aconteça. Esta postagem mostrará o que fazer.
Criação de um aplicativo React com TypeScript
Vamos criar um aplicativo React TypeScript vanilla com Criar aplicativo React :
yarn create react-app my-app--template typescript
Agora vamos atualizar a versão do React para @next :
yarn add react @ next react-dom @ next
Isso deixará você com entradas no package.json que usam React 18. Provavelmente será algo assim:
"react":"^ 18.0.0-alpha-e6be2d531", "react-dom":"^ 18.0.0-alpha-e6be2d531",
Se executarmos yarn start , nos encontraremos executando um aplicativo React 18. Emocionante!
Usando as novas APIs
Então, vamos tentar usar a API ReactDOM.createRoot . É essa API que permite que nosso aplicativo use os novos recursos do React 18. Abriremos index.tsx e faremos esta alteração:
-ReactDOM.render (
-
- ,
-document.getElementById ('root')
-);
+ const root=ReactDOM.createRoot (document.getElementById ('root'));
+
+ root.render (
+
+
+);
Se estivéssemos executando JavaScript sozinho, isso funcionaria. Como também estamos usando o TypeScript, porém, agora nos deparamos com um erro:
A propriedade'createRoot'não existe no tipo'typeof import ("/code/my-app/node_modules/@ types/react-dom/index")'. TS2339
Este é o compilador TypeScript reclamando que não sabe nada sobre ReactDOM.createRoot . Isso ocorre porque as definições de tipo que estão atualmente em vigor em nosso aplicativo não têm essa API definida.
Vamos atualizar nossas definições de tipo:
yarn add @ types/react @ types/react-dom
Podemos razoavelmente esperar que tudo funcione agora-infelizmente, não funciona. O mesmo erro está apresentando. TypeScript não está feliz.
Contando ao TypeScript sobre as novas APIs
Se dermos uma olhada no PR que adicionou suporte para APIs , encontraremos algumas dicas. Se você olhar para next.d.ts , você encontrará essas informações, cortesia de Sebastian Silbermann :
/** * Esses são os tipos de coisas que estão presentes no próximo lançamento do React 18. * * Assim que o React 18 for lançado, eles podem ser movidos para o arquivo de índice principal. * * Para carregar os tipos declarados aqui em um projeto real, existem três maneiras. O mais fácil, * se o seu `tsconfig.json` já tem um array`"types"`na seção`"compilerOptions"`, * é adicionar `"react/next"` ao array `"types"`. * * Alternativamente, uma sintaxe de importação específica pode ser usada a partir de um arquivo typescript. * Este módulo não existe na realidade, por isso o {} é importante: * * `` `ts * importar {} de'react/next' * `` ` * * Também é possível incluí-lo por meio de uma referência de barra tripla: * * `` `ts *///
Vamos tentar o primeiro item da lista. Vamos editar nosso tsconfig.json e adicionar uma nova entrada à seção "compilerOptions":
"types": ["react/next","react-dom/next"]
Se reiniciarmos nossa construção com yarn start , agora teremos um erro diferente:
Argumento do tipo'HTMLElement | null'não é atribuível ao parâmetro do tipo'Elemento | Documento | DocumentFragment | Comentário'.
O tipo'nulo'não pode ser atribuído ao tipo'Elemento | Documento | DocumentFragment | Comente'. TS2345
Agora, isso na verdade não tem nada a ver com os problemas com nossas novas definições de tipo React. Eles estão bem. Isso é TypeScript dizendo, “Não é garantido que document.getElementById ('root') retorne algo que não seja null . Como estamos no modo strictNullChecks , você precisa ter certeza de que root não é nulo. ”
Vamos lidar com isso testando se temos um elemento em jogo antes de invocar ReactDOM.createRoot :
-const root=ReactDOM.createRoot (document.getElementById ('root'));
+ const rootElement=document.getElementById ('root');
+ if (! rootElement) lança novo Error ('Falha ao encontrar o elemento raiz');
+ const root=ReactDOM.createRoot (rootElement);
E com essa mudança feita, temos um aplicativo React 18 funcionando usando TypeScript. Aproveite!
A postagem Como usar o TypeScript com React 18 alpha apareceu primeiro no LogRocket Blog .
