[TS]TypeScript란? (사용 이유/기본 지식/기본 설치)

TypeScript란?

• JavaScript에 타입을 부여한 언어입니다. (JS 확장 언어)
• TypeScript는 JavaScript와 달리 브라우저에서 실행하려면 파일을 한 번 변환해주어야 하는데 이 변환 과정을 컴파일(complie)이라고 합니다.

TypeScript를 배워야하는 이유

1️⃣ 코드의 안정성

• 안정적이다 ⇒ 에러가 적게 난다.
• 활성 컴파일 시간 오류 분석 사용시(?) 코드베이스에서 런타임 문제가 훨씬 줄어듭니다.
• 그러나 JS의 모든 에러를 다 막아주는 것은 아닙니다.
• 자유도는 줄어듭니다.

2️⃣ 코드 가이드 및 자동완성

• 개발 생산성이 향상됩니다.

3️⃣ 러닝커브가 낮음

---

기본 지식

• typescript는 최종적으로 javascript로 변환됩니다.
  순전한 typescript 코드를 돌릴 수 있는 것은 deno이나, 대중화되지가 않았습니다.
  브라우저, 노드는 모두 js 파일을 실행합니다.
• typescript는 언어이자 컴파일러(tsc)입니다. 컴파일러는 ts 코드를 js로 바꿔줍니다.
• tsc는 tsconfig.json(tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿉니다.
  인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야합니다.

✅ tsc의 역할
1️⃣ ts 코드를 js 코드로 변환
2️⃣ 코드의 타입 검사

둘의 역할은 별개입니다.
타입검사에 실패하면 코드 변환이 안될 것 같지만 둘이 별개이기 때문에 ts에서 에러가 나도 ts파일을 변환할 수 있습니다.
(왜? ts로는 잘못된 코드이지만 js에서는 말이 되는 코드이기 때문에!)

 

• 단순히 타입 검사만 하고 싶다면 tsc --noEmit 하면 됩니다.
• ts 파일을 실행하는 것이 아니라 결과물인 js를 실행해야 합니다.
• 에디터가 필수입니다.
  • VS Code나 웹스톰이 반드시 필요합니다.
  • 실제 프로그램에서는 타입 검사를 자동으로 해주지 않습니다.
    에디터를 사용하지 않는다면 매번 타입 검사 명령어(tsc --noEmit)을 쳐합니다. 에디터는 타입 검사 명령어를 자동으로 해주기 때문에 타입 검사 자동 실행을 위해서는 VS Code나 웹스톰이 켜져있어야 합니다.

---

기본 설치

• npm init -y
  • 명령어를 실행한 폴더가 node프로젝트가 됩니다.
  • node 프로젝트의 설정들을 다 모아둔 파일이 package.json 입니다.
• npm i typescript
  • typescript 설치 명령어
  • npm은 node의 프로그램들(node의 package)을 모아둔 저장소가 npm이라고 하는 패키지매니저입니다.
  • 해당 명령어는 npm에 저장되어 있는 typescript를 설치하는 명령어가 되는 것입니다.
• npx tsc
• npx tsc --init
  • 명령어를 실행하면 tsconfig.json 파일이 생성됩니다.
  • tsconfig.json파일에서 allowJs의 주석을 풀어줍니다. ( → ts와 js를 동시에 쓸 수 있습니다 )
  • ❗strict 모드를 절대 false로 만들지 않습니다.❗
    • 이걸 하지 않으면 ts를 하는 이유가 없기 때문입니다.
  • "forceConsistentCasingInFileNames": true
    • 무조건 true로 해주는게 좋습니다. typescript에서는 다른 파일을 import 해올 수있습니다.
      이 때 윈도우에서는 대문자와 소문자를 구별을 하지 않습니다. First.ts로 import 해와도 first.ts 파일을 불러오게 됩니다. (리눅스나 맥에서는 대소문자를 구별하기 때문에 에러가 발생합니다.)
    • 윈도우 사용해서 배포할 때 이런 대소문자 문제로 실수를 할 수 있기 때문에 옵션으로 대소문자를 구별해서 import 할 수 있게 하는 것입니다.
  • "skipLibCheck": true
    • 라이브러리 체크를 건너뛰는 옵션입니다.
    • 다른 패키지들을 다운받아서 사용할 때 패키지들에는 d.ts라는 파일(패키지의 타입들을 정리해둔 파일)이 있습니다. 이러한 파일이 많은데 다 검사하게되면 컴파일러가 너무 느려지기 때문에 사용하지 않는 타입은 검사를 건너 뛰는 것입니다.

---

해당 포스팅은 '인프런_ 타입스크립트 올인원 : Part1. 기본 문법편' 강의와 '타입스크립트 교과서' 책을 기반으로 학습하여 정리한 내용입니다!