Front-end/Typesrcipt

Typescript - import & export & namespace

Cuvely 2023. 4. 18. 16:55
728x90
반응형

Typescript exrpot

typescript export 란 파일에 선언되어있는 변수 및 함수 등을 다른 파일로 내보내서 사용한다는 것이다.

// test.ts 
// export 키워드를써서 다른 파일에서 사용할 수 있도록 한다.
export var myName: string = 'zelord';
export var myAge: number = 27;

 

export 키워드를 써서 다른 파일에 사용할 수 있도록 선언한다.

export 키워드는 변수 뿐만 아니라 type 도 내보낼 수 있다.

// test.ts
export type MyName = string;	// export 키워드를 사용하여 type 도 내보낼 수 있다.

 

 

Typescript import

Typescript import란 다른 파일에서 export 키워드를 사용한 변수 및 함수를 받아와서 사용할 수있다.

// index.ts
// import { 변수명 } from '파일경로'
import { myName, myAge } from './test' // import 키워드를 써서 불러온다.

console.log(myName); // test.ts 에 불러온 변수를 사용할 수 있다.
console.log(myAge);

import 키워드를 사용해서 test.ts에 export 키워드로 사용된 변수명을 가져와 {}사이에 넣고  from 뒤에 경로를 붙여 불러와서 사용할 수 있다.

 

 

 

반응형

 

 

 

Typescript namespace

Typescript namespace 란 논리적으로 연관된 코드를 묶는 방법이다. 여러파일에 걸쳐 하나의 namespace공유한다.

namespace myNamespace {	// namespace 를 사용하여 타입을 선언할 수 있다.
    export type MyName = string | number;
}

let word: myNamespace.MyName	// namespace 를 활용하여 꺼내 사용할 수 있다.

namespace myNamespace2 {
    export type MyName = string | number;	// 중복된 type명을 써도 사용이 가능하다.
}

 

728x90
반응형