02-1 타입스크립트 프로젝트 만들기
타입스크립트 개발은 Node.js 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 정하는 방식으로 진행
프로젝트 초기화
# node 프로젝트 생성
mkdir ch02-1
cd ch02-1
npm init --y
# tsc, ts-node 설치
npm i -D typescript ts-node
# @types/node 설치
npm i -D @types/node
# tsconfig.json 파일 생성
tsc --init// tsconfig.json 수정
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es5",
"moduleResolution": "node",
"outDir": "dist",
"baseUrl": ".",
"sourceMap": true,
"downlevelIteration": true,
"noImplicitAny": false,
"paths": { "*": ["node_modules/*"] }
},
"include": ["src/**/*"]
}src 디렉터리와 소스 파일 만들기
mkdir -p src/utils
touch src/index.ts src/utils/makePerson.tsindex.ts / makePerson.ts 작성
makePerson.ts
export function makePerson(name: string, age: number) {
return { name: name, age: age };
}
export function testMakePerson() {
console.log(makePerson("Jane", 27), makePerson("Jack", 33));
}index.ts
import { testMakePerson } from "./utils/makePerson";
testMakePerson();
package.json 수정
"main": "src/index.js",
"scripts": {
"dev": "ts-node src",
"build": "tsc &&node dist"
},02-2 모듈 이해하기
index.ts와 같은 소스 파일을 모듈이라고 한다
모듈화: 소스파일 하나로 구현해도 되지만, 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할한다
export / import 를 활용해 모듈 간 통신
src/index.ts
let MAX_AGE = 100;
interface IPerson {
name: string;
age: number;
}
class Person implements IPerson {
constructor(public name: string, public age: number) {}
}
function makeRandomNumber(max: number = MAX_AGE): number {
return Math.ceil(Math.random() * max);
}
const makePerson = (name: string, age: number = makeRandomNumber()) => ({
name,
age,
});
const testMakePerson = (): void => {
let jane: IPerson = makePerson("Jane");
let jack: IPerson = makePerson("Jack");
console.log(jane, jack);
};
testMakePerson();index.ts 파일의 모듈화
src/person/Person.ts
let MAX_AGE = 100;
interface IPerson {
name: string;
age: number;
}
class Person implements IPerson {
constructor(public name: string, public age: number) {}
}
function makeRandomNumber(max: number = MAX_AGE): number {
return Math.ceil(Math.random() * max);
}
const makePerson = (name: string, age: number = makeRandomNumber()) => ({
name,
age,
});src/index.ts
const testMakePerson = (): void => {
let jane: IPerson = makePerson("Jane");
let jack: IPerson = makePerson("Jack");
console.log(jane, jack);
};
testMakePerson();export 키워드
Person.ts 파일에 선언한 IPerson과 makePerson이란 심벌의 의미를 index.ts에 전달해야 함
export는 function, class, interface, type, let, const 키워드 앞에 붙일 수 있다
src/person/Person.ts
let MAX_AGE = 100;
export interface IPerson {
name: string;
age: number;
}
class Person implements IPerson {
constructor(public name: string, public age: number) {}
}
export function makeRandomNumber(max: number = MAX_AGE): number {
return Math.ceil(Math.random() * max);
}
const makePerson = (name: string, age: number = makeRandomNumber()) => ({
name,
age,
});import 키워드
다른 파일에서 export한 심벌을 받아서 사용하려면 import 키워드로 해당 심벌을 불러온다
import { 심벌 목록 } from '파일의 상대 경로'
src/index.ts
import {IPerson, makePerson} from './person/Person'
const testMakePerson = (): void => {
let jane: IPerson = makePerson("Jane");
let jack: IPerson = makePerson("Jack");
console.log(jane, jack);
};
testMakePerson();import * as 구문
대상 파일에서 export되는 모든 심벌들을 참조하기 위해 사용되는 구문
import * as 심벌 from '파일의 상대 경로'
src/utils/makeRandomNumber.ts
let MAX_AGE = 100;
export function makeRandomNumber(max: number = MAX_AGE): number {
return Math.ceil(Math.random() * max);
}src/person/Person.ts
import * as U from './utils/makeRandomNumber'
export interface IPerson {
name: string;
age: number;
}
class Person implements IPerson {
constructor(public name: string, public age: number) {}
}
const makePerson = (name: string, age: number = U.makeRandomNumber()) => ({
name,
age,
});export default 키워드
export defualt 키워드는 한 모듈이 내보내는 기능 중 오직 한 개에만 붙일 수 있고 다른 파일에서 import 시 중괄호를 생략 가능하다
src/person/IPerson.ts
export default interface IPerson {
name: string;
age: number;
}src/person/Person.ts
import * as U from './utils/makeRandomNumber'
import IPerson from './IPerson'
export default class Person implements IPerson {
constructor(public name: string, public age: number) {}
}
const makePerson = (name: string, age: number = U.makeRandomNumber()) => ({
name,
age,
});src/index.ts
import IPerson from './person/IPerson'
import Person, {makePerson} from './person/Person'
const testMakePerson = (): void => {
let jane: IPerson = makePerson("Jane");
let jack: IPerson = makePerson("Jack");
console.log(jane, jack);
};
testMakePerson();외부 패키지를 사용할 때 import 문
우선 chance와 ramda라는 패키지를 설치한다
npm i -S chance ramda
npm i -D @types/chance @types/ramdasrc/index.ts
import IPerson from "./person/Person";
import Person, { makePerson } from "./person/Person";
import Chance from "chance";
import * as R from "ramda";
const chance = new Chance();
let persons: IPerson[] = R.range(0, 2).map(
(n: number) => new Person(chance.name(), chance.age())
);
console.log(persons);02-3 tsconfig.json 파일 살펴보기
compilerOptions: tsc 명령 형식의 옵션
include: 컴파일 대상 파일 목록
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es5",
"moduleResolution": "node",
"outDir": "dist",
"baseUrl": ".",
"sourceMap": true,
"downlevelIteration": true,
"noImplicitAny": false,
"paths": { "*": ["node_modules/*"] }
},
"include": ["src/**/*"]
}"include": ["src/**/*"]: src 디렉터리는 물론 src 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미
module 키
TS 소스코드가 컴파일되어 만들어진 ES5 소스코드는 웹 브라우저와 Node.js 양쪽 환경에서 모두 동작해야하나 두 환경은 물리적으로 동작하는 방식이 다름
- 웹 브라우저: AMD(Asynchronous Module Definition) 방식
- Node.js: CommonJS 방식
module 키는 대상 플랫폼이 무엇인지 구분해 그에 맞는 모듈 방식으로 컴파일하려는 목적으로 설정
// 웹 브라우저
"module": "amd"
// Node.js
"module": "commonjs"moduleResolution 키
module 키의 값에 따라 설정
// 웹 브라우저
"module": "amd",
"moduleResolution": "classic",
// Node.js
"module": "commonjs"
"moduleResolution": "node",target 키
트랜스파일할 대상 자바스크립트의 버전 설정
대부분 es5 / 최신 버전의 Node.js를 사용한다면 es6도 가능
baseUrl / outDir 키
트랜스파일된 ES5 JS 파일을 저장하는 디렉터리를 설정
paths 키
소스 파일의 import 문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정
외부 패키지를 사용하므로 node_modules/* 도 포함
esModuleInterop 키
오픈소스 자바스크립트 라이브러리 중에는 웹 브라우저에서 동작한다는 가정으로 만들어 진 것들이 있다(위 소스에선 chance 라이브러리)
이들은 CommonJS 방식으로 동작하는 TS 코드에 혼란을 줄 수 있으므로 이를 정상적으로 동작하게 하기 위해 true로 설정
sourceMap 키
sourceMap 키값이 true이면 트랜스파일 디렉터리는 .js 파일 이외에도 .js.map파일이 만들어져 디버깅 시 변환된 JS 코드가 TS 코드의 어디에 해당하는지 알려준다
downlevelIteration 키
생성기(generator) 구문이 정상적으로 동작하게 하기 위해 true로 설정
nolmplicitAny 키
TS 컴파일러는 기본적으로 f(a, b) 처럼 매개변수에 타입을 명시하지 않을 경우 f(a: any, b: any) 처럼 암시적으로 any 타입을 설정한 것으로 간주한다
하지만 이는 TS의 언어적 장점을 이용하지 않는 것이므로 경고 메시지를 띄운다
noImplicitAny 키값을 false로 설정하면 경고 메시지를 띄우지 않는다
출처: 전예홍 저, 『Do it! 타입스크립트 프로그래밍』, 이지스퍼블리싱(2020)
