[Type Script 101] 타입스크립트 기초 - 설치, 타입의 종류, 타입 지정, 컴파일

타입스크립트 설치

npm install typescript -g
tsc --version

brew install typescript
tsc --version

타입스크립트 기본 사용 방법

1. 타입의 종류 및 지정 방법

타입의 종류

1. number
2. string
3. boolean
4. null
5. undefined
6. any

타입 지정 방법

/* index.ts */

// 1. 변수의 타입을 지정한다
let a:number = 3
a = 'a is number'

// 2. number 혹은 string 처럼 두가지 타입을 지정한다.
let b:number | string = 3
console.log(b) // c
b = 'b is string'
console.log(b) // b is string

// 3. 배열을 선언한다.
let arrStr:string[] = ['first_string', 'second_string']
let arrNum:number[] = [2,5,1,3,7]

// 4. 함수를 선언한다.
function addNumber(a,b){
    return a+b
}
// → number 타입 a와 b를 받아서 결과로 number를 리턴한다.
function addNumberType(a:number, b:number):number{
    return a+b
}

addNumberType(3,7)

2. node 환경에서 타입스크립트 실행하기

node 는 자바스크립트만 이해 가능. 타입스크립트는 이해 불가능하다.

따라서 node 환경에서 타입스크립트를 실행하기 위해선 다음과 같은 방법이 필요하다.

타입스크립트 *.ts 파일을 *.js 파일로 컴파일 하기

tsc 파일명.ts

실행한 모습

https://velog.io/@dmilly2021/간단한-typescript-콘솔-찍어보기

타입스크립트 컴파일 설정

1. tsconfig.json

*.ts 파일을 *.js 파일로 컴파일 하는 옵션을 설정한다. ES5, ES6 어느 것을 할 지 등

compilerOptions

• outDir : 컴파일된 자바스크립트 파일의 저장 경로, 별도 지정하지 않을 경우 타입스크립트 파일과 동일한 경로에 저장된다.
• target : es5, es6 와 같은 자바스크립트 버전을 지정해준다.

{
    "compilerOptions": {
        "outDir" : "dist",
        "target" : "es6",
        "module" : "commonjs",
        "sourceMap" : true
    },
}

2. tsconfig.json 으로 컴파일 하기

mac os + vscode 환경

1. cmd + shift + B
2. tsconfig.json 으로 build 하기
   

   

   빌드 작업을 실행한다. 다른 프로젝트도 작업 중이라 여러개가 뜨는데 tsc 빌드를 선택한다.

tsconfig.json에서 지정한 경로에 컴파일 되어 자바스크립트 파일이 존재하는 것을 확인 할 수 있다.