Comment produire un fichier de définition de « typages » .d.ts à partir d’une bibliothèque JavaScript existante ?

Question

J'utilise beaucoup de bibliothèques, à la fois les miennes et celles de tierces parties.Je vois que le répertoire "typings" en contient pour Jquery et WinRT...mais comment sont-ils créés ?

Answer 1

Plusieurs options s'offrent à vous en fonction de la bibliothèque en question, de la manière dont elle est écrite et du niveau de précision que vous recherchez.Passons en revue les options, par ordre décroissant d'opportunité.

Peut-être que ça existe déjà

Cochez toujours DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped) d'abord.Il s'agit d'un dépôt communautaire rempli de milliers de fichiers .d.ts et il est très probable que ce que vous utilisez soit déjà là.Vous devriez également vérifier TypeSearch (https://microsoft.github.io/TypeSearch/) qui est un moteur de recherche pour les fichiers .d.ts publiés par NPM ;cela aura un peu plus de définitions que DefinitelyTyped.Quelques modules fournissent également leurs propres définitions dans le cadre de leur distribution NPM, alors voyez également si c'est le cas avant d'essayer d'écrire les vôtres.

Peut-être que vous n'en avez pas besoin

TypeScript prend désormais en charge le --allowJs flag et fera davantage d'inférences basées sur JS dans les fichiers .js.Vous pouvez essayer d'inclure le fichier .js dans votre compilation avec le --allowJs paramètre pour voir si cela vous donne des informations de type suffisamment bonnes.TypeScript reconnaîtra des éléments tels que les classes de style ES5 et les commentaires JSDoc dans ces fichiers, mais risque de se tromper si la bibliothèque s'initialise d'une manière étrange.

Commencer avec --allowJs

Si --allowJs vous a donné des résultats corrects et que vous souhaitez écrire vous-même un fichier de meilleure définition, vous pouvez combiner --allowJs avec --declaration pour voir la « meilleure estimation » de TypeScript sur les types de la bibliothèque.Cela vous donnera un point de départ décent et peut être aussi bon qu'un fichier créé manuellement si les commentaires JSDoc sont bien écrits et que le compilateur a pu les trouver.

Premiers pas avec dts-gen

Si --allowJs n'a pas fonctionné, vous souhaiterez peut-être utiliser dts-gen (https://github.com/Microsoft/dts-gen) pour avoir un point de départ.Cet outil utilise la forme d'exécution de l'objet pour énumérer avec précision toutes les propriétés disponibles.Du côté positif, cela a tendance à être très précis, mais l'outil ne prend pas encore en charge la suppression des commentaires JSDoc pour remplir des types supplémentaires.Vous exécutez ceci comme ceci :

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

Cela générera your-module.d.ts dans le dossier actuel.

Appuyez sur le bouton Snooze

Si vous voulez juste tout faire plus tard et vous passer des types pendant un certain temps, dans TypeScript 2.0, vous pouvez maintenant écrire

declare module "foo";

ce qui vous permettra import le "foo" module avec type any.Si vous avez un problème global dont vous souhaitez traiter plus tard, écrivez simplement

declare const foo: any;

ce qui vous donnera un foo variable.

Answer 2

Vous pouvez soit utiliser tsc --declaration fileName.ts comme Ryan le décrit, ou vous pouvez préciser declaration: true sous compilerOptionsdans ton tsconfig.json en supposant que vous avez déjà eu un tsconfig.json dans le cadre de votre projet.

Answer 3

La meilleure façon de faire face à cela (si un fichier de déclaration n'est pas disponible sur définitivement de ) est deÉcrivez des déclarations uniquement pour les choses que vous utilisez plutôt que toute la bibliothèque.Cela réduit beaucoup le travail - et le compilateur est là pour aider en se plaignant de méthodes manquantes.

Answer 4

Comme le dit Ryan, le compilateur tsc a un commutateur --declaration qui génère un .d.ts fichier d'un .ts déposer.Notez également que (sauf bugs) TypeScript est censé être capable de compiler Javascript, vous pouvez donc transmettre le code javascript existant au compilateur tsc.

Answer 5

Comme décrit dans http://channel9.msdn.Com / Posts / Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-Documentscript à 00:33:52 Ils avaient construit un outil pour convertir des métadonnées webidl et winrt en dactylography d.ts

Answer 6

Voici un PowerShell qui crée un seul fichier de définition TypeScript, une bibliothèque qui comprend plusieurs *.js fichiers avec JavaScript moderne.

Tout d'abord, modifiez toutes les extensions en .ts.

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

Deuxièmement, utilisez le compilateur TypeScript pour générer des fichiers de définition.Il y aura un certain nombre d’erreurs du compilateur, mais nous pouvons les ignorer.

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

Enfin, combinez tous les *.d.ts fichiers en un seul index.d.ts, en supprimant le import déclarations et en supprimant le default de chaque déclaration d'exportation.

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 $_ }

Cela se termine par un seul, utilisable index.d.ts fichier qui comprend de nombreuses définitions.

Answer 7

Je chercherais une cartographie existante de vos bibliothèques JS tiers qui prennent en charge le script # ou Sharpkit.Les utilisateurs de ces compilateurs C # à .js Cross auront été confrontés au problème que vous avez maintenant confronté et auront peut-être publié un programme open source pour analyser votre 3ème partie lib et convertir en classes de squelette C #.Si tel est le cas, pirater le programme de scanner pour générer des documents dactylographiés à la place de C #.

Échec de l'échec, traduire une interface publique C # pour votre 3e Partie LIB dans les définitions dossescriptes peut être plus simple que de faire la même chose en lisant la source JavaScript.

Mon intérêt particulier est le Cadre EXTJS RIA de SENCHA et je sais que des projets ont été publiés pour générer une interprétation C # pour le numéro de script ou Sharpkit

Answer 8

Lors de la création de votre propre bibliothèque, vous pouvez créer *.d.ts fichiers en utilisant le tsc (TypeScript Compiler) comme ceci :(en supposant que vous construisez votre bibliothèque selon le dist/lib dossier)

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

• -d (--declaration) :génère le *.d.ts des dossiers
• --declarationDir dist/lib:Répertoire de sortie des fichiers de déclaration générés.
• --declarationMap:Génère un sourcemap pour chaque fichier '.d.ts' correspondant.
• --emitDeclarationOnly:N'émettez que des fichiers de déclaration '.d.ts'.(pas de JS compilé)

(voir le documents pour toutes les options du compilateur en ligne de commande)

Ou par exemple dans votre package.json:

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

puis exécutez : yarn build:types (ou npm run build:types)