TypeScript 스터디 02
개발환경 구성
sudo npm install -g typescript ts-node
타입스크립트 컴파일러를 사용할 수 있습니다.
tsc --init
tsconfig.json 파일을 생성합니다.
여기에서 tsconfig 파일을 만드는 이유는 컴파일 되기 전의 ts파일과 컴파일 되고 나서의 js 파일을 구분해서 저장하기 위해서입니다.
/src 폴더와 /build 폴더를 만들어줍니다. ts 파일은 /src 폴더에, js 파일은 /build 폴더에 저장되도록 하고자 합니다.
"rootDir": "./src",
"outDir": "./build",
저장한 후, /src 폴더에서 ts 파일을 생성한 다음 터미널에서 tsc 명령어를 쳐주면, /src 폴더에 있는 ts 파일의 컴파일된 js 파일이 /build 폴더에 생성됩니다.
npm init -y
package.json 파일을 생성합니다.
npm i nodemon concurrently
nodemon과 concurrently 모듈을 설치합니다.
그리고 package.json 에서
//package.json
"scripts": {
"start:build": "tsc -w",
"start:run": "nodemon build/index.js",
"start": "concurrently npm:start:*"
},
이렇게 설정하면 npm start 명령어로 컴파일과 실행이 이루어집니다.
“tsc -w” 는 컴파일 과정을 콘솔에서 확인하겠다는 의미입니다.
//index.ts
console.log('Hello World!');
index.ts 를 저장하고 npm start 명령어를 입력하면 index.js 가 컴파일되고, 콘솔에 헬로월드가 찍히게 됩니다!
JS의 경우 – 클래스
class TodoItem {
constructor(id, task, complete) {
this.id = id;
this.task = task;
this.complete = complete;
}
printDetails() {
console.log(`${this.id}\t${this.task}\t${this.complete ? '\t(complete)': ''}`)
}
}
참고: this.complete ? '\t(complete)': ''는, this.complete 값이 true 이면 (complete) 라는 문자열을, 그렇지 않으면 빈 문자열을 반환하겠다는 것입니다.
TS의 경우 – 클래스
같은 클래스입니다.
class TodoItem {
constructor(public id: number, public task: string, public complete: boolean) {
this.id = id;
this.task = task;
this.complete = complete;
}
printDetails(): void {
console.log(`${this.id}\t${this.task}\t${this.complete ? '\t(complete)': ''}`)
}
}
export default TodoItem
public이라고 된 부분은 접근지정자라고 하는데, 이 경우 어디서나 접근 가능한 값이라고 합니다. 참고 링크
TS의 함수
함수를 정의할 때 파라미터와 리턴값에 타입을 지정합니다. (리턴값이 없으면 void 지정)
JS는 가변인자를 통한 함수 호출이 가능했지만, TS는 가변인자를 지원하지 않습니다.
대신 함수의 오버로딩을 통해 가변인자와 같은 효과를 구현할 수 있습니다.
body 가 없는 추상함수 형태의 자료형이 명시된 코드 와 any type을 받는 코드가 정의되어야 합니다.
function add(fp: string, sp: string): string
function add(fp: number, sp: number): number
function add(fp: any, sp: any): any {
console.log(fp + sp)
}
add(10, 20)
add('10', '20')