예전엔 사용하지 않을 기술엔 관심도 두지 않았다. 그런데 오랜시간이 지난 뒤에 그 기술을 사용해야 할 때가 왔을때 너무 아무것도 몰라서 당황한 적이 한두번이 아니다. react를 처음 시작했을때 그랬고 node.js를 시작했을때 그랬다. react 이후로 나는 갈림길에 섰을때 적어도 뭔지는 모두 알아보고 선택하기로 했다.
이번에 알아볼 것은 TypeScript다.
TypeScript는 Angular때문에 처음 알았다. 물론 구 Angular는 아니고 새로운 Angular다. (벌써 v4 나왔더라. v3은 건더뛴 듯) 사실 Angular를 알아보려고 했는데 TypeScript를 모르는채로 Angular를 알아보면 안될 것 같아 방향을 틀었다.
TypeScript는 MS가 만든거라 그런지 굉장히 문서화도 잘되어 있고 VS Code에서의 지원도 환상적이었다. 먼저 tutorial을 따라해보기로 했다. 한번 따라해보니 감이 잡힌다. 그래서 조금 정리를 하면서 살펴봤다.
{
"compilerOptions": {
"outDir": "./built",
"allowJs": false,
"target": "es2015"
},
"include": [
"./src/**/*"
]
}
TypeScript는 당연하게도 compile(?)이 필요하다. 브라우저에서 바로 실행되지 않기 때문이다. 그래서 tsc를 통해서 ts파일을 js파일로 변환해야한다. 이를 조금 더 편하게 해주는 것이 tsconfig.json이다. 이제 tsc만 실행하면 된다.
interface Person {
firstName: string;
lastName: string;
sayHello: Function;
}
class Student implements Person {
firstName: string;
lastName: string;
constructor(firstName: string, lastName: string) {
this.firstName = firstName
this.lastName = lastName
}
sayHello() {
return "Hello, " + this.firstName + " " + this.lastName
}
}
tutorial에 있는 코드를 내 나름대로 만들어봤다. typescript라는 이름답게 type을 지정하는 것이 특징이다. 만들다보니 ES2015와 비슷하다. 거기에 type이 추가된 정도의 느낌이다. 문서를 보다보니 typescript 소개에도 이렇게 써있었다.
TypeScript offers support for the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, like async functions and decorators, to help build robust components.
tsc로 compile을 하면 target으로 지정한 형태의 코드로 변경이 된다. es2015로 바뀐코드를 보면 어떤 차이가 있는지 확연히 드러난다. interface, type이 모두 제거되고 나머지는 똑같다. 여기까지만 따라하고 문서를 계속보니 Generics, Enum등 객체지향 언어에서나 볼 수 있는 것들을 많이 제공한다.
이 정도 보고 따라해봤으니 됐다. 이젠 Angular를 볼 차례다.
