기본 타입지정

변수

let 이름 :string = 'kim'

배열, 객체

변수를 만들 때 타입지정이 가능합니다.
변수명 : 타입명 이렇게 씁니다.
타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있습니다.

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

array 혹은 object 자료는 이렇게 타입지정이 가능합니다.

타입 or 연산자 사용

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

이 변수에 여러가지 타입의 데이터가 들어올 수 있다면
| 기호를 이용해 or 연산자를 표현할 수 있습니다.
위 예제는 변수에 숫자 혹은 문자를 집어넣을 수 있게 됩니다.

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

literal type

type 키워드를 이용해 타입을 변수처럼 담아서 사용가능합니다.

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

string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능합니다.
저렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'park'만 들어올 수 있습니다.
literal type이라고 부릅니다.

함수 타입지정

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

함수는 파라미터와 return 값이 어떤 타입일지 지정가능합니다.
실수로 다른 타입이 파라미터로 들어오거나 return될 경우 에러를 내줍니다.
함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크할 수 있는 타입입니다.

tuple

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

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

object 타입 변수 담기, 선택사항 타입 설정

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

object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능합니다.

type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방합니다. 차이점은 별로 없습니다.
특정 속성이 선택사항이면 물음표를 기입가능합니다.

index signature

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

object안에 어떤 속성이 들어갈지 아직 모를 때 전부 싸잡아서 타입지정 가능

출처

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