TypeScript | 기초 문법과 기본 셋팅

타입스크립트를 쓰는 이유

프로젝트가 커지면서 type과 관련된 버그들이 많이 발생한다.
타입스크립트는 엄격한 타입룰을 갖고 있기 때문에 에러 메세지가 더 정확해져서 비교적 쉽게 버그를 고칠 수 있다.

타입스크립트 설치

👉 리액트 파일을 이미 설치한 경우

yarn add --save typescript @types/node @types/react @types/react-dom @types/jest

👉 리액트 파일을 새로 설치하는 경우

yarn create react-app 파일명 --template typescript

컴파일 하기

타입스크립트 파일들을 js 파일로 변환할 때, 세부 설정을 할 수 있는 tsconfig.json 파일을 생성한다.

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
    }
}

위 코드를 붙여넣는다.

---

{
 "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문 이상하면 에러내기 
 }
}

👉 tsconfig

기초 문법

let 이름 :string = 'kim'

변수를 만들 때 타입 지정이 가능하다. 변수명 :타입명

---

👉 타입으로 쓸 수 있는 것들

string number boolean bigint null undefined [] {}

---

let 이름 :string[] = ['kim', 'park']
let 나이 :{ age : number } = { age :30 }

배열(array) 혹은 객체(object) 자료의 타입 지정

---

let 이름 :string | number = 'kim'

이름이라는 변수에 여러 타입의 데이터가 들어올 수 있다면 |기호로 or 연산자를 표현할 수 있다.

---

type NameType = string | number
let 이름 :nameType = 'kim'

type NameType = 'kim' | 'park'
let 이름 :NameType = 'kim'

type 키워드로 타입을 변수처럼 담아서 사용할 수 있다.

---

function 함수명(x :number) :number{
  return x * 2
}

함수는 파라미터와 return 값이 어떤 타입일지 지정이 가능하다.

function 함수명(x :number | string) {
  return x * 2
}

변수의 타입이 확실하지 않기 때문에 연산이 불가능하다.

function 함수명(x :number | string) {
  if (typeof x === 'number') {
    return x * 2
  }
}

이렇게 항상 타입이 무엇인지 미리 체크해야 사용이 가능하다.

---