CODEWITHSUNDEEP
angulartypescriptinterface
James Newton
James Newton

Reputation: 7092

Import interface in Angular 2

In a Meteor app that uses Angular 2, I want to create a custom data type, something like this:

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

I then want to use this custom type in multiple files. I've tried creating a separate file named "mycustom.type.ts", with the following content:

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

I then attempt to import this type so that it can be used in another file:

import MyCustomType from "./mycustom.type"

However, Atom reports the following error:

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

How should I be declaring and importing types, so that they can be used in multiple places?

Upvotes: 19

Views: 44944

Answers (5)

Aref Zamani
Aref Zamani

Reputation: 2062

I tried all of top answers but still i get the same error then I understand moreover @edzillion issues one issue can be raise this error .

One, you need to add export to your interface so that you can import it as a module:

Second you need to add the curly brackets { } to the import statement:

Third: your interface name must be match your file name(file that interface exist in it).

Upvotes: 1

sushil kumar
sushil kumar

Reputation: 31

I think, problem is in the path:

Kindly refer below example:

If your file in another folder then refer below:

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

iposts.type.ts : 

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

Upvotes: 0

edzillion
edzillion

Reputation: 3661

I am adding this answer because the accepted one is incomplete. You have two issues:

One, you need to add export to your interface so that you can import it as a module:

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

Second you need to add the curly brackets { } to the import statement:

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

Upvotes: 18

Luis Figueredo
Luis Figueredo

Reputation: 21

the problem is the path you are inside the component try change ./ with ../

Upvotes: 2

maxime1992
maxime1992

Reputation: 23803

You should rather import it like that : 

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

don't forget the { and }.

Upvotes: 27

Related Questions