web-dev-qa-db-fra.com

Interface d'importation dans Angular 2

Dans une application Meteor utilisant Angular 2, je souhaite créer un type de données personnalisé, similaire à ceci:

interface MyCustomType {
  index: number;
  value: string;
}

Je veux ensuite utiliser ce type personnalisé dans plusieurs fichiers. J'ai essayé de créer un fichier séparé nommé "mycustom.type.ts", avec le contenu suivant:

export interface MyCustomType {
  index: number;
  value: string;
}

Je tente ensuite d'importer ce type afin qu'il puisse être utilisé dans un autre fichier:

import MyCustomType from "./mycustom.type"

Cependant, Atom signale l'erreur suivante:

TS Error File '/.../mycustom.type.ts' is not a module ...

Comment devrais-je déclarer et importer des types afin qu'ils puissent être utilisés à plusieurs endroits?

angulartypescriptinterface
11
James Newton

Vous devriez plutôt l'importer comme ça: 

import { MyCustomType } from './mycustom.type';

n'oubliez pas les { et }.

19
maxime1992

J'ajoute cette réponse car celle acceptée est incomplète. Vous avez deux problèmes:

Premièrement, vous devez ajouter export à votre interface afin de pouvoir import sous forme de module:

export interface MyCustomType { index: number; value: string; }

Deuxièmement, vous devez ajouter les accolades { } à la déclaration d'importation:

import { MyCustomType } from './mycustom.type';

11
edzillion

le problème est le chemin dans lequel vous vous trouvez dans le composant essayez de modifier ./ avec ../

2
Luis Figueredo

J'ai essayé toutes les principales réponses mais je reçois toujours la même erreur, alors je comprends de plus @edzillion nombre de problèmes Un problème peut être lié à cette erreur.

Premièrement, vous devez ajouter une exportation à votre interface pour pouvoir importer en module:

Deuxièmement, vous devez ajouter les accolades {} à la déclaration d'importation:

Troisième: le nom de votre interface doit correspondre à votre nom de fichier (le fichier dans lequel cette interface existe).

1
Aref Zamani

Je pense que le problème est dans le chemin:

Veuillez vous référer ci-dessous exemple:

Si votre fichier se trouve dans un autre dossier, reportez-vous ci-dessous:

import { IPosts } from "../interfaces/iposts.type";

iposts.type.ts: 

export interface IPosts {
   userId: number;
   id: number;
   title: string;
   body: string;
}
0
sushil kumar