[Typescript] 타입스크립트 공부 시작하기

The reason why do i begin Typescript

나는 nodejs와 express를 이용하여 백엔드 서버 및 API를 개발하는 작업으로 외주를 통해 밥빌어먹고 살고 있었다.

 

 외주 프로그램 상에서 처음 계약에는 없었던 기능 요구가 추가로 들어오게 되면서 테이블을 수정하거나, 데이터 포멧을 바꾸거나 하는 등의 유지보수 개발사항이 많았었다. 그렇게 요구사항들을 개발하다 보니, javascript의 json구조가 특별히 정해져있는 type의 기준이 없다보니, 모든 API를 일일이 확인하지 못하여 버그를 발견할 때까지 모르는 상황도 있고, type form이 정해져있지 않는 것 때문에 불편한 점이 많았다. 

 

이전에는 스타트업 회사에서 잠깐동안 게임 개발을 C#으로 개발했던 적이 있던 터라 이러한 type 규정이 되지 않는 불편함을 너무 느껴서 typescript를 사용해서 다음 개발부터는 type을 정한 설계를 해야겠다는 필요성을 느꼈다.

 

https://www.typescriptlang.org/docs/

The starting point for learning TypeScript

정말 정석으로 공부하려면 위 링크의 docs를 정독하는 것이 정답이지만, 우리는 시간 빌게이츠가 아니므로 필요한 것들만 공부하고 내려가는 top-down 방식이 일반적인 개발자의 공부 방향이다.

 

Typescript

typescript는 자바의 type이 추가된 확장판 느낌이지만, js와는 다르게 컴파일 과정을 거친다고 한다. ...생각해보면 당연하다. 내가 typescript를 찾게 되는 이유도 인터프리터 언어인 javascript에서는 type 규정을 런타임을 돌기 전에 코드 상에서 체크해줄 수 있도록 C나 JAVA 와 같이 type형식을 지정하기 위해서 사용하는 것이므로 컴파일 과정이 필요하다.

 

일반적으로 javascript를 사용하면 JSON 객체 안에 데이터 중 object를 꺼내왔을 때 [object Object] 라는 표시만 해준다. 

또한 json 객체 안에서 key를 잘못 접근하였을 때 생기는 TypeError는 코드가 틀렸음을 확인하지 못하면, 런타임에서 에러가 발생할 때까지 확인하지 못하는 불편함이 있다. 여기에 호되게 당하면 누가 뭐라하지 않더라도 Typescript를 찾게 되더라..

 

/**
 * @typedef {object} Address    
 * @property {string} street
 * @property {string} city
 */

/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Address} address
 */

/**
 * @returns {Promise<User>}
 */
function fetchUser(){
    return axios.get(url)
}

typescript는 위와 같이 typedef와 property로 타입을 지정할 수 있고, return으로 반환하는 객체가 무슨 타입인지도 지정할 수 있다. 이러한 타입 규칙에서 벗어나면 에러를 띄운다.

 

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

함수를 정의할 때는 위와 같은 형태로 매개변수의 타입과 반환형도 지정할 수 있다.

 

위와 같이 sum()을 정의하였는데

sum(10, '20');

이렇게 호출해버리면 매개변수 타입이 일치하지 않으므로 컴파일 에러를 띄운다. 

 

여담으로 JS에서 @ts-check 라는 키워드를  이용해서TS와 같이 사용하는 방법도 있다고 한다.