How to declare and import typescript interfaces in a separate file

Question

I want to define several interfaces in their own file in my typescript-based project, from which I'll implement classes for production as well as mocks for testing. However, I can't figure out what the correct syntax is. I've found plenty of tutorials on declaring interfaces and implementing them, but they all have a trivial implementation of both the interface and derived classes in the same file, which isn't very real-world. What's the right way to export and import the interfaces?

Solution 1

You need to export the interface from the file in which is defined and import it wherever you want to use it.

in IfcSampleInterface.ts:

export interface IfcSampleInterface {
   key: string;
   value: string;
}

In SampleInterface.ts

import { IfcSampleInterface } from './IfcSampleInterface';
let sampleVar: IfcSampleInterface;

Solution 2

Use definition (d.ts) files and namespaces, no need to import/export modules this way. DefinitelyTyped project has guidance and huge number of examples how to do it.

Solution 3

Export only a few interfaces

Without spreading multiple exports, you can group them in one single export {} block (in this case, no file default type should be declared):

// interfaces.ts
interface IWords {
  [key: string]: string; 
}

interface INumbers {
  [key: string]: number; 
}

interface IBooleans {
  [key: string]: boolean; 
}

interface IValues {
  [key: string]: string | number; 
}

interface IStructures {
  [key: string]: INumbers | IBooleans | IValues;
}

export {
  // not exporting IWords | INumbers
  IBooleans,
  IValues,
  IStructures,
}

Import example

import { IBooleans, IValues, IStructures } from 'interfaces';

const flags: IBooleans = { read: true, write: false, delete: false };

const userFile: IValues = { user: 1, username: 'One', file: 'types.txt' };

const userContext: IStructure = {
  file: userFile,
  permissions: flags,
  counts: { views: 3, writes: 1 } // => INumbers (lint: try to remove IValues from IStructures)
};

Solution 4

You need to export the interfaces in the file the are defined in and import them in the files they are used in. See this link for examples.

x.ts

interface X{
    ...
}
export default X

y.ts

import X from "./x.ts"
// You can use X now

For more information see https://www.typescriptlang.org/docs/handbook/modules.html

Solution 5

You can use the following syntax in relatively new projects

`import type { xxx } from './xxx'`

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html

View more solutions

Comments

[snort]

This is the syntax I tried initially but I get errors with it.

[Ajay]

@snort can you please elaborate what type of error you are getting?

[snort]

It looks like the issue is that the typename can't be used as a key in Aurelia (or I just don't know how to declare it correctly). The error is "Cannot find name [BTAuthService]" This code gives the error: container.registerSingleton(BTAuthService, MockAuthService); If I assign the interface to a var first and pass that to registerSingleton, I get no error.

[snort]

I presume I'm misunderstanding something about TS/JS constructors and type names.

[snort]

Interface types are eliminated from the transpiled code, thus the error. Marking this as the correct answer to my incomplete question. The real issue was that I was trying to use the name of the interface as a type name in this specific case.

[orad]

This is the correct answer IMO. If your file defines only an interface, this is the preferred way and is much cleaner.

[jpenna]

If you have module.ts and module.d.ts in the same folder, the compiler will skip the module.d.ts file, so your declarations won't be considered. Rename the d.ts file or move it to another folder. This approach is nice if you have a proper module, but if you want to share types between modules though, better use import .. from ...

[airtonix]

how is this even an acceptable answer. You might think it leans in the right direction (and it probably does), but a generic link to a list of articles that we have to hunt through in order to find the answer Artem is alluding to is the equivalent of saying "I'm not going to explain communism, go search the internet"

[Hamid Mayeli]

I added d.ts to my react project but I still need to import the interfaces.

[gaurav5430]

So, you are suggesting to use declaration files for internally sharing types as well ? Wouldn't this make the types available globally across the whole project? Also, I have only seen usages of declaration files, when a javascript code wants to expose types for consumers, not for internal purposes.

[Oleg Valter is with Ukraine]

@gaurav5430 - thankfully they are not globally available when exporting types. There is an old issue where it seems like d.ts for type sharing is a viable option (suggested by a team member): github.com/microsoft/TypeScript/issues/10908. Found when trying to create a module that consisted of only type definitions for shared use. Using a .ts file for that results in the file being included in the output (obviously empty). That said, agreed, this is not the intended usage of declaration files.

[Ari Lacenski]

Linking to DefinitelyTyped's source is not an answer for those attempting to write their own .d.ts files for code which is not already covered in the types repository.