How to declare and import typescript interfaces in a separate file
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;
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.
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)
};
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
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