프로그래밍/TypeScript

TypeScript란

Dayzen 2018. 11. 11. 00:31

TypeScript란 무엇일까요?라는 키워드로 여기에 방문하셨다면 다들 JavaScript를 조금이라도 보셨을겁니다 (아니면 새로 보시는걸로...)

먼저 JS는 인터프리터 언어입니다 실제 동작중인 즉 런타임에 타입을 체크하고 코드를 실행합니다

var a;

이 a라는 변수는 number일수도 string일수도 function, literal object일수도 있습니다

만약 

console.log(a.a) // undefined

위의 코드는 undefined가 납니다 a의 객체요소중 a가 없기 때문에 undefined를 호출하는것이죠

만약분들이 js를 하면서 위와같은 실수를 많이 하셨을거라고 생각합니다 (제가 많이했기 때문이 아니라...)


그렇다면 js를 좀더 빡빡하게(?) 사용하기 위해서는 어떻게 해야할까요?


타입을 정해주면다면 가능하지않을까요? static type을 말이죠

그렇다면 js에서 타입을 정해주도록 도와주는 프레임워크는 무엇이 있을까요?


대표적으로 Flow와 Typescript가 존재합니다

먼저 두개의 차이를 간단히 말해보자면


Flow

  • Facebook에서 만들었습니다
  • 2014년도에 배포가 되었습니다
  • @Flow를 코드의 맨위에 선언한 다음 a: string 이런식으로 js 코드에서 이루어집니다


TypeScript

  • MicroSoft에서 제작하였습니다
  • 2012년에 배포가 되었습니다
  • .ts라는 파일을 통해 typescript의 문법에 맞추어 코드를 작성한뒤 ts를 컴파일하여 js코드를 만들어줍니다
어떤 차이가 보이는지 아시겠나요??
가장 큰 부분은 맨 마지막 줄의 의미에 있습니다
Flow는 js에서 라이브러리 느낌으로 js파일내에서 처리하고 TypeScript는 ts라는 파일을 따로 만들어 js로 트랜스파일링 한다는 개념입니다

TypeScript는 컴파일 언어라고 생각하시면 됩니다
그.런.데 평소에 알고 계시던 java, c++ 이런 전통적인 방식의 컴파일 언어와 비교하면 안됩니다

예시를 들어보겠습니다

TypeScript는 말 그대로 Type맞다면 아 이건 같은 객체야라고 판단하는것입니다
예시로
interface A {
a: string
}

function check(a: A) {
console.log(a.a);
}

let a: A = {a: "a"}

check(a);
check({a: "a"})

결국 컴파일은 성공합니다 물론 이러한 옵션들은 따로 TypeScript를 포스팅하면서 천천히 공부해 나아갈 예정이며 이번 포스팅에서는 간단히 아 타입스크립트란 이런거구나 라고 이해하신다면 이번 글쓰기는 충분히 성공입니다 :)


오랜만에 포스팅을 해나아갔는데 앞으로 꾸준히 자주 다시 이어나가도록 하겠습니다


포스팅에 대한 지적이나 추가사항은 언제나 환영이며 해주신다면 감사하겠습니다

저작자표시