Je viens de commencer avec Typescript pour un projet web front-end. Mon objectif est d'utiliser une approche OOP. Ma convention est donc une classe par fichier (nommé à partir de la classe qu'il contient).

Considérez cet exemple:

//Car.ts
export default class Car {
    public startEngine (): void {
        console.log('vroom!');        
    }
}

//RaceCar.ts
import Car from './Car';

export default class RaceCar extends Car {
    public startEngine (): void {
        console.log('!!VROOOOOMM!!');        
    }
}

//index.ts 
import RaceCar from './RaceCar';
import Car from './RaceCar';

const car:Car = new RaceCar();

car.startEngine();

Ce code fonctionne bien mais j'ai 2 questions :

  • Lorsque j'utilise la convention "une classe par fichier" (avec exportation par défaut), il est vraiment ennuyeux d'écrire import Car from './Car';. Y a-t-il un moyen court de faire cela? Comme une macro ou quelque chose comme ça ? J'ai essayé import './Car'; mais bien sûr cela n'importe pas le symbole Car...
  • Une autre chose ennuyeuse est d'importer Car et RaceCar dans index.ts. Existe-t-il un moyen d'importer uniquement RaceCar qui connaît déjà la classe Race ?

En d'autres termes, je cherche un moyen de faire quelque chose comme une inclusion C++.

2
NiHoT 12 mars 2019 à 19:11

2 réponses

Meilleure réponse

Lorsque j'utilise la convention "une classe par fichier" (avec export par défaut), il est vraiment ennuyeux d'écrire import Car from './Car';. Y a-t-il un moyen court de faire cela? Comme une macro ou quelque chose comme ça ? J'ai essayé d'importer './Car'; mais bien sûr, cela n'importe pas le symbole de la voiture...

Pour utiliser la voiture, le code devra dire import Car from './Car'. Cette syntaxe signifie essentiellement "exécutez le code dans ./Car et attribuez son exportation par défaut à Car". import './Car' est légal, mais cela signifie "exécutez le code dans ./Car, mais je n'ai pas besoin d'utiliser ce qu'il exporte".

Cela dit, divers IDE peuvent vous aider à remplir automatiquement l'importation. Par exemple, j'utilise Visual Studio Code, et si j'utilise Car quelque part dans mon code sans l'importer ni le définir, j'obtiens le soulignement rouge et je peux ensuite appuyer sur ctrl-espace pour l'importer automatiquement dans la plupart des cas.

Une autre chose ennuyeuse est d'importer Car et RaceCar dans index.ts. Existe-t-il un moyen d'importer uniquement RaceCar qui connaît déjà la classe Race ?

Si vous avez besoin de référencer directement l'un des éléments exportés par le fichier Car, vous devrez l'importer. Dans votre exemple, vous utilisez Car comme type. Si vous en avez besoin, vous devez l'importer. Cela dit, dans votre situation, j'utiliserais probablement simplement RaceCar comme type, puisque c'est de toute façon ce que vous êtes en train de découvrir.

import RaceCar from './RaceCar';

const car: RaceCar = new RaceCar();
car.startEngine();
2
Nicholas Tower 12 mars 2019 à 16:24

TypeScript utilise la syntaxe +ES6 :

Selon https://developer.mozilla.org/ en-US/docs/Web/JavaScript/Reference/Statements/import

Importez un module entier pour les effets secondaires uniquement, sans rien importer. Cela exécute le code global du module, mais n'importe en fait aucune valeur.

import '/modules/my-module.js';

Vous devez importer le symbole que vous souhaitez utiliser :

import myDefault from '/modules/my-module.js'; // myDefault is the default exported symbol in the module.

Par conséquent, non. Vous devez toujours importer le symbole que vous souhaitez utiliser explicitement et uniquement à partir de ces emplacements de code où vous devez les utiliser.

2
José Cabo 12 mars 2019 à 16:21