타입스크립트(1): 프로젝트 만들기

리린·2021년 8월 28일
0

타입스크립트

목록 보기
1/7

패키지 설치하기: 프로젝트 생성자 관점

  1. 프로젝트 생성자 관점에서 설치한다는 것
  • 다른 개발자에게는 타입스크립트 등이 안 깔려 있을 수 있음을 유의
  1. 패키지 설치 명령 옵션
  • --save : 프로젝트 실행시 필요 . 패키지 정보가 package.json 파일의 dependencies에 등록됨. 단축명령 -S
  • --save-dev: 프로젝트 개발시 필요 . 패키지 정보가 package.json 파일의 devDependencies에 등록됨. 단축명령 -D

tsc hello.ts: 타입스크립트 초기 파일 생성

npm init --y: package.json 생성

  1. 터미널에 다음과 같은 명령어 입력
npm init --y
  1. 효과
  • pacakge.json 파일이 생성된다.

npm i -D typescript ts-node:타입스크립트 프로젝트 패키지

  1. typescrpt
  • 타입스크립트 컴파일러.
  • 환경: nope.js 환경에서만 동작
  • 옵션: -D 옵션으로 설치( 프로젝트 개발시만 필요하니)
  • 실행: 터미널에 다음과 같이 입력
tsc hello.ts
  • 효과: hello.js 파일이 생성되며, node로 이를 실행할 수 있다.
  1. ts-node
  • 실행까지 해준다
  • 실행 : 터미널에 다음과 같이 입력
ts-node hello.ts

npm i -D @types/node: 노드의 타입스크립트형 라이브러리

  1. 타입스크립트형 라이브러리
  • 특징: 자바스크립트로 개발된 라이브러리들은 @types/chance, @types/ramda 와 같은 타입 라이브러리를 제공해야 한다
  • index.d.ts : @types/가 앞에 붙는 라이브러리는 항상 index.d.ts 라는 이름의 파일을 가지고 있음

2, 실행 효과

  • Promise 등의 타입을 사용할 수 있다.

패키지 설치하기: 프로젝트 이용자 관점

  1. 프로젝트 이용자 관점에서 설치한다는 것
  • 다른 개발자에게는 타입스크립트 등이 안 깔려 있을 수 있음을 유의
  1. 패키지 설치 명령 옵션
  • --save : 프로젝트 실행시 필요 . 패키지 정보가 package.json 파일의 dependencies에 등록됨. 단축명령 -S

tsc --init: tsconfig.json파일 생성

  1. 기본생성
(대부분 주석처리되어있음)
  1. 프로젝트에 필요한 옵션만 설정하기
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es2015",      
    "moduleResolution": "node",      
    "outDir": "dist",
    "baseUrl": ".",
    "sourceMap": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "paths": { "*": ["node_modules/*"] }
  },
  "include": ["src/**/*"]
}
  1. 분석
  • compilerOptions옵션
"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디렉터리와 소스 파일 만들기

  1. 디렉터리 생성 명령어
mkdir -p src/utils    --- src/utils 디렉터리를 생성한다 
  1. 폴더 생성 명령어
touch src/index.ts src/utils/makePerson.ts
  1. 파일 생성
    (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 수정

  1. 다음과 같이 수정
{
  "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"
  }
}
  1. npm dev : index.ts 파일을 실행한다

  2. npm run build : dist파일에 자바스크립트 파일 생성하고 실행한다

profile
개발자지망생

0개의 댓글