Type vs Interface

ํ•™์Šต ํ‚ค์›Œ๋“œ

  • ํƒ€์ž…๋ณ„์นญ(Type)

  • ์ธํ„ฐํŽ˜์ด์Šค(interface)

  • ํƒ€์ž…๋ณ„์นญ(Type) vs ์ธํ„ฐํŽ˜์ด์Šค(interface)

ํƒ€์ž…๋ณ„์นญ

  • ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋“ฏ ํƒ€์ž…์„ ๋ณ„๋„๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • type ํƒ€์ž…์ด๋ฆ„ = ํƒ€์ž… ํƒ€์ž…์˜ ์ด๋ฆ„์€ ๋Œ€๋ฌธ์ž๋กœ ์ง€์ •

type TGender = 'female' | 'male';
type TUser = {
  name: string;
  age: number;
  gender: TGender; // ๐Ÿ‘ˆ๐Ÿป type๋ณ„์นญ ์•ˆ์— ๋˜๋‹ค๋ฅธ type๋ณ„์นญ์œผ๋กœ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
};

const user1: TUser = {
  name: 'ํ™๊ธธ๋™',
  age: 20,
};

๐Ÿšจ ๋™์ผํ•œ ์Šค์ฝ”ํ”„ ๋‚ด์—์„œ๋Š” ๋™์ผํ•œ ์ด๋ฆ„์˜ ํƒ€์ž…๋ณ„์นญ์„ ์„ ์–ธํ•˜๋Š”๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค!

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

type TUser = {
  // โŽ ๋™์ผํ•œ ์ด๋ฆ„์ด ํƒ€์ž… ์ง€์ •์€ ์•ˆ๋œ๋‹ค.
};
type TUser = {
  name: string;
  age: number;
};

function Test() {
  type TUser = {
    // โœ… ์Šค์ฝ”ํ”„๊ฐ€ ๋‹ค๋ฅด๋ฉด ๋™์ผํ•œ ์ด๋ฆ„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
    name: string;
    address: string;
  };

  const user: TUser = {
    name: 'ํ™๊ธธ๋™',
    address: '์„œ์šธํŠน๋ณ„์‹œ',
  };
}

๐Ÿšจ ํƒ€์ž…์„ ๋ฆฌํ„ฐ๋Ÿด๋กœ ์ง€์ •ํ•ด๋‘”๋‹ค๋ฉด?

type TGender = 'female' | 'male';
type TUserPick = {
  name: string;
  age: number;
  gender?: TGender; // ๐Ÿ‘ˆ๐Ÿป  ํƒ€์ž…์„ 'female' | 'male' ๋ผ๊ณ  ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹์œผ๋กœ ์ง€์ •
};

const user1 = {
  name: '์ด๋‚˜์˜',
  age: 30,
  gender: 'female', // ๐Ÿ‘ˆ๐Ÿป ํƒ€์ž…์ถ”๋ก ์— ์˜ํ•ด ํƒ€์ž…์€ string ์ง€์ •
};

const user2: TUserPick = user1; // ๐Ÿšจ gender์˜ ํƒ€์ž…์ด ๋งž์ง€ ์•Š์•„, error

ํƒ€์ž…๋ณ„์นญ์˜ ํ™•์žฅ

  • & ์—ฐ์‚ฐ์ž๋ฅผ ์ด์šฉํ•œ ํ™•์žฅ

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

type MyWorker = Person & {
  // & ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด ํƒ€์ž… ํ™•์žฅ
  company: string;
  readonly position: string; // ํ•ด๋‹น ํ‚ค์›Œ๋“œ๊ฐ€ ๋ถ™๊ฒŒ๋˜๋ฉด ๊ฐ’์„ ์ฝ์–ด์˜ค๋Š”๊ฑด ๋˜์ง€๋งŒ, ๋ณ€๊ฒฝํ•˜๋Š”๊ฑด ํ•  ์ˆ˜ ์—†๋‹ค.
  getMoney: (amount: number) => number;
};

type Employ = Person & MyWorker; // ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ์ƒ์„ฑํ•ด์„œ & ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•œ ํ™•์žฅ๋ฒ•

โœ… ์ฝ๊ธฐ์ „์šฉ readonly : ํ•ด๋‹น ํ‚ค์›Œ๋“œ๊ฐ€ ๋ถ™์ด๋ฉด ๊ฐ’์„ ์ฝ๋Š”๊ฑด, ๊ฐ์ฒด์˜ value ๊ฐ’ ๋ณ€๊ฒฝํ•˜๋Š”๊ฑด ํ•  ์ˆ˜ ์—†๋‹ค.

interface Person {
  readonly name: string;
  age?: number;
}

const person: Person = {
  name: '๊น€์ฒ ์ˆ˜',
  // age: 27,
};

person.name = 'ํ™๊ธธ๋™'; // โŒ

์ธํ„ฐํŽ˜์ด์Šค

  • ํƒ€์ž… ๋ณ„์นญ๊ณผ ๋™์ผํ•˜๊ฒŒ ํƒ€์ž…์— ์ด๋ฆ„์„ ์ง€์–ด์ฃผ๋Š” ๋˜ ๋‹ค๋ฅธ ๋ฌธ๋ฒ•

  • ์›์‹œํƒ€์ž…์€ ์ง€์ •ํ•  ์ˆ˜ ์—†๊ณ , ๊ฐ์ฒด ํƒ€์ž…๋งŒ ์ง€์ • ๊ฐ€๋Šฅ

  • interface ํƒ€์ž…์ด๋ฆ„ {} ํƒ€์ž…์˜ ์ด๋ฆ„์€ ๋Œ€๋ฌธ์ž๋กœ ์ง€์ •

interface Person {
  name: string;
  age: number;
}

โญ๏ธ ๋™์ผํ•œ ์Šค์ฝ”ํ”„ ๋‚ด์—์„œ๋Š” ๋™์ผํ•œ ์ด๋ฆ„์˜ ์ธํ„ฐํŽ˜์ด์Šค ์„ ์–ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค!

interface IBox {
  width: number;
  height: number;
}

interface IBox {
  shape: string;
}

const boxModel2: IBox = {
  width: 20,
  height: 30,
  shape: '๋„ค๋ชจ',
};

์ธํ„ฐํŽ˜์ด์Šค์˜ ํ™•์žฅ

  • & ์—ฐ์‚ฐ์ž๋ฅผ ํ™œ์šฉํ•œ ํ™•์žฅ

interface IPerson {
  name: string;
  age: number;
}

interface IWorker {
  company: string;
  readonly position: string;
  getMoney: (amount: number) => number;
}

const employee: IWorker & IPerson = {
  name: '์ด๋‚˜์˜',
  age: 30,
  company: 'google',
  position: 'teacher',
  getMoney: (amount: number) => {
    return amount;
  },
};
  • extends๋ฅผ ์‚ฌ์šฉํ•œ ํ™•์žฅ

interface IUser {
  name: string;
  age: number;
}

interface IUserAddress extends IUser {
  code: string;
  address: string;
}

const userAddress: IUserAddress = {
  name: '๊น€์ฒ ์ˆ˜',
  age: 20,
  code: '13456',
  address: '์„œ์šธํŠน๋ณ„์‹œ ๊ฐ•๋‚จ๊ตฌ',
};

๋‹ค์ค‘ํ™•์žฅ

  • ,๋ฅผ ์‚ฌ์šฉํ•œ ํ™•์žฅ

interface IUser {
  name: string;
  age: number;
}

interface IWorker {
  company: string;
  readonly position: string;
  getMoney: (amount: number) => number;
}

interface IUserAddress extends IUser, IWorker {
  // ํƒ€์ž…์„ ํ™•์žฅํ•  ๋•Œ extends๋ฅผ ํ†ตํ•ด ํ™•์žฅํ•œ๋‹ค. ( , ๋ฅผ ํ†ตํ•ด ํ™•์žฅ ๊ฐ€๋Šฅ )
  code: string;
  address: string;
}

const userAddress: IUserAddress = {
  name: '๊น€์ฒ ์ˆ˜',
  age: 20,
  code: '13456',
  address: '์„œ์šธํŠน๋ณ„์‹œ ๊ฐ•๋‚จ๊ตฌ',
  company: 'google',
  position: 'teacher',
  getMoney: (amount: number) => {
    return amount;
  },
};

ํƒ€์ž…๋ณ„์นญ(Type) vs ์ธํ„ฐํŽ˜์ด์Šค(interface)

  • ์„ ์–ธ๋ฐฉ์‹์˜ ์ฐจ์ด

  • ํ™•์žฅ๋ฐฉ์‹์˜ ์ฐจ์ด

๐Ÿคฅ ๊ฐœ๋ฐœ์ž์˜ ์ทจํ–ฅ์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์ด ๋‹ค๋ฅผ๋ฟ ๋‘๊ฐ€์ง€์˜ ํฐ ์ฐจ์ด๋Š” ์—†๋‹ค.

๐Ÿ”— ์ฐธ๊ณ 

Last updated