2017-07-03 6 views
1

Je convertis une base de code existante de js/react/jsx en TypeScript. Naturellement, je voudrais le faire fichier par fichier, et avoir une question sur les approches pour faire fonctionner le compilateur TS avec la base de code js existante.Augmentation des types pour le module importé dans TypeScript

je convertir le fichier index.js mais que vous voulez laisser foo.js en JavaScript pour l'instant:

// index.ts 

import { fooFunction } from 'foo'; 

foo({ val: 1 }); 

// foo.js 

export const fooFunction = ({ val, optionalProp }) => { 
    //... 
} 

Le problème dans cet exemple que tapuscrit infère automatiquement argument foo et se plaint que Property 'optionalProp' is missing in type { val:string, optionalProp:any }

Ayant besoin de "stub" le type de fooFunction m'a envoyé à la recherche d'un d J'ai trouvé quelques façons je peux être en mesure de le faire:

1) Utiliser besoin au lieu d'importation

// index.ts 
var fooFunction: any = require('foo').fooFunction; 

2) déclarations Fusionner

? 

3) Ajouter un fichier d.ts avec des déclarations personnalisées pour foo - N'a pas essayé mais semble incommode

Idéalement je n'ai pas à faire (1) parce que je veux continuer à utiliser la syntaxe d'importation et je n'ai pas faire (3) parce que cela va me obliger à ajouter déclaration uniquement les fichiers pour les supprimer plus tard quand je suis prêt à convertir foo. Cela peut paraître génial, mais je n'arrive pas à trouver une solution de travail.

// index.ts 

declare module 'foo' { 
    function fooFunction(options: any): any 
} 

ne fonctionne pas et jette Cannot redeclare block-scoped variable 'fooFunction'

Comment puis-je faire cela? Y at-il des documents qui ont des exemples de ce que j'essaie de faire et/ou ont plus d'explications sur la fusion de déclarations et comment travailler avec namespace/interface/value? Existe-t-il de meilleures approches pour effectuer une transition incrémentielle vers TypeScript?

+0

Pour ceux qui pourraient avoir la même question, j'ai opté pour l'utilisation de fichiers de déclaration. Pour cet exemple, fichier 'foo.d.ts'. Donc, maintenant j'ai 'foo.d.ts' et' foo.js'. Lors de la conversion de 'foo.js' à TS plus tard, le fichier de déclaration deviendra probablement inutile, donc prévoyez de le retirer –

Répondre

0

Cela peut ne pas fonctionner, je voulais juste faire une préface avec cela - je ne sais pas du tout de React - mais je sais avec certitude que vous pouvez utiliser ? sur une variable pour le rendre "facultatif". Je l'ai utilisé auparavant dans les fonctions

myFooFunction(requiredParam: typeA, optionalParam?: typeB) { ... } 

Une autre chose que vous devriez considérer est le fait que Tapuscrit peut ajouter un certain type de vérification au moment de la compilation, donc l'OMI, vous devriez tirer parti de cette autant que possible. Edit: pour travailler avec le paramètre optionnel, vous pouvez simplement vérifier qu'il existe.

myFooFunction(requiredParam: typeA, optionalParam?: typeB) { 
    if (optionalParam) { // if this results to true, the param was given 
    //do something 
    } 
} 
+0

J'ai pensé à cela, mais 'fooFunction' dans' foo.js' est du JavaScript pur, pas de typeScript –