[Typescript] type import export & namespace

type import export

a.ts 파일에 있는 것을 b.ts에서 쓰고싶다면 다음과 같이 코드를 작성할 수 있다.

(a.ts)

export type Name = string | boolean;
export type Age = (a :number) => number;

(b.ts)

import {Name, Age} from './a'
let 이름 :Name = 'kim';
let 함수 :Age = (a) => { return a + 10 }

 

namespace

과거에는 자바스크립트의 import export 문법이 없었다

그래서 <script src="~~~"> 코드를 써서 다른 파일들을 일종의 첨부처럼 했는데

이러면 파일이 많아질 수록 변수명이 겹치는 위험이 발생할 수 있었다.

그래서 외부파일에서 사용하지 않을 변수들은 함수로 감쌌었는데, 타입변수들은 namespace 문법으로 숨겼다.

(a.ts)

namespace MyNamespace {
  export interface PersonInterface { age : number };
  export type NameType = number | string;
}

위와같이 MyNamespace 라는 namespace 를 만들어서 타입정의들을 그 안에 작성해준다.

 

(b.ts)

/// <reference path="./a.ts" />

let 이름 :MyNamespace.NameType = '민수';
let 나이 :MyNamespace.PersonInterface = { age : 10 };

type NameType = boolean; //사용 가능
interface PersonInterface {} //사용 가능

만약 b 파일에서 a 파일의 namespace 에 있던 타입변수를 쓰고 싶다면

<reference/> 태그를 작성한 후, 네임스페이스명.타입명 이런식으로 작성해주면 가져다 쓸 수 있다.

이렇게 . 을 찍어서 사용해야하기 때문에 다른 변수명을 오염시키지 않는다.

 

사실 자바스크립트 es6 버전이 나온 후로 import as 라는 키워드가 생겼기 때문에

namespace 처럼 변수명 중복 문제를 해결할 수 있어서 namespace 를 많이 쓰지는 않는다고 한다.

(나도 개발할때 namespace 보단 import as 문법을 많이 쓴 것 같다)

 

응용 예제

(a.ts)

export type Car = {
  wheel : number,
  model : string
}
export interface Bike {
  wheel : 2,
  model : string
}

a.ts 파일에는 타입만 담아두고, 아래의 index.ts 에서 타입들을 import 해와서 사용할 수 있겠다.

(index.ts)

import {Car, Bike} from './a'

let 빠방이 :Car = { wheel : 4, model : 'Sonata' }

 

---

ref: 코딩애플