Typescript 의 시작! : JS 에서 type 을 사용하자

< 참고 강좌 >

youtu.be/VJ8rvsw2j5w

---

< Typescript 의 필요성 >

Typescript

나는 작년에 C++ 를 4개월간 공부했었다.

C++ 는 극도로 type 에 예민한 언어인 반면,

JS 는 type 을 완전히 무시할수있는 언어이다.

따라서 C++ 에서는 상상도 못할 아래와 같은 미친 대입이 가능하다.

/* test.js */

let a 

a = 1       // a is now number
a = 'one'   // a is now string
a = true    // a is now boolean
a = []      // a is now array
a = {}      // a is now object

따라서 JS 로 코딩할때는, 

"이 변수에 number 대신 array 를 대입할 일은 없을거야..." 라는 심약한 생각으로 코딩을한게된다.

또한 함수의 인자에서도 type 을 표시할수없기에,

const a = (strArr) => {} // strArr 는 string array 야!!!

위와 같이 굉장히 인자명에 의존하게되는 어거지성 코드를 작성하게된다.

물론 if 문을 사용하여 typeof 로 확인할수있겠지만 너무 tedious 한 일이다.

애초에 이런일들을 해결하기위해 나온것이 Typescript 이다.

C++ 는 솔직히 불편하리만큼 엄격한데 그정도는 아니지만 코드에 type 을 표시할수있다는것은

분명 쓸때없는 코멘트나 긴 변수명을 만들지않게해줄것이다.

이제 몇가지 기본적인 문법을 살펴보자.

---

< Typescript 기초 : 변수명뒤에 :타입명>

아까 했던 JS 의 미친대입을 Typescript 에서는 할수없게할수있다.

/* test.ts */

let a: number = 1

a = 'hello' // error!

미친대입을 하고싶다면 any 타입을 사용한다.

let a: any = 1

a = 'hello' // ok!

보면 알겠지만 변수명뒤에 :타입명 을 추가하게된다.

C++ 와 달리 변수명 "뒤에" 붙인다는것을 명심하자.

---

< 함수의 return 타입 >

C++ 에서는 함수의 return 타입또한 명시해줘야한다.

Typescript 역시 그러하다. 

/* ts */

const sum   = (x: number, y: number): number => x + y
const show  = (x: any): void => console.log(x)

함수의 return 타입은 () 와 => 사이에 위치해야한다.

또한 아무것도 return 하지않을거라면 :void 를 적어준다.

---

< Typescript 의 배열 type >

C++ 에서는 array 안에 요소들의 type 까지 정해줘야하는데,

Typescript 또한 그러하다.

문법은 :요소타입[]

let numArr2: number[] = [1, 2, 3]
let strArr2: string[] = ['one', 'two', 'three']

기초는 끝이다.

객체에 대해서는 다음 포스팅에서 다루도록하겠다.