web-dev-qa-db-fra.com

Comment utiliser les espaces de noms avec l'importation dans TypeScript

J'ai deux classes dans deux fichiers distincts et l'un s'étend d'un autre. La classe de base contient des instructions import utilisant des modules de nœuds. Il n'est pas clair pour moi pourquoi la classe dérivée (qui se trouve dans un fichier séparé) ne reconnaît pas la classe de base !!! ???

Quelqu'un peut-il clarifier cela s'il vous plaît?

// UtilBase.ts

/// <reference path="../typings/node.d.ts" />
/// <reference path="../typings/packages.d.ts" />

import * as path from "path"; // <---- THIS LINE BREAKS THE BUILD!!!!

namespace My.utils {

    export class UtilBase {

        protected fixPath(value: string): string {
            return value.replace('/', path.sep);
        }
   }
}

Et alors

// UtilOne.ts
/// <reference path="UtilBase.ts" />

namespace My.utils {

    export class UtilOne extends My.utils.UtilBase {

    }
}

Après la compilation, j'obtiens:

src/UtilOne.ts(6,47): error TS2339: Property 'UtilBase' does not 
exist on type 'typeof utils'
typescriptnamespaceses6-modules
25
gevik

Une solution avec espaces de noms (non recommandé)

Pour résoudre votre problème, vous pouvez exporter votre espace de noms:

// UtilBase.ts
import * as path from "path";
export namespace My.utils {
    export class UtilBase {
        protected fixPath(value: string): string {
            return value.replace('/', path.sep);
        }
   }
}

Ensuite, vous devriez pouvoir l'importer:

// UtilOne.ts
import {My} from './UtilBase';
namespace My.utils {
    export class UtilOne extends My.utils.UtilBase {
    }
}

Cependant, si le but est d'organiser le code, c'est une mauvaise pratique d'utiliser les espaces de noms et (ES6) modules en même temps. Avec Node.js, vos fichiers sont des modules, alors vous devez éviter les espaces de noms.

Utiliser les modules ES6 sans espaces de noms

TypeScript supporte très bien la syntaxe des modules ES6:

// UtilBase.ts
import * as path from "path";
export default class UtilBase {
    protected fixPath(value: string): string {
        return value.replace('/', path.sep);
    }
}

// UtilOne.ts
import UtilBase from './UtilBase';
export default class UtilOne extends UtilBase {
}

C'est la voie recommandée. Les modules ES6 empêchent les conflits de noms avec la possibilité de renommer chaque ressource importée.

Cela fonctionnera sur Node.js (en utilisant la syntaxe du module commonjs dans les options du compilateur).

Pour une bonne introduction à la syntaxe des modules ES6, lire cet article .

Utilisez un fichier tsconfig.json au lieu de /// <reference

Remarque: la syntaxe /// <reference est remplacé par le fichier tsconfig.json . Un exemple pour Node.js:

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": [
    "node_modules"
  ]
}
21
Paleo