If you are having trouble and have no knowledge about “Import a Type from Another file using TypeScript”, take a look at our instructions below to get the answer.
Essential Condition To Using Import
The file used to import must have “export” command.
The calling-import file must have ‘’import’’ command.
Some Methods To Import a Type from Another file using TypeScript
Method 1: Import singleton export by using Type’s name
The exported file named source.ts
export type Student = {
id: number;
name: string;
subject: string;
};The imported file named destination.ts
import {Student} from './source';
const aStudent: Student = {
id: 1,
name: 'James',
subject: 'music',
};
console.log(aStudent);Result
{ id: 1, name: 'James', subject: 'music' }You can also use “import type” syntax to get the same result
import type {Student} from './source';
const aStudent: Student = {
id: 1,
name: 'James',
subject: 'music',
};
console.log(aStudent);Tips: Using “as” keyword to shorten long names of the type.
import type {Student as t} from './source';
const aStudent: t = {
id: 1,
name: 'James',
subject: 'music',
};
console.log(aStudent);Method 2: Default export to import different forms
The exported file named source.ts
type Student = {
id: number;
name: string;
subject: string;
};
export default Student;The imported file named destination.ts
import student1 from './source';
const aStudent1: student1 = {
id: 1,
name: 'James',
subject: 'music',
};
import student2 from './source';
const aStudent2: student2 = {
id: 2,
name: 'Emily',
subject: 'geography',
};
console.log(aStudent1);
console.log(aStudent2);Result:
{ id: 1, name: 'James', subject: 'music' }
{ id: 2, name: 'Emily', subject: 'geography' }Method 3: Import entire module
The exported file named source.ts
export type Student = {
id: number;
name: string;
subject: string;
};
export type Teacher = {
age: number;
name: string;
major: string;
};
The imported file named destination.ts
import * as entire from './source';
const aStudent: entire.Student = {
id: 1,
name: 'James',
subject: 'music',
};
const aTeacher: entire.Teacher = {
age: 50,
name: 'John',
major: 'physics',
};
console.log(aStudent);
console.log(aTeacher);Result:
{ id: 1, name: 'James', subject: 'music' }
{ age: 50, name: 'John', major: 'physics' }
Summary
Although there are many ways to import a Type from another file using TypeScript, we take three handy examples mainly used to work between modules. We hope you understand and implement it suitably with your problems.
Maybe you are interested:
- How to generate a tsconfig.json file
- How to run a TypeScript file from the Command line
- How to read a File’s contents in TypeScript
My name is Robert Collier. I graduated in IT at HUST university. My interest is learning programming languages; my strengths are Python, C, C++, and Machine Learning/Deep Learning/NLP. I will share all the knowledge I have through my articles. Hope you like them.
Name of the university: HUST
Major: IT
Programming Languages: Python, C, C++, Machine Learning/Deep Learning/NLP