Déclaration export en TypeScript

Shuvayan Ghosh Dastidar 12 juillet 2022
  1. Utiliser l’instruction export dans TypeScript
  2. Types d’exportation dans TypeScript
  3. Tout exporter en TypeScript
Déclaration export en TypeScript

Le mot-clé export dans TypeScript est utilisé pour exporter des variables, des constantes, des classes, des fonctions et des interfaces ou des alias de type dans différents fichiers. Cela devient très utile pour une gestion efficace des fichiers dans les grands projets en TypeScript.

Cet article démontrera l’utilisation de l’instruction export dans TypeScript.

Utiliser l’instruction export dans TypeScript

La syntaxe des instructions export commence par le mot-clé export suivi de l’élément à exporter, qui peut être importé dans un autre fichier à l’aide du mot-clé import.

File1.ts :

export SomeFunction() {
    // body of the function
}

File2.ts :

import { SomeFunction } from "./File1";

SomeFunction();

Ce qui précède montre la syntaxe et un exemple de base de la façon dont le mot-clé export peut être utilisé dans TypeScript pour importer et exporter un module.

Types d’exportation dans TypeScript

TypeScript a différentes instructions export, l’une étant l’exportation nommée et l’autre l’exportation par défaut. L’exportation default est limitée à une exportation par défaut par fichier, alors qu’il peut y avoir plusieurs exportations nommées ou des instructions d’exportation normales.

File1.ts :

const AddTwoNumbers = (a : number, b : number) : number  => {
    return a + b;
}

export default AddTwoNumbers;

File2.ts :

import AddTwoNumbers from "./File1"
const result = AddTwoNumbers(4,5);

Ainsi dans l’exemple ci-dessus, deux nombres sont ajoutés après utilisation de la fonction default export définie dans File1.ts. Maintenant, la fonction peut être utilisée même avec un nom différent.

Par exemple:

File2.ts :

import AddNumbers from "./File1"
const result = AddNumbers(4,5);

Ainsi n’importe quel nom peut être utilisé dans la condition default export. Cependant, les exportations par défaut sont limitées à une seule par fichier.

Nous devons utiliser l’exportation non par défaut ou nommée pour exporter plus d’éléments. Les modules exportés sont importés avec le même nom.

File1.ts :

const AddNumbers = (a : number, b : number) : number => {
    return a + b;
}

const SubtractTwoNumbers = (a : number, b : number) : number => {
    return a - b;
}

export { AddNumbers, SubtractTwoNumbers };

File2.ts :

import { AddNumbers, SubtractTwoNumbers } from "./File1"
const resultAdd = AddNumbers(4,5);
const resultSub = SubtractTwoNumbers(4,5);

Ce qui précède montre l’exemple d’exportations et d’importations nommées dans les fichiers respectifs. Ils doivent être entourés d’accolades et, contrairement à l’exportation par défaut, il peut y avoir n’importe quel nombre d’exportations nommées.

Une autre façon d’utiliser les exportations par défaut dans TypeScript consiste à utiliser la syntaxe export =.

File1.ts :

class LengthValidator {
    check(s : string) {
        return s.length > 0;
    }
}

export = LengthValidator;

File2.ts :

import lengthChecker = require("./File1");
let validator = lengthChecker();
var testString : string = "test"
if ( validator.check(testString)) {
    console.log("Okay");
} else {
    console.log("Not working");
}

Tout exporter en TypeScript

Parfois, il devient important d’exporter tous les éléments définis dans un certain fichier. Cela peut être fait via l’opérateur export et l’opérateur *.

File1.ts :

export const AddNumbers = (a : number, b : number) : number => {
    return a + b;
}

export const SubtractTwoNumbers = (a : number, b : number) : number => {
    return a - b;
}
export * as utils from "./File1"

File2.ts :

import {utils} from "./File1"
const resultAdd = utils.AddNumbers(4,5);
const resultSub = utils.SubtractTwoNumbers(4,5);

Ainsi, tout ce qui se trouve dans File1.ts est exporté en tant que utils et peut être importé dans un autre fichier, et les fonctions peuvent être référencées comme indiqué dans l’exemple ci-dessus.

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website