패키지 설치하기: 프로젝트 생성자 관점
- 프로젝트 생성자 관점에서 설치한다는 것
- 다른 개발자에게는 타입스크립트 등이 안 깔려 있을 수 있음을 유의
- 패키지 설치 명령 옵션
- --save : 프로젝트 실행시 필요 . 패키지 정보가 package.json 파일의 dependencies에 등록됨. 단축명령 -S
- --save-dev: 프로젝트 개발시 필요 . 패키지 정보가 package.json 파일의 devDependencies에 등록됨. 단축명령 -D
tsc hello.ts: 타입스크립트 초기 파일 생성
npm init --y: package.json 생성
- 터미널에 다음과 같은 명령어 입력
npm init --y
- 효과
npm i -D typescript ts-node:타입스크립트 프로젝트 패키지
- typescrpt
- 타입스크립트 컴파일러.
- 환경: nope.js 환경에서만 동작
- 옵션: -D 옵션으로 설치( 프로젝트 개발시만 필요하니)
- 실행: 터미널에 다음과 같이 입력
tsc hello.ts
- 효과: hello.js 파일이 생성되며, node로 이를 실행할 수 있다.
- ts-node
- 실행까지 해준다
- 실행 : 터미널에 다음과 같이 입력
ts-node hello.ts
npm i -D @types/node: 노드의 타입스크립트형 라이브러리
- 타입스크립트형 라이브러리
- 특징: 자바스크립트로 개발된 라이브러리들은 @types/chance, @types/ramda 와 같은 타입 라이브러리를 제공해야 한다
- index.d.ts : @types/가 앞에 붙는 라이브러리는 항상 index.d.ts 라는 이름의 파일을 가지고 있음
2, 실행 효과
패키지 설치하기: 프로젝트 이용자 관점
- 프로젝트 이용자 관점에서 설치한다는 것
- 다른 개발자에게는 타입스크립트 등이 안 깔려 있을 수 있음을 유의
- 패키지 설치 명령 옵션
- --save : 프로젝트 실행시 필요 . 패키지 정보가 package.json 파일의 dependencies에 등록됨. 단축명령 -S
tsc --init: tsconfig.json파일 생성
- 기본생성
(대부분 주석처리되어있음)
- 프로젝트에 필요한 옵션만 설정하기
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es2015",
"moduleResolution": "node",
"outDir": "dist",
"baseUrl": ".",
"sourceMap": true,
"downlevelIteration": true,
"noImplicitAny": false,
"paths": { "*": ["node_modules/*"] }
},
"include": ["src/**/*"]
}
- 분석
"compilerOptions":
- include: 대상 파일 목록
- ["src/*/"] : src 디렉터리와 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함
"include": ["src/**/*"]
- modules 키: 동작 타입 설정. 웹 브라우저면 amd 옵션, 노드js면 commonjs 옵션.
"module": "commonjs",
- moduleResolution 키: module 키값이 amd 면 classic, commonjs 면 node.
"moduleResolution": "node",
- target 키: 트랜스파일링할 대상 자바스크립트 버젼. 대부분 es2015설정하며 최신 버전의 node.js는 es6설정 가능
"target": "es2015",
- baseUrl 과 outDir 키: 트랜스파일된 자바스크립트 파일을 저장하는 디렉터리를 설정. tsc는 tsconfig.json 파일이 있는 디렉터리에서 실행되므로, baseUrl는 대개 현재 디렉터리를 의미하는 '.' 로 baseUrl 키값을 설정한다.
OutDir 키는 baseUrl설정값 기준으로 하위 디렉터리의 이름이다.
"outDir": "dist",
"baseUrl": ".",
- path 키: import 문에서 from 부분을 해석할 때 찾아야 하는 디렉터리 설정
paths": { "*": ["node_modules/*"] }
- esModuleInterop 키: 웹브라우저에서 동작한다는 가정으로 만들어진 라이브러리들이 commonJS 방식으로 동작하는 타입스크립트에서도 동작하게 하기 위해 반드시 true로 설정해 줘야 한다
"esModuleInterop": true,
- sourceMap 키: true로 설정하면 .js 파일 이외에도 .js.map 파일이 만들어진다. 이는 변환된 자바스크립트 코드가 타입스크립트 코드 어디에 해당하는지 알려준다(주로 디버깅 때 사용)
"sourceMap": true,
- downlevelIteration 키: generator(생성기) 함수가 정상적으로 동작하려면 true로 설정 필수.
"downlevelIteration": true,
- nolmplicitAny 키: 기본 타입은 any로 설정되나, 오류 메시지가 개발자를 혼란스럽게 할 수 있으므로 false로 설정한다
src디렉터리와 소스 파일 만들기
- 디렉터리 생성 명령어
mkdir -p src/utils --- src/utils 디렉터리를 생성한다
- 폴더 생성 명령어
touch src/index.ts src/utils/makePerson.ts
- 파일 생성
(src/utils/makePerson.ts)
export function makePerson(name: string, age: number) {
return { name: name, age: age }
}
export function testMakePerson() {
console.log(makePerson('Jane', 22), makePerson('Jack', 33))
}
(src/index.ts)
import {testMakePerson} from './utils/makePerson'
testMakePerson()
dev와 build 명령어 추가: package.json 수정
- 다음과 같이 수정
{
"name": "02-1",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"dev": "ts-node src",
"build": "tsc && node dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^15.3.0",
"ts-node": "^9.1.1",
"typescript": "^4.2.4"
}
}
-
npm dev : index.ts 파일을 실행한다
-
npm run build : dist파일에 자바스크립트 파일 생성하고 실행한다