Pourquoi mon application React Native se construit-elle correctement malgré l'erreur du compilateur TypeScript?

J'ai récemment commencé à utiliser TypeScript avec Expo. J'ai fait toutes les intégrations linter / formatter comme typescript-eslintpour que je puisse attraper la plupart des erreurs pendant le codage. Pour vérifier si le code se compile, je lance de npx tsctemps en temps et corrige en conséquence.

Une chose que je n'ai pas encore entièrement comprise est la raison pour laquelle mon application se construit avec succès même en cas de nombreuses erreurs de compilation. Je m'attends (et je préfère) à voir une erreur d'écran rouge pour chaque erreur de compilation plutôt que la construction de l'application avec succès et je le découvrirai plus tard. Par exemple,

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

est une erreur TypeScript typique qui (je crois?) peut être facilement vérifiée au moment de la compilation. Je veux que cela entraîne une grande erreur d'écran rouge et que la construction échoue.

Je suis assez nouveau sur TypeScript, il est donc possible que je manque quelque chose de très important. Quelle est exactement la cause de cette clémence et existe-t-il un moyen d'appliquer des contrôles plus stricts?

reactjs typescript react-native expo anar
la source

Par «builds succès», voulez-vous dire que le JS est de toute façon sorti, ou qu'il n'y a aucun message d'erreur du compilateur affiché à un moment donné?

ecraig12345

Je veux dire que le JS est sorti de toute façon et je peux exécuter l'application en mode développeur et même créer l'application de production sans aucun problème. Je m'attendais à ce que TypeScript empêche cela au moment de la compilation. Les messages d'erreur du compilateur sont toujours affichés lorsque j'exécute, npx tscmais je veux obtenir un écran rouge pour chaque erreur TypeScript, tout comme je le fais pour les erreurs JS normales comme const n = 23; n.reverse();cela se traduit par un écran rouge avec le message "n.reverse n'est pas une fonction. (Dans 'n.reverse ()', 'n.reverse' n'est pas défini) "

anar

Je trouve ça aussi bizarre aussi. Je ne trouve pas non plus de solution adéquate.

Simon Bengtsson

Réponses:

La première chose à comprendre est que Typescript est un sur-ensemble de Javascript, et dans ce cas, le type n'est pas vérifié lors de la compilation.

Essentiellement, ce qui se passe est que Babel supprime simplement le TypeScript et le convertit en Javascript, qui est ensuite compilé dans les bundles js.

Vous pouvez consulter la première ligne des documents Babel suivants ainsi que les mises en garde: https://babeljs.io/docs/en/next/babel-plugin-transform-typescript

Étant donné que Babel ne vérifie pas le type, le code qui est syntaxiquement correct, mais échouerait, la vérification de type TypeScript peut être transformée avec succès, et souvent de manière inattendue ou non valide.

Ce que je suggérerais, c'est d'étendre votre commande build pour inclure d'abord tscou plutôt la compilation Typescript, avec noEmitla valeur true dans votre tsconfig.

Mise à jour : j'ai trouvé une autre instance où cela s'applique récemment lors de l'ajout jestet typescriptà un projet. Au bas des documents Jest, ils indiquent en fait la même chose:

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

Cependant, il y a quelques mises en garde à utiliser TypeScript avec Babel. Étant donné que la prise en charge de TypeScript dans Babel est une transpilation, Jest ne vérifie pas le type de vos tests lorsqu'ils sont exécutés. Si vous le souhaitez, vous pouvez utiliser ts-jest.

Mark Atkinson
la source