[TypeScript] TypeScript를 사용하는 이유

타입 스크립트는 간단히 설명하면 자바 스크립트의 타입이 입혀진 언어이다
타입 스크립트는 JS와는 다르게 브라우저에서 실행하기 위해서 파일을 한 번 변환 시켜야 한다.
이를 우리는 컴파일이라고 한다.

타입 스크립트의 장점
js doc을 사용하면 타입 스크립트와 비슷한 행동을 할 수있다.

 

JSdoc을 사용하면 임의로 Promise 객체를 설정할 수 있고

/**
 *  @return {Promise<User>}
 */

 

아래와 같이 Promise 설정한 경우 그 객체에 대한 프로퍼티를 만들 수 있다

/**
 * @typedef {object} User
 * @property {stirng} name
 * @property {stirng} email
 * @property {sometype} address
 */

또한 sometype 처럼 아예 데이터 타입을 별도로 만들어서 사용할 수도 있습니다.

/**
 * @typedef {object} sometype
 * @property {stirng} setname
 * @property {stirng} setnum
 */

 

fetchUser().then(function(response){
  response.address.setnam
})

이렇게 했을 때 JS와 TS는 큰 차이가 존재하는데 만약 위의 코드 처럼 객체의 프로퍼티를 접근할 때 존재하지 않는 프로퍼티를 참조했다면 JS의 경우 문제가 발생했음에도 코드 상에선 문제 없이 실행, TS 같은 경우 코드상에서 존재하지 않는 프로퍼티 호출 에러가 표시되게 됩니다.

 

1.에러를 사전에 막을 수 있다.

 

JS의 동적 데이터 타입 설정 문제 방지

 

JS는 이전에 설명 드린 것 처럼 여러 원시 타입과 원시 타입을 제외한 모든 것을 객체라고 합니다.

중요한 것은 이러한 변수들의 데이터 타입을 JS에서는 임의로 설정하는데 이것이 큰 문제이다.

function sum(a, b){
    return a + b;
}

sum(10, 20) // 30 <- Number
sum(10,'20') // 1020 <- String

위의 예를 보면 +의 경우  NUM + NUM 에선 산술 연산자, STR + STR 에선 문자 병합의 의미로 사용됩니다.

사전에 변수의 데이터 타입을 정하지 않는 경우 위와 같이 내가 의도하지 않게 동작할 가능성이 크기 때문에

TS에선 사전에 데이터의 타입을 설정해서 저러한 오류가 생기는 것을 막습니다.

 

function sum(a : number, b : number) : number{
    return a + b;
}
sum(10,20); // 30 <- Number

파라미터 들과 반환 값의 데이터 타입을 사전에 정의

function sum(a : number, b : number) : number{
    return a + b;
}
sum(10,'20') // 에러