타입스크립트 설치

1. 일반 HTML CSS JS 웹개발시

1. nodejs 설치(최신버전)
2. VScode 에디터 준비
3. 터미널오픈 후 npm install -g typescript
   • 오류 시 참고
4. 코드를 짤 폴더를 만든다.
5. 폴더에 .ts로 끝나는 파일 만든다.
   • 여기서 웹브라우저는 ts 파일을 알아듣지 못하기 때문에 js파일로 변환해야한다.
6. tsconfig.json 생성 후 내용 작성 (ts->js 컴파일시 옵션설정가능)
   • tsc --init 으로 생성 가능

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

7. 터미널을 열고 tsc -w를 입력하면 자동으로 변환해준다.
8. HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 .ts가 아니라 변환된 .js 파일을 사용하면 된다.

<script src="변환된파일.js"></script>```

2. React 프로젝트에서 사용 시

1. 이미 있는 React 프로젝트에 설치 시
   npm install --save typescript @types/node @types/react @types/react-dom @types/jest
2. React 프로젝트를 새로 만들 시
   npx create-react-app my-app --template typescript

기본 문법

변수 생성 시 타입 지정 가능

let 이름 :string = 'kim'

변수명 : 타입명으로 쓴다.
타입으로는 string, number, boolean, bigint, null, undefined, [ ], { } 등이 있다.

타입을 변수처럼 사용 가능

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

나만의 타입 만들기 가능

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

이름이라는 변수엔 'kim'과 'park'만 들어올 수 있다. literal type이라고 부른다.

함수의 파라미터와 리턴 값 타입 정의

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

함수의 return 타입으로 void를 설정 가능한데 return이 없는지 체크할 수 있는 타입이다.

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

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

타입스크립트의 함수는 변수의 타입이 확실하지 않으면 마음대로 연산 할 수 없다.
따라서 항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야한다.

Object 타입

type MyObject = {
  name? : string,
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

type 대신 interface를 사용해도 무방하다. 특정 속성이 선택사항이면 물음표를 사용해도 된다.

type MyObject = {
  [key :string] : number,
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

object의 모든 key값의 타입을 정의할 수도 있다. index signature라고 한다.

Class 타입

class Person {
  name;
  constructor(name :string){
    this.name = name;
  }
}

class도 타입설정이 가능한데 중괄호 내에 미리 name처럼 변수를 만들어놔야 constructor 안에서 this.name처럼 사용가능하다.

enum

enum Os {
  Window = 'win',
  Ios = 'ios',
  Android = 'and'
}

let myOs: Os;

myOs = Os.Window;

특정 값으로만 입력하게 강제하고 싶을 때, 그 값들이 공통점이 있을 때 사용한다.

아직 실제로 사용해보진 않아서 잘 모르겠다. typescript로 코드 짜는 걸 연습해보자.

참고문헌

https://codingapple.com/unit/how-to-install-typescript-in-local-vue-react/