타입스크립트와 자바스크립트의 관계 이해하기

• 타입스크립트는 문법적으로도 자바스크립트의 상위집합.
• 기존코드를 그대로 유지하면서 일부분에만 타입스크립트 적용이 가능하여 기존에 존재하는 자바스크립트 코드를 타입스크립트로 마이그레이션하는데 엄청난 이점이 존재.
• 타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것.
• 타입스크립트를 쓰면 에러메시지도 보다 명확해진다.

존재하는 React 프로젝트에서 Typescript를 설치하는 방법

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

기초 사용방법

let name : string = 'blake'
배열
let name: string[] = ['blake','ashley','nikki']
객체
let age : {age:number} = {age:number}
여러 타입의 데이터가 들어올때
let name :string | number = 'blake'
type 키워드를 이용해 타입을 변수처럼 담아서 사용가능

type nameType = string | number;

let name :nameType = 'blake'

함수는 parameter와 return값이 어떤 타입일지 지정가능

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

타입스크립트는 현재 변수 타입이 확실 치 않으면, 원하는 연산이 불가할 수 있음, 항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion문법을 사용해야함

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

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

type Member = [number, boolean];
let john:Member = [100, false]

array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 tuple 타입을 사용. 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 됨.