[TypeScript] 타입과 변수 import export namespace 하는 방법

⚡️import export 하는 방법

만든 타입변수를 다른 파일에서 사용하고 싶은 경우 자바스크립트 import export 문법 그대로 사용가능합니다.

post.ts -> get.ts 이렇게 변수나 함수를 가져다쓰고 싶은 경우

(post.ts)

export var 이름 = 'kim';
export var 나이 = 30;

(get.ts)

import {이름, 나이} from './post'
console.log(이름)

 1. 우선 변수를 다른 파일에서 쓰이게 내보내고 싶으면 export 문법으로 내보내야하고

2. export된 변수를 가져와서 쓰고 싶으면 import 문법으로 가져와야합니다.   

export 하고 싶으면 변수나 함수 정의부분 왼쪽에 export 키워드 붙이면 되고 

import 하고 싶으면 import {변수명} from 파일경로 이렇게 쓰면 됩니다.

( 경로는 ./ 부터 시작해야합니다 현재경로라는 뜻이고 ts 파일 확장자는 안붙여야합니다. )

import * from './post';
console.log(이름);
console.log(나이);

 

변수명 쓰기 귀찮으면 import * 하셔도 됩니다. 그 파일에서 export된 변수를 전부 import 해오는 문법입니다. 

---

⚡️타입을 import export 하는 방법

post.ts -> get.ts 이렇게 정의된 타입을 가져다 쓰고 싶은 경우 

(post.ts)

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

(get.ts)

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

타입도 똑같이 사용하면 됩니다. 

⚡️ 과거엔 namespace와 module 키워드를 사용

1. 타입스크립트 1.5 버전 이하였나 그 때는 자바스크립트 import / export 문법이 없었습니다.

2. 그냥 <script src=""> 이걸 여러개 써서 파일들을 첨부해서 사용했습니다.

3. 그 문법의 문제는 파일이 많아질 수록 변수명이 겹치는 위험이 발생한다는 점입니다. 

4. 그래서 외부 파일에서 사용하지 않을 변수들은 함수로 감싸고 타입변수들은 namespace 문법으로 숨겼습니다. 

(post.ts)

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

중요한 타입정의들을 다른 파일들에서 쓰고 싶으면 안전하게 namespace 안에 써서 export 해줬습니다. 

(get.ts)

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

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

1. ts 파일은 이상한 <reference/> 라는 태그를 이용해서 다른 파일을 import 하면 그 파일에 있던 namespace를 사용가능합니다.

2. 네임스페이스명.타입명 

이렇게 쓰면 다른 파일에 있던 타입변수를 자유롭게 쓸 수 있습니다. 

(get.ts)

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

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

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

1. 점찍어서 써야하기 때문에 다른 변수명을 오염시키지 않아서 

    변수명 중복선언문제를 방지할 수 있어서 유용합니다. 

2. 자바스크립트 es6 버전이 나온 이후로 import as 키워드로 나름 namespace 와 유사하게 중복문제를 해결가능해서 

namespace는 그렇게 많이 쓰이진 않습니다.

 

(참고) 옛날 옛적엔 module 키워드를 썼었는데 갑자기 namespace 키워드로 바뀌었습니다. 참고로 알아둡시다.