[TypeScript] Nomad Coder - TypeScript 2주 챌린지(1일차)

TypeScript?

타입스크립트는 strongly typed(엄격한 자료형) 프로그래밍 언어다.

타입스크립트는 작성한 코드가 자바스크립트로 변환된다.

변환하는 이유는 브라우저가 타입스크립트가 아닌 자바스크립트를 이해하기 떄문이다

 

strongly typed?

함수/메서드에 전달하는 객체나 값의 타입이 프로그래머의 의도와 다를 때,
컴파일러가 에어를 내거나 컴파일을 거부하는 식으로 타입을 엄격하게 맞춘다는 의미

타입스크립트를 사용하는 이유

자바스크립트는 매우 유연한 언어로 허용되서는 안되는 코드들이 존재하는데, 자바스크립트 내에선 실행되는 경우가 많다. 예시로,

1) [1, 2, 3, 4] + false // '1, 2, 3, 4false'

2) function divide(a, b) {
  return a / b
}

divide("xxxx") // NaN

3) const nico = { name: 'nico' }

nico.hello()
// VM62:1 Uncaught TypeError: nico.hello is not a function
이 에러는 유저의 컴퓨터에서 코드가 실행되면 나타나는 에러

이런 터무니 없는 코드들이 실행되는 경우를 볼 수가 있다.

 

이 중에서도 최악의 에러는 런타임 에러다.

제 3자가 개입해야 개발자가 알게되는 오류로서, 코드가 실행되기 전에 실수를 잡아줘야하는 것이 프로그래밍언어인데

자바스크립트는 그러하지 못하다. 이러한 이유로 타입스크립트를 사용하는 것이다.

 

런타임에러(Run time error)

이미 컴파일이 완료되어 프로그램이 실행중임에도 불구하고,
의도치 않은 예외 상황으로 인하여 프로그램 실행 중에 발생하는 오류 형태를 의미한다.

타입스크립트 사용 방법

사실 타입스크립트의 코드 방식은 자바스크립트랑 다를 바가 없다.

다만, 조금 다르다면 데이터와 변수의 타입을 명시적으로 정의할 수 있다는 점일 것이다.

 

위에서 들었던 예시들로 타입스크립트에서 그대로 사용하게되면 어떠한 오류를 만날 수 있고, 타입을 명시적으로 정의하는 방법에 대해 알아보자.

1) [1, 2, 3, 4] + false
// Operator '+' cannot be applied to types 'number[]' and 'boolean'.
숫자 배열에 boolean을 더할 수 없다는 에러

2) function divide(a, b) {
  return a / b
}

divide("xxxx")
// Expected 2 arguments, but got 1.
이 함수는 입력값이 두개 필요하다고 알려주는 에러

3) const nico = { name: 'nico' }

nico.hello()
// Property 'hello' does not exist on type ' { nickname: string; }'
이 객체 타입에 'hello'는 존재하지 않는 것을 알려주는 에러

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

let a : String = 'hello'
// 이렇게 타입을 정해주고, 만약 다른 타입을 넣는다면 에러가 발생한다.

이렇게 타입을 추론하지 못할 때 명시적으로 정의해줄 수 있으나, 최소한으로 사용하는 것이 좋다.

왜냐하면, 코드의 가독성이 명시해주지 않는 것이 깔끔하기 때문이다.