TypeScript(타입스크립트)로 프로젝트를 리팩토링 하기 위해, 먼저 언어에 대한 조사가 필요했다.
왜 타입스트립트를 써봐야하는지부터, 기초적인 언어 사용법까지 기록하려한다.
왜 TypeScript가 hot한걸까?
타입스크립트의 공식문서에 따르면, 타입스크립트는 자바스크립트에 '정적인 타입 정의' 기능을 더한 언어라고 한다. 왜 이런 기능이 더해진걸까?
동적 언어인 자바스크립트는 이런 타입 문제에서 자유로울 수 없다. 대표적으로 함수의 input이, type에 대한 어떠한 limit도 없다는 것에서 문제가 많이 발생한다고 볼 수 있다.
더해서, 자바스크립트는 에러를 런타임(실행환경)에서 잡아내기 때문에 파일 혹은 프로그램을 직접! 실행해보기 전까지는 에러를 발견하기도, 잡아내기도 쉽지않다.
그래서, 타입스크립트는 이를 방지하기 위해 정적인 타입 정의를 더한 자바스크립트라고 할 수 있다. 타입스크립트는 코드를 자바스크립트로 컴파일하는 단계가 있는데, 이 때 타입에 대한 에러를 바로 잡아낼 수 있다고 한다. 프로그램 실행 전 코드 치는 단계에서 에러 캐치가 가능한 것이다.
나도 자바스크립트를 이용해 프로젝트를 하면서, 이 동적언어의 타입문제를 많이 겪었다.
클라이언트와 서버 모두 에러없이 코드를 작성했으나, 로컬이나 배포테스트 시에 발견되는 '버그'들이 굉장히 많았다. 자바스크립트는 에러로 간주해야할 상황에도 에러가 아닌, undefined나 nan이라는 '값'을 뱉어버리니 발생하는 애로사항들이 있었다.
자바스크립트로 개발을 해 본 입장에서, 타입스크립트를 알고나니 써보고싶다라는 생각이 강하게 들긴했다. 왜 자바스크립트를 쓰는 개발자들 사이에서 hot 한지 이해가 된다.
타입스크립트 기초에 대해 배워보자
타입 표기 (type annotation)
변수나 함수의 인자, 함수 결과값 등의 타입을 표기한다.
콜론(:)을 이용해 value: type의 형태로 사용한다.
const userName: string = 'CHO';
const userAge: number = 123;
const userAgeArr: number[] = [10, 35, 29, 34, 50];
const userInfo: object = {};여러 타입을 지정해 줄 수도 있는데, 이는 유니온 타입으로 파이프기호(|)로 엮어서 지정한다.
type something = number | string | boolean;함수 타입
함수에서도 인자나 결과값의 타입을 지정한다.
function authCode(code: string): string {
return `authorization code는 ${code}입니다.`
}특수 타입
타입스크립가 제공하는 특수한 타입이 몇 가지 있다.
- any : 모든 타입을 허용하는 타입이다. any를 남발하면 그냥 자바스크립트를 쓰는 것이나 마찬가지니, 주의해서 사용해야 할 것!
let anyType: any = 'what?';
anyType = 3; // error 없음
anyType = null; // error 없음- void : 아무 값도 리턴하지 않는 함수의 반환타입을 표기할 때 사용한다. void로 설정하면 함수 내에서 return문은 사용이 불가하며, null과 undefined만을 값을 가질 수 있다.
function forLog(): void {
console.log("just for console log");
}
// return 사용 시 type '~~~' is not assignable to type 'void'라는 에러를 뿜뿜한다-
never : 아무 값도 가질 수 없는 타입이다. throw error를 하는 함수처럼 아무런 값도 반환하지 않는 함수에 사용 가능 하다.
-
튜플 : 배열에서 파생되었다. 배열타입에서 정확한 원소의 개수를 정할 수 있고, 그 타입도 지정할 수 있다. (그러나, 배열메서드를 이용해 튜플을 조작할 때는 에러가 나지 않는다. 흠 ,,)
const userInfo: [string, number] = ["CHO", 20]; // ["CHO", 25, 35] 를 할당하면 error 발생! 개수를 초과했기 때문Interface
코드의 구조화와 새로운 타입을 정할 수 있는 문법이다. 클래스와 비슷하다고 느껴지는데, 상속이 가능하며 병합적으로 사용할 수 있다.
공식문서는 가급적 interface를 이용하고, 이로 표현할 수 없는 형태거나 튜플을 사용해야하는 경우라면 type 사용을 권장한다. 이 부분은 타입스크립트를 좀 써보면서 이해해야 할 것 같다.
interface User {
name: string,
age: number,
language?: string, // ? 사용시 해당 키(값)이 있으면 타입을 검사하고, 없으면 검사하지 않음
...
};
let infoCHO: User { name: "CHO", age: 20 }; // 구조화된 User를 type으로 지정파이널 프로젝트를 타입스크립트로 리팩토링 하기 위해 언어에 대한 정보와 기초 문법을 찾아봤는데, 자바스크립트를 정적인 언어로 사용할 수 있는 느낌이다. 리팩토링을 진행하면서, 더 많은 속성을 알아가봐야겠다!
