TypeScript) 객체 리터럴

리터럴 타입

• 리터럴 타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 한다.
  타입스크립트에서 사용되는 리터럴 타입에는 다양한 종류가 있다.
• 문자열 리터럴 타입

let status : 'success' | 'error';
status = 'success';  // 유효
status = 'pending';  // 에러 : 'pending'은 허용되지 않음

• 숫자 리터럴 타입

let speed : 50|100|200;
speed = 100;  // 유효
speed = 150;  // 에러 : 150은 허용되지 않음

• 불리언 리터럴 타입

let isTrue : true;
isTrue = ture;  // 유효
isTrue = false;  // 에러 : false는 허용되지 않음

• 객체 리터럴 타입

let person : { name : 'John', age : 30 };
person = { name : 'John', age : 30 };  // 유효
person = { name : 'Alice', age : 30 };  // 에러 : 값이 일치해야함

• 타입 별칭

type CardinalDirection = 'North'|'East'|'South'|'West';
let direction: CardinalDirection;
direction = 'North';  // 유효
direction = 'Northeast';  // 에러 : 'Northeast'는 허용되지 않음

실제로 type키워드를 사용하면 type생성이 가능하다.

interface에 특정 프로퍼티(속성)의 타입을 정의 할때
enum을 사용하거나, type을 지정할 수 있지만 때론 값을 지정해서 넣을 수 있다.

interface WorkOut {
  id: number;
  name?: string;
  region?: RegionType;
  requipment?: 'machine' | 'free'; // 'machine', 'free'만 가능하도록 선언
  setPlay: (name: string) => void;
  getPlay?: () => void;
}

class playWorkout implements WorkOut {
  id: number;
  name: string;
  region: RegionType;
  requipment?: 'machine' | 'free'; // WorkOut 인터페이스 프로퍼티 선언

  // 생성자를 추가하여 필수 속성 초기화
  constructor(id: number, name: string, region: RegionType, requipment?: 'machine' | 'free') {
    this.id = id;
    this.name = name;
    this.region = region;
    this.requipment = requipment;
  }

  // setPlay 메서드 정의
  setPlay(name: string): void {
    this.name = name;
    console.log(`Workout: ${this.name}`);
  }

  // getPlay 메서드 정의 (선택적 메서드)
  getPlay?(): void {
    console.log(`Current Workout: ${this.name}`);
    console.log(`test : ${RegionType.Arms}`);
  }
}

// 객체 생성 시 필수 값 제공
const squatWorkout = new playWorkout(1, 'Squat', RegionType.Legs, 'free');
squatWorkout.setPlay('Deadlift');
squatWorkout.getPlay?.();

정리

• 리터럴 타입을 사용하면 좋은 점
  • 코드의 가독성이 높아진다.
  • 잘못된 값이 들어오는 것을 방지할 수 있다.

객체 타입을 지정하는 방법 복습해보기

const user = {
	name : 'seungsoo',
	age : 32
};

위 코드는 자바스크립트에서 사용했던 객체 생성 코드입니다.

이제 타입스크립트에서 객체를 생성하는 코드를 작성해보겠습니다.

const user : {name : string, age : number} = {
	name : 'seungsoo',
	age : 32
};

다소 문법이 헷갈릴 수 있다.. (매우 헷갈림..)

변수타입 변수명 : {각 프로퍼티의 타입} = { 데이터 값 };