Vue3 - 3.Type Fundamentals

Vue3-3.Type Fundamentals

Javascript의 대표적인 타입(Primitive + NonPrimitive) : String, Number, Boolean, Array, Function, Object, Null, Undefined, ...

Typescript는 Javascript보다 더 많은 타입을 가지고 있다

• any : 모든 타입을 허용하며 type checking을 비활성화 시킨다.
• tuple : 미리 설정된 타입의 데이터들을 가진 고정된 길이의 배열.
• enum : 값의 집합에 친숙한 이름을 짓게 해준다.

  • enum ArrowKeys {
      Up, //1
      Down, //2
      Left=10, // 10
      Right=5, //4
    }

• unknown, never, ... 등등이 있음
• Object 타입 정의 방법
  • 직접 정의
  • let person : { name: string, age: number, activeAvenger: boolean, powers: string[], } = { name: 'Peter Parker', age: 20, activeAvenger: true, powers:['wall-crawl', 'spider-sense'] }

Type and Interface

type 은 데이터가 어떤 구조를 가져야 할지 정의해준다.

• type buttonType = 'primary' | 'secondary' | 'success' | 'danger' let buttonStyles: buttonType = 'primary' // O let buttonStyles : buttonType = 'error' // X

interface object의 타입을 정의하기 위해 사용한다.

• interface Hero {
    name : string;
    age : number;
    activeAvenger : boolean;
    powers : string[];
    universe : ComicUniverse; // type ComicUniverse = 'Marvel' | 'DC'
  }
  
  let person:Hero = {
    name: 'Peter Parker',
    age: 20,
    activeAvenger : true,
    powers: ['wall-crawl', 'spider-sense'],
    universe : 'Marvel'
  }

  Object를 제외한 데이터 타입 정의에는 Type을 쓰도록하자.