Por que meu aplicativo React Native é compilado com êxito, apesar do erro do compilador TypeScript?

15

Recentemente, comecei a usar o TypeScript com a Expo. Fiz todas as integrações linter / formatador typescript-eslintpara que eu possa detectar a maioria dos erros durante a codificação. Para verificar se o código é compilado, eu corro de npx tscvez em quando e corrijo de acordo.

Uma coisa que ainda não compreendi completamente é por que meu aplicativo é compilado com êxito, mesmo quando há vários erros de compilação. Espero (e prefiro) ver um erro de tela vermelha para cada erro de compilação, em vez de o aplicativo ser compilado com êxito e eu descobrir isso mais tarde. Por exemplo,

function square<T>(x: T): T {
  console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
  return x * x;
}

é um erro típico de TypeScript que (acredito?) pode ser facilmente verificado em tempo de compilação. Quero que isso resulte em um grande erro de tela vermelha e a compilação falhe.

Eu sou bastante novo no TypeScript, então é possível que eu esteja perdendo algo muito importante. O que exatamente está causando essa indulgência e existe uma maneira de aplicar verificações mais rigorosas?

reactjs typescript react-native expo anar
fonte
Por "cria com êxito", você quer dizer que o JS é produzido de qualquer maneira, ou não há nenhuma mensagem de erro do compilador exibida em algum momento?
ecraig12345
2
Quero dizer que o JS é produzido de qualquer maneira e posso executar o aplicativo no modo dev e até criar o aplicativo de produção sem problemas. Eu esperava que o TypeScript evitasse isso em tempo de compilação. As mensagens de erro do compilador são sempre mostradas quando eu executo, npx tscmas quero obter uma tela vermelha para cada erro TypeScript, assim como faço para erros JS normais como const n = 23; n.reverse();esse, resultando em uma tela vermelha com a mensagem "n.reverse não é uma função. 'n.reverse ()', 'n.reverse' é indefinido) "
anar 19/10/1919
2
Acho isso tão estranho também. Também não consigo encontrar uma solução adequada.
Simon Bengtsson

Respostas:

2

A primeira coisa a entender é que o Typescript é um superconjunto de Javascript e, nesse caso, não é realmente verificado no tipo durante a compilação.

Basicamente, o que acontece é que Babel retira o Typescript e o converte em Javascript, que é compilado nos pacotes js.

Você pode dar uma olhada na primeira linha dos seguintes documentos Babel, bem como nas advertências: https://babeljs.io/docs/en/next/babel-plugin-transform-typescript

Como Babel não verifica o tipo, o código sintaticamente correto, mas que falharia, a verificação do tipo TypeScript pode ser transformada com êxito e, muitas vezes, de maneiras inesperadas ou inválidas.

O que eu sugeriria é estender o seu comando build para incluir primeiro tscou melhor a compilação Typescript, com noEmitset para true no seu tsconfig.

Atualização : Encontrei outra instância em que isso se aplica recentemente ao adicionar jeste typescripta um projeto. Na parte inferior dos documentos do Jest, eles realmente afirmam a mesma coisa:

https://jestjs.io/docs/en/getting-started#using-typescript

No entanto, existem algumas ressalvas no uso do TypeScript com o Babel. Como o suporte ao TypeScript no Babel é uma transpilação, o Jest não verifica os seus testes enquanto eles são executados. Se você quiser, pode usar o ts-jest.

Mark Atkinson
fonte