[코딩애플] 타입스크립트 타입 지정 방법

변수 타입 지정하기

일반 타입 지정

let 이름 :string = 'kim' //string, number, boolean, bigint, null, undefined,[], {}

여러가지 타입 지정

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

---

object 타입 지정

let 나이 :{ age : number } = { age : number }

한꺼번에 타입 지정하기

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

어떤 속성이 들어갈지 모를 때 사용 가능하다.

---

array 타입 지정

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

generic : array 자료 타입 지정

let 이름 :Array<string> = ['kim', 'park']

tuple : array 자료 (순서 포함) 타입  지정

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

여러가지 타입을 함께 가질 수 있는 배열이다. 요소의 타입과 개수가 고정된 배열을 생성할 수 있다. tuple은 그다지 권장되지 않는다.

---

함수 파라미터, 리턴 타입 지정

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

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

---

class 타입 지정

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

---

오류가 나는 경우

변수 타입이 확실하지 않을 때 연산 실행

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

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

타입이 무엇인지 체크하는 narrowing 또는 assertion 문법을 사용해야 연산할 수 있다. 위는 narrowing 문법.

assertion 문법

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

//가능
function 함수명(x :number | string) {
  let array :number[] = [];
  array[0] = x as number; //assertion
}

assertion 문법은 남발하지 말고 용도를 잘 파악하자.

1. Narrowing 할 때 쓴다. 위처럼 유니온타입이 있을 때 narrowing하는 용도로 쓰지 않고 string으로 되어있는걸 number로 바꾸는 게 아니다.
2. 무슨 타입이 들어올지 100% 확실할 때 쓴다.
3. 비상용이나 디버깅용으로 쓰고 그냥 쓰지 말자.

---

팁

특정 속성이 선택사항이면 물음표를 기입한다.

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

//*** 물음표는 undefined를 추가해 union 타입으로 두는 것과 동일하다.
function 함수명(x :number | undefined) {
  return x * 2
}

(중요) 물음표를 기입하면 undefined를 추가해 union타입으로 두는 것과 동일하다.

literal type : 원하는 타입을 만들 수 있다.

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

---

출처 : 코딩애플 https://codingapple.com/ / TypeScript Documentation https://www.typescriptlang.org/docs/handbook/2/objects.html