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?
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.
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 ..
.
d.ts
to my react project but I still need to import the interfaces.
export
ing 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.
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
type {
helped resolve a massive annoying issue for me. Thank you
Success story sharing