javascript - Verificări și declarații TypeScript în JS obișnuit

Deci practic aș dori să folosesc TypeScript pentru a-mi verifica codul în căutare de erori în timp ce îl editez (VS Code), dar nu vreau să fac niciun pas de transpilare.

Am codul meu în fișiere .js și "allowJs": true în tsconfig.json

Singura problemă este că editorul s-ar plânge de utilizarea cuvintelor din TypeScript în fișierele JS, de exemplu:

declare module "something" {
    export interface MyInterface {

Conduce la eroare:

 "'module' declarations can only be used in TypeScript files"

Am încercat să nu-mi pese, dar din păcate, asta duce de asemenea la o eroare atunci când rulez efectiv programul (node.js)!

SyntaxError: Unexpected strict mode reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)

Nu pot cumva să am verificări TS fără TS?

Știu că pot, adică e chiar acolo, dar apoi trebuie să șterg tot ce ține de TS înainte de lansarea aplicației.

Nu știu, poate cineva are un... transpiler pentru asta? :D

Surprinzător, nu există multe informații despre acest lucru pe Internet.

Motivele pentru care nu voi transpila TS în JS:

• Petrece timp
• Codul este un haos. Are funcții aleatorii pe care nu le-am scris niciodată, de asemenea „var” peste tot
• Erorile au numere de linie din fișiere .JS care sunt generate automat (stricate)
• De ce aș compila oricum un limbaj de scripting

Răspuns #1

Da, absolut poți. Și nici nu ai nevoie de fișiere de declarații TypeScript.

TypeScript va verifica cu plăcere codul tău JS simplu dacă ai setat flag-ul checkJs fie în configurația CLI, fie în fișierul tău tsconfig.json. allowJs de fapt nu are legătură cu asta, acesta doar impune dacă poți importa fișiere JS simple în fișiere TS/TSX (nu contează dacă imporți JS în JS). Anotarea JSDoc este de fapt o metodă excelentă de a combina cod JS simplu și cod TS într-o bază de cod mixtă, de exemplu dacă ești în procesul de migrare a codului de la JS la TS.

TypeScript (chiar și fără adnotări JSDoc) îți va oferi o mulțime de verificări de tip „implicite” utile fără a scrie sintaxă suplimentară, doar prin detectarea modului în care declari variabilele și presupunând că tipul lor nu ar trebui să se schimbe (printre alte deducții):

// Implicit TypeScript typing
let myBooleanValue = false;
myBooleanValue = 'true'; // Error: Type 'string' is not assignable to type 'boolean'.ts(2322)

Dacă vrei totuși și mai mult control, TypeScript este pe deplin compatibil cu adnotările de tip JSDoc. Asigură-te că citești documentația și folosești sintaxa corectă pentru comentarii (de exemplu /** ... */ și nu // ...). Practic nu există nimic ce poți face cu sintaxa TypeScript pe care să nu-l poți face cu JSDoc, este doar puțin mai detaliată:

// Explicit JSDoc typing
/**
 * @type {string}
 */
let myVar;
myVar = 7; // Error: Type 'number' is not assignable to type 'string'.ts(2322)

Poți deveni și mai avansat cu asta, declarând lucruri precum parametrii funcțiilor, structura obiectelor și câmpurile încorporate, valorile returnate și altele:

/**
 * @param {object} myParam
 * @param {number} myParam.myNumber
 * @returns {boolean} // Error: A function whose declared type is neither 'void' nor 'any' must return a value.ts(2355) (because nothing is currently returned from myFunction)
 */
function myFunction(myParam) {
  let myNumberCopy = myParam.myNumber;
  let myMissingPropertyCopy = myParam.myMissingProperty; // Error: Property 'myMissingProperty' does not exist on type '{ myNumber: number; }'.ts(2339)
}

Poți chiar să faci lucruri nebunești, cum ar fi să imporți tipuri din alte fișiere sau pachete și să le folosești în adnotările tale JSDoc:

/**
 * @type {import("React").FC}
 */
const MyComponent = () => null;

Iată fișierul tsconfig.json pe care l-am folosit pentru exemplele de mai sus, fără nimic în afară de pachetul NPM de bază typescript instalat:

{
  "compilerOptions": {
    "module": "es6",
    "noEmit": true,
    "checkJs": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"]
}

Dovadă vizuală că totul funcționează foarte bine în VSCode:

Cu această configurație, un mod bun de a „testa” dacă ai erori de tip în întregul tău cod este să rulezi npx tsc --noEmit, care va rula verificarea TypeScript (inclusiv adnotările JSDoc) pentru toate fișierele tale, conform fișierului tău tsconfig.json.