Typescript를 배워야 하는 이유 (feat. React 적용)

웹 개발 프로젝트를 진행하면서 typesciprt를 사용하게 됐습니다. 그래서 Typesciprt는 무엇이며 구지 왜 공부해서 써야하는 지 알아보도록 하겠습니다.

1. Typescript는 무엇이고 왜 써야할까?

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. (wiki)

 

1) Javascript는 너무 자유롭다

Javascript는 코딩하는 데 있어서 너무나도 제한이 없고 자유롭습니다. 처음 개발할 때는 편하게 느껴졌지만 이는 나중에 큰 프로젝트할 때 오히려 단점이 될 수 있습니다. "실행시간 오류" 를 제대로 catch해낼 수 없기 때문이죠! 그 중 가장 큰 문제의 원인은 변수의 type을 지정함으로 써 해결할 수 있습니다.

 

2) 배우기 쉽다!

일단 저는 Typescript는 언어라고 생각하진 않고 Javascript의 확장팩이라고 생각합니다. 쫌 더 엄격한 규칙을 넣고 컴파일 에서 사전에 미리 에러 가능성을 알려주도록 하는 역할을 수행합니다. 간단하게 사전에 에러를 잡아주는 컴파일러 라고 생각할 수 있습니다. 

 

3) 유지보수

다른 사람이 코드를 볼 때나 제가 나중에 볼 때 코드를 이해하는데 도움을 줄 뿐만 아니라 오류 발생 가능성을 낮춰줍니다. 구글이나 페이스북에서도 사용하며 오류의 20~30% 를 방지할 수 있다고 하네요.

 

2. React에 적용하기

기존에 React, Nodejs 는 이미 설치했다는 가정 하에 진행하였습니다. 

npm i -g typescript (typescript 설치)
npx create-react-app 프로젝트명 --template typescript (프로젝트 생성)
cd 폴더명
npm start

 

만약 이미 만든 프로젝트에서 typescript를 추가하고 싶을 경우

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

를 입력하면 됩니다!

 

그 후에 js 확장자를 tsx 확장자로 변경한 후 기존에 javascript쓰던 데로 그대로 쓰고 변수를 정의할 때 type을 정의하는 구문만 추가해 주시면 됩니다.

 

 

tsx

js

예시로 위와 같이 작성해 보았는데요, 정말로 그냥 React 기본 문법과 크게 다를 바가 없습니다. 근데 약간의 차이가 나는데요, name은 숫자로 정의했는데 문자를 대입했더니 경고가 뜹니다. 반면 js는 그런거 없네요.. 

 

이게 사소한 차이지만 나중에 큰 프로젝트할 땐 예기가 달라집니다... 만약 프로젝트를 하고 싶다! 하시면 javascript 공부하다가 나중에 typescript를 적용해서 진행하시면 될 것 같습니다. 

 

경험담으로 저도 개발하다가 약간의 type실수로 쫌 일 좀 벌린게 있는데.. typescript를 썼다면 그런 일은 벌어지지 않았을까... 싶습니다 :)

 

다음 포스팅에는 jsx 와 js의 차이 / Typescript에 추가된 문법(?) 을 살펴보도록 하겠습니다.