타입스크립트 기본 설명, 설치법 정리

타입스크립트는 단순히 자바스크립트에 타입을 부여한 언어이다.

자바스크립트는 기본적으로 타입에 관대한 언어이다.

밑의 예시를 한번 보자.

function sum (a, b) {
  return a + b; }


console.log(sum(10, 20)); // 30
console.log(sum('10','20')); // 1020
console.log(sum(10,'20')); // 1020

위 처럼 변수에 어떤 타입을 할당하느냐에 따라서 결과값이 숫자형일수도, 문자형일수도 있다.

지금은 규모가 작은 토이 프로젝트들만 만들었어서 타입에 관해서 신경을 안써도 됐지만, 규모가 커지면 커질수록

타입스크립트에 대한 중요성이 커진다고 한다.

또한 타입스크립트는 오류에 대한 메세지를 정확하게 명시해줌으로써 어디 부분이 정확히 잘못된 건지를 인지할 수 있다.

아직은 겪어보지 못해서 중요성을 알기는 힘들지만, 시간이 지나면 지날수록 타입스크립트에 대한 중요성이 커지고 있으니 배워보자.

---

- 타입스크립트 설치법

1. 타입스크립트 컴파일러 설치

npm install -g typescript

타입스크립트는 자바스크립트와 달리 브라우저에서 사용하려면 파일을 한번 변환시켜주는 컴파일의 과정을 거쳐야한다.

오류가 나온다면 node 와 npm을 최신버전으로 업데이트 해준다! 그것도 안된다면 sudo 를 앞에 붙여서 설치해준다.

2. 파일명.ts 로 파일 생성

이 파일 안에 ts 코드들을 작성해준다.

3. tsconfig.json 파일 생성

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs"
    "strictNullChecks": true
  }
}

tsconfig.json 파일안에는 ts파일을 js파일로 변환 시킬때의 옵션값들이 들어간다.

target은 어떤 자바스크립트 버전으로 변환시켜줄것인지, module은 js 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳이다.

commonjs는 require 문법 es2015, esnext는 import 문법을 사용한다.

4. tsc-w 를 통해서 자동으로 ts코드 js 코드로 변환

tsc -w 

5. ts 코드 작성

let 이름: string = "kim"; // 변수에 타입지정
이름 = 123;

string을 지정해야하는데, number를 지정했다는 에러가 나온다.

---

🔍 그 밖의 컴파일러 옵션들

{
 "compilerOptions": {
  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

---

🔍 리액트에서 설치하기

- 기존 리액트 프로젝트에서 설치하기

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

- 새로운 리액트 프로젝트에 설치하기

npx create-react-app my-app --template typescript

---