[TypeScript] 타입스크립트 알아보기 (1) 쓰는 이유와 타입의 종류

요새는 사람인을 보던 잡플래닛을 보던 프론트엔드건 백엔드건 거의 무조건 타입스크립트를 쓰는 것 같다. 자바스크립트와는 여러 가지 차이점이 있겠지만 제일 큰 차이는 자바스크립트에 타입을 부여했다는 것이다. (그래서 타입스크립트인거겠지...) 그렇다면 왜 타입스크립트를 쓰는 것일까?

 

에러의 사전 방지

잘 알려졌다시피 자바스크립트는 타입이 동적으로 할당이 된다. 그로 인해 많은 문제가 발생하는데 

 

이렇게 덧셈을 하는 코드가 있다고 하자. 근데 만약 개발자의 실수든 뭐든 해서 밑에 코드가 다음과 같이 바뀐다면

 

 

말도 안되는 답이 나오는 것이다. 이런 에러가 발생할 일이 있겠냐고 생각할 수도 있겠지만 개발을 하다보면 동적 타입에 의한 문제는 생각보다 많이 튀어나오게 된다.

 

이런 밈도 만들어졌다...

 

즉 타입스크립트는 이런 문제를 막아준다. 위 코드를 타입스크립트로 다시 작성해보면

 

 

변수명 : 타입 방식으로 타입을 주게 된다. 만약 a 변수에 string 값을 주게 되면

 

 

바로 에러를 뱉어내어 개발자가 실수를 덜하고 시간을 아낄 수 있게 해준다. 

 

 

편한 개발 툴

이건 약간 부수적인건데 보통 프론트를 개발하거나 웹스톰을 살 돈이 없는 개발자들은 VSCode를 많이 쓰는데 VSCode는 툴의 내부가 타입스크립트로 작성되어 있어서 타입스크립트 개발에 아주 최적화가 되어있다. 따라서 아주 편리한 코드 자동 완성과 가이드를 제공한다.

 

 

기본 타입

타입스크립트의 기본 타입은 다음과 같다. 

• boolean
• number
• string
• object
• Array
• Tuple
• enum
• any
• void
• null
• undefined
• never

Wrapper 객체 타입은 값을 할당할 때 문제가 발생하니 왠만하면 변수를 선언하고 타입을 할당할 때 원시 타입을 쓰는 것이 좋다.

 

https://bk0625.tistory.com/46

[TS] 타입스크립트에서 Wrapper 객체 타입 피하기

 

각 타입을 선언하는 방법은 다음과 같다.

 

number

   

  let num : number = 10;

 

boolean

      let flag : boolean = true;

 

object

      let obj :object = {

        a:'adsfads',

        b:'safsdf'

      }

 

Array

      let arr1:number[] = [1,2]

      //or

      let arr2:Array<number> = [1,2]

 

 

Tuple

튜플은 배열의 길이가 고정되있고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

      let arr :[string, number] = ['hi',45]

 

 

만약 정의하지 않은 타입이나 인덱스로 접근할 경우 당연하게도 오류가 난다.

 

Enum

다른 언어에서도 많이 쓰이다시피 특정 값(상수)들의 집합을 의미한다.

 

    enum Avengers { Capt, IronMan, Thor }

    let hero: Avengers = Avengers.Capt;

 

인덱스 번호로도 접근할 수 있으며 인덱스를 사용자 편의로 변경하여 사용할 수 있다.

 

any

단어 의미 그대로 모든 타입을 허용한다는 의미이다. 타입을 모르겠거나 정할 수 없을 때 유용하다. 물론 any로 떡칠하면 타입스크립트를 사용하는 의미가 없으니 상황에 맞게 사용하도록 하자.

    let str: any = 'hi';

    let num: any = 10;

    let arr: any = ['a', 2, true];

 

void

반환 갑싱 없는 함수의 반환 타입이다.

 

Never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다.