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?

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

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

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

Answer 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

Answer 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