Import interface in Angular 2

Question

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?

Answer 1

You should rather import it like that :

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

don't forget the { and }.

Answer 2

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';

Answer 3

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

Answer 4

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).

Answer 5

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;
}