create-react-app --template typescript — er det mulig å midlertidig deaktivere typekontroll?

Jeg jobber med en create-react-app med TypeScript, og den genererer automatisk en tsconfig i frontend-mappen min med "include": "/src" hver gang jeg kjører appen, selv om jeg sletter filen eller endrer den.

Finnes det en måte å deaktivere typekontroll i en TS CRA (uten å ejecte)?

Svar #1

Deaktiver typekontroll

CRA bruker Babel-kompilatoren

Babel er en tredjeparts-kompilator for Flow, JSX og TypeScript som kombinerer dem. Babel utfører ikke typekontroll, CRA bruker noen metoder fra TypeScript Compiler og noen av dem fra TSLint. Så Babel kan kompilere kode selv om det er en typefeil fordi Babel ikke ser det. Legg dette til miljøet: TSC_COMPILE_ON_ERROR=true

For mer detalj, se CRA-dokumentasjonen

En fil deaktivering

Bruk // @ts-nocheck eller /* tslint:disable */ (avhengig av versjon av CRA) i starten av filen.

Unngå å bruke type & bruk av any-type

Også, i TypeScript kan typer være valgfrie når de er definert på den måten. Så du kan ikke bruke det hvis du bruker det i tsconfig.json

{
   "compilerOptions": {
       ///...
       "strict": false
   }
}

Siden det ser ut til at den største utfordringen du har er å finne typedefinisjoner for eksterne biblioteker, kan du lage en ambient definisjon for enhver variabel du ikke vil ha typekontroll for:

declare var variableName: any;
// better in .d.ts files

For eksempel, for jQuery ville det være declare var $: any;. Da kunne du gjøre: $("#test").myNonExistentFunction(); hvis du ønsket det.

Alternativt, når man bruker es2015-moduler, kan følgende kode brukes for å tillate import av biblioteket:

declare module "jquery" {
    var _temp: any;
    export = _temp;
}

Kortformede ambient moduldeklarasjoner (TS 2.0+)

I TS 2.0+ er en bedre måte å deaktivere typekontroll for importeringer på å lage en .d.ts-fil i prosjektet ditt og definere forkortede ambient moduldeklarasjoner:

declare module "jquery";
// or use a wildcard
declare module "express-*"; // or use "*" to allow everything

Dette vil la deg bruke disse importene fritt uten typekontroll:

import $ from "jquery";

$.something(); // ok at compile time, but will be an error at runtime

Når det er sagt, den beste veien å gå i dette scenariet er i en .d.ts-fil i prosjektet ditt for gradvis å definere grensesnittet til biblioteket du er avhengig av basert på hva du bruker.

ts-ignore-kommentarer (TS 2.6+)

Det er mulig å deaktivere en hvilken som helst TypeScript-feil ved å bruke // @ts-ignore-kommentarer i TypeScript 2.6+. For eksempel:

if (false) {
    // @ts-ignore: Unreachable code error
    console.log("hello");
}

@ts-expect-error kommentar (TS 3.9) Å forvente en feil er bedre, tryggere og mer stabilt enn å ignorere. Merk at det fungerer for neste kode-linje, noe som betyr at du kan bruke kommentarer mellom kode og @ts-expect-error.

// @ts-expect-error
/* I will override error */
//
var num: string = 3;

Ingen forskjell? Prøv å bruke disse reglene:

Velg ts-expect-error hvis:

  • du skriver testkode der du faktisk vil at typesystemet skal gi en feil på en operasjon
  • du forventer at en løsning kommer ganske raskt, og du trenger bare en rask midlertidig løsning
  • du er i et prosjekt av rimelig størrelse med et proaktivt team som ønsker å fjerne undertrykkelseskommentarer så snart berørt kode er gyldig igjen

Velg ts-ignore hvis:

  • du har et større prosjekt og nye feil har dukket opp i koden uten en klar eier
  • du er midt i en oppgradering mellom to forskjellige versjoner av TypeScript, og en linje med kode gir feil i en versjon, men ikke i en annen.
  • du har ærlig talt ikke tid til å avgjøre hvilken av disse alternativene som er bedre.

Kilder: https://stackoverflow.com/a/31089657/14724418, https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html

Relaterte artikler