[Typescript] Typescrip를 사용하는 방법 (1) 기초편

 

 

 

타입스크립트는 자바스크립트에 추가적인 구문을 추가하여 editor(ex. vscdoe) 와의 단단한 통합을 지원합니다. 따라서 이를 통해 editor에서 초기에 오류를 잡을 수 있습니다. 

 

타입스크립트는 자바스크립트를 이해하고 타입 추론을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다. 

 

 

const player = {
	age: 12
}


player.age = false

타입스크립트에서 이런식으로 코드를 작성하면 바로 실행되기전에 player.age에 빨간 밑줄이 생긴다.

왜냐하면 타입스크립트는 타입 추론으로 age를 number로 인식하는데 갑자기 boolean을 할당하려고하니 타입이 다르다고 경고해주는 것이다.

 

 

let a = "hello"
a = "bye"
a = 1

이와같이 첫 번째 a = "bye"는 정상적인 할당이다 하지만 두 번째인 a = 1은 불가능하다.

그래서 바로 빨간 밑줄이 생기면서 " type 'number' is not assignable to type 'string' " 이라는 에러가 뜬다.

그 이유는 처음에 "hello"를 할당할때 타입스크립트는 타입 추론으로 a가 string이라는 것으로 인식했기 때문이다.

 

이렇게 타입 추론말고 다르게 타입을 미리 정해줄 수 있다.

아래 처럼 명시적으로 작성하면 된다.

let b : boolean = "x" 

let c : boolean = true

하지만 이렇게 작성했을 시  하나는 오류이고 하나는 정상작동 한다.

오류는 바로 b다

b는 빨간 밑줄이 생기면서 string타입을 boolean타입에 할당할 수 없다고 미리 말해준다. 

c는 정상적인 할당이다.

 

 

 

타입 설정은 두 가지가 있다. 

let b : string = "hello" 

let c = "hello"

이렇게 명시적 정의와 타입 추론으로 타입 설정이 가능하다.

 

명시적 정의는 타입 추론이 불가능 할때 사용해주면 좋다 

예를들면 아래와 같다.

let a = [ 1, 2, 3]
a.psuh("4")



let b = []
b.push("4")

첫 번째 케이스는 미리 push가 불가능하다고 알려주지만

두 번째 케이스는 타입 추론이 불가능 하기에  b.push("4")가 정상 작동한다. 

우리가 만약 number type만 넣고 싶다면 

let b : number[] = []

이렇게 명시적 정의로 해줘야한다. 

이처럼 바로 이럴 때 명시적 정의를 사용해주면 좋다.

 

 

 

 

 

 

 

 

 

 

 

 

타입스크립트 코드 테스트
https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

 

 

 

ref

노마드코더 - 타입스크립트