Perché la mia app React Native viene compilata correttamente nonostante l'errore del compilatore TypeScript?

Di recente ho iniziato a utilizzare TypeScript con Expo. Ho fatto tutte le integrazioni di linter / formatter in typescript-eslintmodo da poter rilevare la maggior parte degli errori durante la codifica. Per verificare se il codice viene compilato, eseguo npx tscuna volta ogni tanto e correggo di conseguenza.

Una cosa che non ho ancora compreso appieno è il motivo per cui la mia app viene compilata correttamente anche in presenza di numerosi errori di compilazione. Mi aspetto (e preferisco) vedere un errore di schermata rossa per ogni errore di compilazione piuttosto che la compilazione dell'app con successo e me lo scoprirò in seguito. Per esempio,

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

è un tipico errore di TypeScript che (credo?) può essere facilmente verificato in fase di compilazione. Voglio che si traduca in un grande errore dello schermo rosso e la build fallisca.

Sono abbastanza nuovo in TypeScript, quindi è possibile che mi manchi qualcosa di molto importante. Cosa sta causando esattamente questa clemenza ed esiste un modo per applicare controlli più rigorosi?

— Anar
fonte

Con "build riuscite" intendi comunque l'output di JS o ad un certo punto non viene visualizzato alcun messaggio di errore del compilatore?

— ecraig12345

Voglio dire, l'output di JS è comunque possibile e posso eseguire l'app in modalità sviluppo e persino creare l'app di produzione senza problemi. Mi sarei aspettato che TypeScript lo impedisse al momento della compilazione. I messaggi di errore del compilatore vengono sempre visualizzati quando corro, npx tscma voglio ottenere una schermata rossa per ogni errore TypeScript, proprio come faccio per i normali errori JS come const n = 23; n.reverse();quello che risulta in una schermata rossa con il messaggio "n.reverse non è una funzione. (In 'n.reverse ()', 'n.reverse' non è definito) "

— anar

Lo trovo anche così strano. Non riesco nemmeno a trovare una soluzione adeguata.

— Simon Bengtsson,

La prima cosa da capire è che Typescript è un superset di Javascript e in questo caso in realtà non viene controllato il tipo durante la compilazione.

In sostanza quello che succede è che Babel estrae semplicemente il Typescript e lo converte in Javascript, che viene quindi compilato nei bundle js.

Puoi dare un'occhiata alla prima riga dei seguenti documenti Babel e alle avvertenze: https://babeljs.io/docs/en/next/babel-plugin-transform-typescript

Poiché Babel non verifica il tipo, il codice che è sintatticamente corretto, ma fallisce, il controllo del tipo TypeScript può essere trasformato correttamente e spesso in modi imprevisti o non validi.

Quello che vorrei suggerire è estendere il comando build per includere prima tsco meglio la compilazione di Typescript, con noEmitset su true nel tuo tsconfig.

Aggiornamento : ho trovato un'altra istanza in cui questo si applica di recente quando si aggiunge jeste typescripta un progetto. In fondo ai documenti di Jest affermano effettivamente la stessa cosa:

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

Tuttavia, ci sono alcuni avvertimenti sull'uso di TypeScript con Babel. Poiché il supporto TypeScript in Babel è transpilation, Jest non controllerà i test man mano che vengono eseguiti. Se lo desideri, puoi usare ts-jest.

— Mark Atkinson
fonte