4장 객체 타입

4.1 타입스크립트의 객체 타입

4.1.1 객체 리터럴 선언

let newcomer = {
  name: "Tommy",
  age: 30,
  position: "Frontend"
};

4.1.2 명시적 선언

interface Developer {
  name: string;
  age: number;
  position: string;
}

let newcomer: Developer = {
  name: "Tommy",
  age: 30,
  position: "Frontend"
};

4.2 타입 별칭으로 객체 타입 정의

4.2.1 기본 정의 방법

type MyString = string;
type MyNumber = number;
type MyUnion = string | null;
type MyObj = {a: 1} | {b: 2};
type MyTuple = [string, boolean];

type Developer = {
  name: string;
  age: number;
  job: string;
};

let myInfo: Developer = {
  name: "Wade",
  age: 24,
  job: "Developer"
};

function printDeveloper(developer: Developer): void {
  console.log(developer);
}

4.2.2 교차 타입

type Developer = {
  name: string;
  age: number;
  job: string;
};

type BackendDeveloper = {
  backendSkills: string[];
};

type FrontendDeveloper = {
  frontendSkills: string[];
};

type FullStackDeveloper = Developer & BackendDeveloper & FrontendDeveloper;

let myInfo: FullStackDeveloper = {
  name: "Wade",
  age: 24,
  job: "Full Stack Developer",
  backendSkills: ["Node.js", "Express"],
  frontendSkills: ["HTML", "CSS", "JavaScript"]
};

4.3 인터페이스로 객체 타입 정의

interface Student {
  name: string;
  studentID: number;
}

function attendanceCheck(student: Student): string {
  return `${person.name} attended.`;
}

const jason: Student = { name: "Jason", studentId: 1841021 };
attendanceCheck(jason); // 정상 동작

interface Shape {
  color: string;
}

interface Square extends Shape {
  height: number;
}

const square: Square = {
  color: "red",
  height: 10
};

interface Vehicle {
  start(): void;
  stop(): void;
}

interface ElectricVehicle extends Vehicle {
  charge(): void;
}

class ElectricCar implements ElectricVehicle {
  start() {
    // ...
  }

  stop() {
    // ...
  }

  charge() {
    // ...
  }
}

4.3.1 기본 정의 방법

interface Developer = {
  name: string;
  age: number;
  job: string;
};

let myInfo: Developer = {
  name: "Wade",
  age: 24,
  job: "Developer"
};

function printDeveloper(developer: Developer): void {
  console.log(developer);
}

4.3.2 인터페이스 확장하기/합치기

interface Developer {
  name: string;
  age: number;
  job: string;
}

interface FrontendDeveloper extends Developer {
  frontendSkills: string[];
}

interface BackendDeveloper extends Developer {
  backendSkills: string[];
}

interface FullStackDeveloper extends FrontendDeveloper, BackendDeveloper {
  // FullStackDeveloper를 위한 추가적인 프로퍼티나 메서드 정의 가능
}

let myInfo: FullStackDeveloper = {
  name: "Wade",
  age: 24,
  job: "Full Stack Developer",
  frontendSkills: ["HTML", "CSS", "JavaScript"],
  backendSkills: ["Node.js", "Express"]
};

4.4 구조적 타이핑

4.4.1 명목적 타이핑

type Pet {
  name: string;
}

type Dog {
  name: string;
}

let pet: Pet;
pet = new Dog(); // Error: 명목적 타이핑에서는 타입의 이름이 일치해야 함

interface Entity {
    name: string;
}

class Person implements Entity {
    constructor(public name: string, public age: number) {}
}

class Animal implements Entity {
    constructor(public name: string, public species: string) {}
}

function printEntity(entity: Entity) {
    console.log(`Entity Name: ${entity.name}`);
}

// Person 객체는 Entity 타입과 호환됩니다.
const person: Person = new Person("John Doe", 25);
printEntity(person);

// Animal 객체도 Entity 타입과 호환됩니다.
const animal: Animal = new Animal("Tiger", "Mammal");
printEntity(animal);

// 하지만 Person과 Animal은 서로 호환되지 않습니다.
// Error: 명목적 타이핑에서는 객체가 구조적으로 일치해야 함
// const entity1: Entity = new Person("Invalid Person", 30); // Error
// const entity2: Entity = new Animal("Invalid Animal", "Unknown"); // Error

4.4.2 구조적 타이핑

type Pet {
  name: string;
}

type Dog {
  name: string;
}

let pet: Pet;
pet = new Dog(); // OK: 같은 구조의 타입을 가진 두 객체 = 구조적 타이핑 

1) 덕 타이핑

만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.

class Duck {
    quack(): void {
        console.log("꽥꽥!");
    }
    feathers(): void {
        console.log("오리에게 흰색, 회색 깃털이 있습니다.");
    }
}

class Person {
    quack(): void {
        console.log("사람이 오리를 흉내 냅니다.");
    }
    feathers(): void {
        console.log("사람은 깃털은 없지만 털이 있습니다.");
    }
}

function inTheForest(duck: Duck): void {
    duck.quack();
    duck.feathers();
}

function game(): void {
    const donald: Duck = new Duck();
    const john: Person = new Person();
    inTheForest(donald);
    inTheForest(john); // Runtime Error: Person 타입은 Duck 타입과 호환되지 않음
}

2) 구조적 타이핑

4.5 타입 별칭과 인터페이스의 차이점

4.5.1 선언 병합

// 인터페이스 선언 병합
interface Developer {
  name: string;
  age: number;
  job: string;
}

interface Developer {
  frontendSkills: string[];
}

let myInfo: Developer = {
	name: "Wade",
	age: 24,
	job: "Frontend Developer",
	frontendSkills: ["HTML", "CSS", "JavaScript"],
};

// 타입 별칭 선업 병합 에러
type Developer = {
  name: string;
  age: number;
  job: string;
};

type Developer = {
  frontendSkills: string[]; // Error
};

4.5.2 확장과 유연성

// 인터페이스 extends
interface Person {
	name: string;
	age: number;
	job: string;
}

interface Developer extends Person {
	frontendSkills: string[];
}

let myInfo: Developer = {
	name: "Wade",
	age: 24,
	job: "Frontend Developer",
	frontendSkills: ["HTML", "CSS", "JavaScript"],
};

// 타입 별칭 인터섹션
type Person = {
	name: string;
	age: number;
	job: string;
};

type Stack = {
	frontendSkills: string[];
};

type Developer = Person & Stack;

let myInfo: Developer = {
	name: "Wade",
	age: 24,
	job: "Frontend Developer",
	frontendSkills: ["HTML", "CSS", "JavaScript"],
};

// 튜플
type Tuple = [number, string, boolean];

4.5.3 클래스 구현

interface Person {
	name: string;
	sound(): void;
}

class Developer implements Person {
	name: string;

	constructor(name: string) {
		this.name = name;
	}
	
	sound() {
	console.log("hello world");
	}
}

4.6 객체 타입의 호환성

4.6.1 객체 타입의 호환성

1) 객체 타입의 호환성

type Plant = {
        name: string;
        age: number;
    };

type Rose = {
        name: string;
        age: number;
        thorn: boolean;
    };

let plant: Plant = {
        name: "이름모를식물",
        age: 1,
    };

    let rose: Rose = {
        name: "장미",
        age: 3,
        thorn: true,
    };

plant = rose;
rose = plant; //Error

2) 객체 타입의 호환성과 객체의 구조적 타이핑

let plant: Plant = {
        name: "이름모를식물",
        age: 1,
    };

4.6.2 초과 프로퍼티 검사

type Movie = {
        name: string;
    };

type RomanceMovie = {
        name: string;
        happyEnding: boolean;
    };

let movie: Movie = {
				name:"TopGun:Maverick",
}

let romanceMovie: RomanceMovie = {
        name: "Titanic",
        happyEnding: false,
    };

let anotherRomanticMovie2: Movie = {
				name:"Pride&Prejudice",
				happyEnding: true, // Error { name: string; happyEnding: boolean; } 형식은
													 // 'Movie' 형식에 할당할 수 없습니다.
};

let anotherRomanceMovie2: Movie = romanceMovie;