아래 정리는 노마드코더의 TypeScript 강의를 듣고 복습으로 작성한 것입니다.
TypeScript란
- TypeScript는 JavaScript를 기초로 해서 만들어졌다.
- 말랑한 언어인 JavaScript에 엄격하게 타입을 구분해서 사용하는 것이 TypeScript이다.
- TypeScript는 컴파일 되어서 JavaScript로 사용된다.
- 사소한 실수를 하더라도 TypeScript는 컴파일 과정에서 걸러지기 때문에 버그를 줄일 수 있다.
설치
- npm install typescript --save-dev (개별 프로젝트에 설치시)
- npm install g typescript (컴퓨터 전체에서 사용시)
tsconfig.json
- TypeScript가 어떻게 JavaScript로 변환될지 옵션을 설정해주는 파일이다.
- 기본 예시
{
"compilerOptions": {
"module": "commonjs",
"target": "ES2015",
"sourceMap": true,
"outDir": "dist"
},
"include": ["index.ts"],
"exclude": ["node_modules"]
}tsc
- tsc 를 터미널에 입력 후 실행하면 tsconfig.json의 설정에 따라 TypeScript 파일이 JavaScript 파일로 바뀐다.
- package.json에서 start 명령어를 node (실행할 파일경로) , prestart 명령어를 tsc 로 해놓으면 다음과 같은 순서로 실행된다.
- tsc 를 실행하여 JavaScript 파일 생성
- node 명령어로 생성된 파일 실행
Types
P.S. VS Code를 사용한다면 TS Lint 익스텐션을 설치할 것. TypeScript Error를 나타내준다.
P.S. tsc-watch 모듈을 dev모드로 설치 후, package.json의 script에서 "start": "tsc-watch --onSuccess (백슬래쉬)" node (파일경로) (백슬래쉬)" 로 지정해주면 TypeScript 파일이 업데이트 될 때마다 자동으로 tsc 후 node 명령어를 실행시켜준다.
아래는 타입을 어떻게 지정하는지 보여주는 예시 코드이다.
const sayHi = (name:string, age:number):string => "someValue";Interface
- interface 로 선언한 타입은 TypeScript의 타입 지정할 때 사용될 수 있다.
interface Human {
name: string;
age:number;
gender: string;
}
const person = {
name: "me",
age: 100,
gender: "female"
}
const sampleFunction = (person:Human) : string => "someValue";Class
- interface 는 JavaScript 코드로 컴파일 되지 않는다.
- 그런데 경우에 따라서는 이와 같은 구조가 JavaScript 코드로 컴파일 되어야 할 수 있다.
- 그럴 때는 class 를 사용한다.
class Human {
public name: string;
public age: number;
public gender: string;
constructor(name: string, age: number, gender?: string) {
this.name = name;
this.age = age;
this.gender = gender;
}
}
const me: Human = new Human("me", 100, "female");
P.S. 파일 끝에 export {}; 코드를 넣어주어야 TypeScript Error가 나지 않는다.
P.S. 변수명 뒤에 ? 를 붙여주면 함수를 호출할 때 선택적으로 기입할 수 있게 된다.
P.S. const me:Human[] 라고 적어주면 me라는 변수는 Human이란 타입 요소들의 array가 된다.
