TypeScript
( JS + Type )
JS는 Dynamic Typing을 제공하는 언어이기 때문에 각기 다른 타입의 값으로 연산하더라도 , JS가 임의로 타입으로 설정 후 결과값을 계산한다.
예) "2" + 2 = "22" ,
왜 4가 아니야?? 문자열+숫자는 문자열을 리턴!
이런 특성은 프로그래밍을 유연하게 작성할 수 있다는 장점이 있지만, 꼼꼼하게 설계하지 않으면 프로그래머가 의도한 대로 결과값이 도출되지 않는다는 단점이 있다.
프로젝트 규모가 커지면 커질수록, 코드가 복잡해질 수록 이러한 JS의 특성은 코드의 안전성을 해치기 때문에 '타입'이라는 안전핀을 꼽아 프로그래밍이 작동하기 전에 먼저 타입검사를 해주는 것이 '타입스크립트'이다.
따라서 기본 문법은 JS와 똑같고 우리는 사용할 변수/함수에 대한 타입만 올바르게 지정해주면 된다.
위처럼 [ 'a' 도 숫자이고 'b' 도 숫자야! ] 라고 타입을 미리 지정해주면 프로그램 작성시 타입스크립트가 타입 오류를 잡아주기 때문에
'a20'과 같은 실수를 사전에 방지할 수 있다.
또한 타입을 엄격하게 검사하기 때문에 에러메세지도 정확하게 발생한다. JS 에러코드는 굉장히 추상적인데 이에 반해 TS는 어느 부분에서 어떤 오류가 발생됐는지 꽤나 구체적으로 찝어준다.
위와 같은 코드에서는 "야 너 plus에서는 숫자 두개만 쓴다며, 왜 "a"가 들어가있어? 바꿔야하는거 아니야" 와 같이 에러에 접근하게 편하게 메세지를 출력한다. 에러 코드를 수정하기에 굉장히 편리하다는 장점이 있어, 모두모두 행복해질 수 있다. ✧*｡٩(ˊᗜˋ*)و✧*｡
React 기준으로 코드를 작성할 거라서, TS 설정도 React 기준으로 진행할 거니 참고 ㅇ_ㅇ!
새로운 프로젝트를 만들 때!
npx create-react-app ${프로젝트이름} --template typescript기존에 있는 React 프로젝트를 TS로 변경할 때
npm install --save typescript @types/node @types/react @types/react-dom @types/jest위 경우에는 설치되어있는 js 파일 확장자를 ts 또는 tsx 파일로 변경해주어야한다 :)
브라우저는 유일하게 JS만 인식하기 때문에 아무리 꼼꼼하게 타입을 지정해서 코드를 짰더라도 TS 파일은 바로 인식하지 못한다.
따라서 JS로 변환하는 과정이 필요한데, React는 똑똑해서 알아서 TS컴파일러를 동작시키고 JS파일로 변환해주니 걱정하지 마세오
그래도 이런 변환 과정이 있다는 것은 숙지하고 있어야지 암암 ㅇ_ㅇ!
(React나 Vue와 같은 라이브러리를 사용하지 않는다면
프로젝트 파일 > 터미널에 'tsc -w' 를 입력하세오, 그럼 자동으로 컴파일 해 JS 로 변환해준다. )
이러한 컴파일의 옵션을 담당하는 것이 tsconfig.json 파일이다.
기본설정은 요롷게 ㅇ_ㅇ
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
}
}