[TypeScript]_Literal&Union&InterSection

hanseungjune·2023년 3월 4일
0

비전공자의 IT준비

목록 보기
51/68
post-thumbnail

📌 코드 해석

// userName1 변수를 선언하고 "Bob" 문자열을 할당합니다.
const userName1 = "Bob";

// userName2 변수를 선언하고, 문자열 또는 숫자 타입을 가질 수 있도록 string | number 타입으로 지정합니다.
let userName2: string | number = "Tom";

// userName2 변수에 숫자 3을 할당합니다. 이는 userName2가 string | number 타입이므로 허용됩니다.
userName2 = 3;

// Job이라는 새로운 타입을 정의합니다. 이 타입은 "police", "developer", "teacher" 중 하나의 값을 가질 수 있습니다.
type Job = "police" | "developer" | "teacher";

// User 인터페이스를 정의합니다. 이 인터페이스는 name 속성과 job 속성을 가지며, job 속성의 값은 Job 타입으로 지정합니다.
interface User {
  name: string;
  job: Job;
}

// user 변수를 User 타입으로 지정하고, 값을 할당합니다.
const user: User = {
  name: "Bob",
  job: "developer",
};

// HighSchoolStudent 인터페이스를 정의합니다. 이 인터페이스는 name 속성과 grade 속성을 가지며, grade 속성의 값은 1, 2, 3 중 하나의 값을 가질 수 있습니다.
interface HighSchoolStudent {
  name: number | string;
  grade: 1 | 2 | 3;
}

해당 코드에서 리터럴 타입은 다음과 같습니다.

  • Job 타입: "police", "developer", "teacher" 중 하나의 값을 가질 수 있습니다.
  • HighSchoolStudent 인터페이스의 grade 속성: 1, 2, 3 중 하나의 값을 가질 수 있습니다.
    리터럴 타입은 값의 종류를 제한하고, 특정 값만 허용하도록 강제할 수 있어 유용합니다.
// Car 인터페이스
interface Car {
  name: "car";
  color: string;
  start(): void;
}

// Mobile 인터페이스
interface Mobile {
  name: "mobile";
  color: string;
  call(): void;
}

// gift 매개변수는 Car 또는 Mobile 인터페이스 타입 중 하나를 받습니다.
function getGift(gift: Car | Mobile) {
  console.log(gift.color); // gift의 color 속성 출력
  if (gift.name === "car") { // gift의 name 속성이 "car"이면
    gift.start(); // Car 인터페이스에 정의된 start 메서드 호출
  } else { // 그 외에는
    gift.call(); // Mobile 인터페이스에 정의된 call 메서드 호출
  }
}

여기서 Car | Mobile유니온 타입입니다. 유니온 타입은 | 기호를 이용해 두 개 이상의 타입을 합친 타입으로, Car와 Mobile 인터페이스 타입 중 하나를 선택적으로 받을 수 있습니다. getGift 함수의 매개변수 gift는 Car 인터페이스의 속성인 name, color, start 중 하나 또는 Mobile 인터페이스의 속성인 name, color, call 중 하나를 가질 수 있습니다.

interface Car {
  name: string;
  start(): void;
}

// Toy 인터페이스 정의
interface Toy {
  name: string;
  color: string;
  price: number;
}

// Car와 Toy 인터페이스를 교차하여 toyCar 객체 정의
const toyCar: Toy & Car = {
  name: "타요", // name은 string 타입으로 Toy와 Car 인터페이스에 모두 정의되어 있음
  start() {}, // start 메서드는 void를 반환하는 Car 인터페이스에 정의되어 있음
  color: "blue", // color와 price는 Toy 인터페이스에 정의되어 있음
  price: 1000,
};

위 코드에서 교차 타입Toy & Car 부분입니다. 교차 타입은 & 연산자를 사용하여 두 개 이상의 타입을 하나로 합치는 타입입니다. 이 경우 toyCar 객체는 Car와 Toy 인터페이스의 모든 속성을 가지고 있어야 합니다. 즉, name과 start 속성은 Car 인터페이스에서, color와 price 속성은 Toy 인터페이스에서 가져온 것입니다.

profile
필요하다면 공부하는 개발자, 한승준

0개의 댓글