Typescript 기초 학습 10.기초문법8_모듈화(인프런_Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

 

인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다.

코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)

 

타입스크립트에 익숙하지않다면 자바스크립트로 먼저 코드를 작성하고 그 후에 타입스크립트로 변환하도록하자.

 

타입스크립트 (Typescript)

 

타입스크립트의 모듈 시스템은 자바스크립트의 최신문법을 개승했기 때문에

common.js를 쓰던 노드js의 방식과는 다르다.

common.js와 ES2015의 차이를 이해해야한다.

 

export default

자바스크립트에서는 exports와 module.exports가 같기 때문에 exports가 중복되면 값을 덮어쓰게된다. 

 

const hello = 'module';

exports.a = 'a';
exports.b = 'b';

module.exports = function(){

}

이런 문제를 극복하고자 ES2015에서는 export default를 도입했다.

export와 export default는 서로 다른 것이기 때문에 덮어씨여지지않는다.

// module.js
const hello = 'module';

// 선언을 먼저하고 아래에서 export해도된다.
const b = 'b';

// 바로 선언하면서 export해도 된다.
export const a = 'a';
export{b};

// 다른 js파일에서 가져다 쓸 수 있다.
import {a, b} from './module';

 

착각할 수 있는 부분은 export default와 module.exports가 같다고 생각하는 것이다. 

두개는 다른것이다.

그래서 타입스크립트에서 모듈을 처리할때에 module.exports로된 모듈이라면 아래와 같이 문법적으로 * as를 사용해서 가져와야한다.

// module.js
module.exports = function(){
	//....
}

// import하는 js
import * as hi from './module';

* as가 없을 경우 module.exports를 통해 가져오는 것이기 때문에 문법에 맞춰 * as를 추가해준다.

만약에 * as없이 module.exports와 export default를 같이 import하고 싶다면 tsconfig에 esModuleInterop을 true로 추가해주면된다. 하지만 비추하며 문법에 맞춰 사용한다.

 

 

ts 모듈 시스템 주의사항

타입 정의용 코드 (인터페이스, 클래스 등) 들은 모듈로 분리하는 경우가 많다.

타입선언이나 로직을 재사용할 수 있기 때문이다.

또는 타입선언과 로직을 구분하기 위해 분리를 하기도 한다.

꼭 분리를 해야하는 것은 아니다. 파일내에서 export 키워드만 추가해도 모듈로서 사용할 수가 있는데,

export interface Test{
    //...
}

스크립트 파일과 모듈을 구분할 수 있어야하기에 구분하는것이 좋다.

import와 export가 들어가면 모듈이 되며 그렇지 않다면 스크립트라고 할 수 있다.

 

타입스크립트에서는 common.js에 해당하는 파일을 import하려고 할때 .ts파일이나 .dts파일을 만들어서 선언파일을 만들어 준다.

// common.js
module.exports = function(){
    //...
}

// common.ts나 common.dts 파일을 생성한다.
declare function a(){}
export = a;

// import하는법
import A = require('./common');

// 또는 위에서 말한 * as를 사용
import * as A from './common';

* as는 그 파일안에 있는 모든 것을 가져오는 것을 의미한다.

.ts는 보통 내 프로젝트가 라이브러리일때 사용한다고 한다.