Informazioni su "* .d.ts" in TypeScript

Mi sento curioso *.d.tsperché sono un principiante in TypeScript. E qualcuno mi ha detto che questo tipo di file è qualcosa come "file head" in C ++ ma solo per JS. Ma non riesco a convertire un file JS puro in file a *.d.tsmeno che non modifichi forzatamente *.jsin *.ts. Quindi ho tre file: un file JS, un file TS e un *.d.tsfile.

1. Qual è la relazione tra loro?

2. Come posso usare il *.d.tsfile? Significa che posso eliminare il *.tsfile in modo permanente?

3. In tal caso, come può il *.d.tsfile sapere quale file JS sta mappando su se stesso?

Sarebbe molto bello se qualcuno potesse darmi un esempio.

Il file "d.ts" viene utilizzato per fornire informazioni di tipo dattiloscritto su un'API scritta in JavaScript. L'idea è che stai usando qualcosa come jQuery o underscore, una libreria javascript esistente. Vuoi consumarli dal tuo codice dattiloscritto.

Invece di riscrivere jquery o il carattere di sottolineatura o qualsiasi altra cosa in dattiloscritto, puoi invece scrivere il file d.ts, che contiene solo le annotazioni del tipo. Quindi dal tuo codice dattiloscritto ottieni i vantaggi dattiloscritti del controllo statico dei tipi mentre usi ancora una libreria JS pura.

dsta per File di dichiarazione :

Quando viene compilato uno script TypeScript c'è un'opzione per generare un file di dichiarazione (con estensione .d.ts) che funziona come un'interfaccia per i componenti nel JavaScript compilato. Nel processo il compilatore elimina tutti i corpi di funzioni e metodi e conserva solo le firme dei tipi che vengono esportati. Il file di dichiarazione risultante può quindi essere utilizzato per descrivere i tipi di TypeScript virtuali esportati di una libreria o modulo JavaScript quando uno sviluppatore di terze parti lo utilizza da TypeScript.

Il concetto di file di dichiarazione è analogo al concetto di file di intestazione trovato in C / C ++.

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

I file di dichiarazione dei tipi possono essere scritti a mano per le librerie JavaScript esistenti, come è stato fatto per jQuery e Node.js.

Grandi raccolte di file di dichiarazioni per le librerie JavaScript più diffuse sono ospitate su GitHub in DefinitelyTyped e nel Registro delle tipizzazioni . Viene fornita un'utilità della riga di comando chiamata digitazioni per facilitare la ricerca e l'installazione dei file di dichiarazione dai repository.

Non ho potuto commentare e quindi sto aggiungendo questo come risposta.
Abbiamo avuto qualche problema nel provare a mappare i tipi esistenti su una libreria javascript.

Per mappare un .d.tsfile sul suo file javascript devi dare al .d.tsfile lo stesso nome del file javascript, tenerlo nella stessa cartella e puntare il codice che ne ha bisogno sul .d.tsfile.

ad esempio: test.jse test.d.tssono nella testdir/cartella, quindi lo importi in questo modo in un componente di reazione:

import * as Test from "./testdir/test";

Il .d.tsfile è stato esportato come uno spazio dei nomi come questo:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Esempio funzionante per un caso specifico :

Supponiamo che tu abbia il mio modulo che condividi tramite npm .

Lo installi con npm install my-module

Lo usi così:

import * as lol from 'my-module';

const a = lol('abc', 'def');

La logica del modulo è tutta in index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Per aggiungere digitazioni, crea un file index.d.ts:

declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
}

interface MyResponse {
  something: number;
  anything: number;
}

Come @takeshin ha detto .d sta per file di dichiarazione per typescript (.ts).

Pochi punti da chiarire prima di procedere a rispondere a questo post -

1. Typescript è un superset sintattico di javascript.
2. Il dattiloscritto non funziona da solo, deve essere convertito in javascript ( conversione da dattiloscritto a javascript )
3. "Definizione del tipo" e "Verifica del tipo" sono le principali funzionalità aggiuntive che typescript fornisce su javascript. ( controlla la differenza tra tipo script e javascript )

Se stai pensando se typescript è solo un superset sintattico, quali vantaggi offre - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Per rispondere a questo post -

Come discusso, il dattiloscritto è un superset di javascript e deve essere convertito in javascript. Quindi se una libreria o un codice di terze parti è scritto in dattiloscritto, alla fine viene convertito in javascript che può essere utilizzato dal progetto javascript ma viceversa non è vero.

Per ex -

Se installi la libreria javascript -

npm install --save mylib

e prova a importarlo in codice dattiloscritto -

import * from "mylib";

riceverai un errore.

"Impossibile trovare il modulo 'mylib'."

Come menzionato da @Chris, molte librerie come il trattino basso, Jquery sono già scritte in javascript. Invece di riscrivere quelle librerie per progetti dattiloscritti, era necessaria una soluzione alternativa.

Per fare ciò, è possibile fornire il file di dichiarazione del tipo nella libreria javascript denominata * .d.ts, come nel caso precedente mylib.d.ts. Il file di dichiarazione fornisce solo dichiarazioni di tipo di funzioni e variabili definite nel rispettivo file javascript.

Ora quando provi -

import * from "mylib";

mylib.d.ts viene importato che funge da interfaccia tra il codice della libreria javascript e il progetto dattiloscritto.

Questa risposta presuppone che un po 'di JavaScript che non si desidera convertire in dattiloscritto, ma si desidera beneficiare di tipo controllando con modifiche minime al vostro .js. Un .d.tsfile è molto simile a un file di intestazione C o C ++. Il suo scopo è definire un'interfaccia. Ecco un esempio:

mashString.d.ts

/** Makes a string harder to read. */
declare function mashString(
    /** The string to obscure */
    str: string
):string;
export = mashString;

mashString.js

// @ts-check
/** @type {import("./mashString")} */
module.exports = (str) => [...str].reverse().join("");

main.js

// @ts-check
const mashString = require("./mashString");
console.log(mashString("12345"));

La relazione qui è: mashString.d.tsdefinisce un'interfaccia, mashString.jsimplementa l'interfaccia e main.jsusa l'interfaccia.

Per fare in modo che il controllo del tipo funzioni, aggiungi // @ts-check ai tuoi .jsfile. Ma questo controlla solo che main.jsusi correttamente l'interfaccia. Per garantire che lo mashString.jsimplementi correttamente, aggiungiamo /** @type {import("./mashString")} */prima dell'esportazione.

È possibile creare i .d.tsfile iniziali utilizzando tsc -allowJs main.js -dquindi modificarli come richiesto manualmente per migliorare il controllo del tipo e la documentazione.

Nella maggior parte dei casi, l'implementazione e l'interfaccia hanno lo stesso nome, qui mashString. Ma puoi avere implementazioni alternative. Per esempio si potrebbe rinominare mashString.jsad reverse.jse avere un'alternativa encryptString.js.