Come si produce un .d. ts file di definizione” typings " da una libreria JavaScript esistente?

Question

Sto usando molte librerie sia mie che di terze parti.Vedo che la directory "typings" contiene alcuni per Jquery e WinRT...ma come sono stati creati?

Answer 1

Ci sono alcune opzioni disponibili a seconda della libreria in questione, di come è scritta e del livello di precisione che stai cercando.Esaminiamo le opzioni, in ordine approssimativamente decrescente di desiderabilità.

Forse esiste già

Controlla sempre DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped) prima.Questo è un repo comunità piena di letteralmente migliaia di .file d. ts ed è molto probabile che la cosa che stai usando sia già lì.Dovresti anche controllare TypeSearch (https://microsoft.github.io/TypeSearch/) che è un motore di ricerca per NPM-pubblicato .file d. ts;questo avrà leggermente più definizioni di DefinitelyTyped.Alcuni moduli stanno anche spedendo le proprie definizioni come parte della loro distribuzione NPM, quindi vedi anche se è così prima di provare a scrivere il tuo.

Forse non ne hai bisogno

TypeScript ora supporta il --allowJs bandiera e farà più inferenze basate su JS in .file js.Si può provare compreso il .file js nella tua compilazione insieme al --allowJs impostazione per vedere se questo ti dà informazioni di tipo abbastanza buone.TypeScript riconoscerà cose come le classi in stile ES5 e i commenti JSDoc in questi file, ma potrebbe inciampare se la libreria si inizializza in modo strano.

Inizia con --allowJs

Se --allowJs ti ha dato risultati decenti e vuoi scrivere tu stesso un file di definizione migliore, puoi combinare --allowJs con --declaration per vedere la "migliore ipotesi" di TypeScript nei tipi della libreria.Questo ti darà un punto di partenza decente e potrebbe essere buono come un file creato a mano se i commenti JSDoc sono ben scritti e il compilatore è stato in grado di trovarli.

Inizia con dts-gen

Se --allowJs non ha funzionato, potresti voler usare dts-gen (https://github.com/Microsoft/dts-gen) per ottenere un punto di partenza.Questo strumento utilizza la forma runtime dell'oggetto per enumerare accuratamente tutte le proprietà disponibili.Sul lato positivo questo tende ad essere molto preciso, ma lo strumento non supporta ancora lo scraping dei commenti JSDoc per popolare tipi aggiuntivi.Fai questo in questo modo:

npm install -g dts-gen
dts-gen -m <your-module>

Questo genererà your-module.d.ts nella cartella corrente.

Premi il pulsante Snooze

Se vuoi solo fare tutto in seguito e andare senza tipi per un po' , in TypeScript 2.0 ora puoi scrivere

declare module "foo";

che vi permetterà import il "foo" modulo con tipo any.Se si dispone di un globale che si desidera affrontare in seguito, basta scrivere

declare const foo: any;

che vi darà un foo variabile.

Answer 2

È possibile utilizzare tsc --declaration fileName.ts come Descrive Ryan, oppure è possibile specificare declaration: true sotto compilerOptionsin Il tuo tsconfig.json Supponendo che hai già avuto un tsconfig.json sotto il tuo progetto.

Answer 3

Il modo migliore per affrontare questo (se un file di dichiarazione non è disponibile su Definishelyped ) è aScrivi dichiarazioni solo per le cose che usi piuttosto che l'intera biblioteca.Questo riduce molto il lavoro - e inoltre il compilatore è lì per derogarne lamentarsi dei metodi mancanti.

Answer 4

Come dice Ryan, il compilatore TSC ha un interruttore --declaration che genera un file .d.ts da un file .ts.Si noti inoltre che (barring bugs) dattiloscritto dovrebbe essere in grado di compilare JavaScript, in modo da poter passare il codice JavaScript esistente sul compilatore TSC.

Answer 5

Come descritto in http://channel9.msdn.COM / POST / ANDERS-HEJLSBERG-STEVE-STEVE-LUCCO-AND-LUKE-HOBAN-INSTERSCRICTS AT 00:33:52 Avevano costruito uno strumento per convertire i metadati webidl e winrt in dattilografo D.TS

Answer 6

Ecco alcune PowerShell che crea un unico file Generato un file di definizione di una biblioteca che comprende più *.js i file con i moderni JavaScript.

Prima di tutto, cambiate tutte le estensioni .ts.

Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }

In secondo luogo, utilizzare il Dattiloscritto del compilatore per generare i file di definizione.Ci saranno un sacco di errori di compilazione, ma non possiamo ignorare quelli.

Get-ChildItem | foreach { tsc $_.Name  }

Infine, unire tutte le *.d.ts in un unico file index.d.ts, rimuovere il import dichiarazioni e la rimozione del default da ogni dichiarazione di esportazione.

Remove-Item index.d.ts; 

Get-ChildItem -Path *.d.ts -Exclude "Index.d.ts" | `
  foreach { Get-Content $_ } | `
  where { !$_.ToString().StartsWith("import") } | `
  foreach { $_.Replace("export default", "export") } | `
  foreach { Add-Content index.d.ts $_ }

Con questo si conclude con un singolo, utilizzabile index.d.ts file che include molte delle definizioni.

Answer 7

Cercherei una mappatura esistente delle tue librerie JS di terze parti che supportano lo script # o SharpKit.Gli utenti di questi compilatori C # to .js Cross avranno dovuto affrontare il problema che ora affronti e potrebbero aver pubblicato un programma open source per scansionare la tua versione di terze parti e convertire le classi di scheletro C #.Se è così hackera il programma dello scanner per generare dattilvi in posizione di C #.

In caso contrario, la traduzione di un'interfaccia Public C # per la tua versione di terze parti nelle definizioni di dattiloscritti potrebbe essere più semplice che fare lo stesso leggendo la sorgente JavaScript.

Il mio interesse speciale è la struttura di Sencha Extjs Ria e so che ci sono stati progetti pubblicati per generare un'interpretazione C # per Script # o SharpKit

Answer 8

Durante la creazione della tua libreria, è possibile creare file *.d.ts utilizzando il comando tsc (dattilografo compilatore) come: (Supponendo che tu stia costruendo la tua biblioteca alla cartella dist/lib)

tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly

.

.
• -d (--declaration): Genera i file *.d.ts
• --declarationDir dist/lib: directory di uscita per file di dichiarazione generati.
• --declarationMap: genera un sourcemap per ciascun file ".d.ts" corrispondente.
• --emitDeclarationOnly: Emetti solo i file di dichiarazione '.d.ts'.(nessun JS compilato)

  (vedi Docs per tutte le opzioni del compilatore della riga di comando)

  o ad esempio nel tuo package.json:

  "scripts": {
      "build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
  }
  

  .

  e quindi eseguire: yarn build:types (o npm run build:types)