타입스크립트 설치
npm install typescript --save-dev
tsconfig.json
설정
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist"
},
"include": [
"src/**/*"
]
}
sourceMap
: 소스 맵 파일을 생성할지 여부를 결정합니다. 소스 맵 파일은 기존의 타입스크립트와 자바스크립트 사이의 매핑 정보를 가지고 있기에 VScode에서 디버깅이 가능해집니다.outDir
: 컴파일 후 생성되는 js파일이 어떤 폴더에 담길지 설정합니다. 만약 해당 폴더가 없으면 새로 만들어집니다.include
: 자바스크립트로 변환할 폴더를 지정합니다. 위 예시에서는 src 폴더 하위의 모든 파일을 자바스크립트로 변환하도록 설정되어 있습니다. 혹은 files
옵션을 사용하여 어떤 파일을 변환할지 직접 지정할 수 있습니다.exclude
: 변환하지 않을 폴더를 지정합니다. 설정하지 않으면 자동으로 node_modules
같은 폴더를 제외합니다.타입스크립트는 자바스크립트와 거의 동일한 타입을 제공합니다.
Boolean, Number, String, Array, Tuple, Object, Any 등이 있습니다.
:
기호와 함께 타입을 병기합니다.```jsx
let isOpened: boolean = false;
let count: number = 1;
```
```jsx
// 1: 타입명[]으로 선언하는 방식
const items: string[] = ["box", "gun", "paper"];
// 2: Array<타입명>으로 선언하는 방식 (이를 제네릭 배열 타입이라 함)
const items: Array<string> = ["box", "gun", "paper"];
```
any
로 지정되기 때문에 타입 안정성이 보장되지 않습니다.```jsx
const user: object = {};
const user: {name: string, age: number} = {
name: "kimcoding",
age: 20
};
```
undefined
가 반환됩니다.```jsx
// 최초에 Number 타입을 할당
let something: any = 0;
// Boolean 타입을 재할당했으나 정상적으로 동작
something = false;
// undefined 반환
console.log(something.length); // undefined
```
```jsx
const food: [string, number, boolean] = ["soup", 8000, true];
```