타입스크립트(TS, TypeScript) 공부 1

0. tsconfig.json

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

- ts -> js 변경 및 ts 에러식별 옵션 적용

tsc -w

- 해당 명령어를 통해 ts -> js 파일로 자동 컴파일 가능

 

1. 타입스크립트 사용 명령어

npm install -g typescript

- 타입스크립트 컴파일러 설치 시 사용 명령어

 

1-1. React에서 타입스크립트 적용하는 법

npx create-react-app <프로젝트명> --template typescript

- 새로운 프로젝트 생성 시 적용하기

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

- 기존 프로젝트에 타입스크립트 적용하는 법

 

1-2. Vue에서 타입스크립트 적용하는 법

vue add typescript

- vue에서 타입스크립트 라이브러리 설치

<script lang="ts">
  
</script>

- lang 옵션을 켜두고 사용하면 사용 가

 

2. 타입스크립트 타입 적용 방법

let 이름: string = "마르코";
let 나이: number = 9;

- 변수 선언 후 :(콜론)을 이용하여 타입 지정

- 언어의 자료형에 대해 공부하고 적용해보도록 합시다.

- 자료형 참고자료 : https://nowsun.tistory.com/7

JavaScript 개념 알고 가기

type Name = string;
type Age = number;

let 이름: Name = "마르코";
let 나이: Age = 9;

- 타입을 만들어서 필요한 타입으로 지정하는 방식도 사용 가능

let 노래: { 제목: string, 가수: string | number } = { 제목: "노래", 가수: "자이언티" };

- 오브젝트도 다음과 같이 타입 지정 가능

let 노래: { 제목: string, 가수?: string | number } = { 제목: "노래"};

- ?를 통해 해당 키가 들어있지 않아도 동작하도록 지정 가능

 

type 문자배열 = string[]
type 숫자배열 = number[]

- 다음과 같은 방식으로 배열 타입 지정

 

function 함수(x?: number): void {
  if (x !== undefined) {
    console.log(x * 2)
  }
}

- 함수 타입지정 방법

- 괄호 안에 파라미터에 타입 지정

- 블록 지정 전에 type 지정으로 return 값의 타입 지정 가능

- void의 경우 반환값이 없는 함수 일 때 사용

- ? 를 통해 파라미터가 있을 때와 없을 때로 나뉘어 적용 (union type으로 undefined 값을 포함하여 인식)

 

3. union type

let 이름: string | number = 'kim';
let 나이: (string | number) = 100;

- 다음과 같이 | 연산자를 이용하여 2가지 이상 type을 지정하여 사용가능

 

4. any, unknown type

let 이름: any = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

- any의 경우 모든 타입이 들어갈 수 있음

- 타입 지정 해제 문법이기 때문에 타입을 마구 바꿔도 에러가 나지 않음

- 나중에 버그 조치에 추적이 어려움 (타입스크립트를 쓰는 이유가...)

- 비상시 쓰는 변수 타입체크 해제 기능 용도로 사용

 

let 이름: unknown = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

- unknown type도 any와 동일하게 모든 타입이 들어갈 수 있음

- 어떤 타입을 넣더라도 unknown type을 유지하기 때문에 다른용도로 사용에 에러 발생

- 아직 뭘 넣을지 모르겠는 경우 unknown 타입을 이용하여 관리할 것

 

5. Type Narrowing

typeof x === 'number'

- typeof 를 이용하여 해당 변수의 타입의 형태를 반환 가능

function 함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

- 다음과 같이 함수의 파라미터가 다양하게 들어올 경우 if문 등으로 타입을 하나로 정의해주는 것

- 받는 타입에 따라 엄격하게 관리하여 연산 및 반환을 할 수 있도록 해야함

 

6. Type Assertion

function 함수(x :number | string){ 
    return (x as number) + 1 
}

- as를 이용하여 type을 number처럼 인식시킴

- 해당 함수에서 실제 연산은 string으로 계산하지만, 공식이 number처럼 가능하도록 해줌

- 사용 용도

* 임시로 에러 해결용으로 사용

* 어떤 타입이 들어올지 명확히 알고있는데 컴파일 에러가 방해할 때 사용