Frontend ๊ฐœ๋ฐœ์ž - hyo.loui

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ - Type Alias (ํƒ€์ž… ๋ณ„์นญ) ๋ณธ๋ฌธ

Typescript

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ - Type Alias (ํƒ€์ž… ๋ณ„์นญ)

hyo.loui 2023. 1. 18. 10:27

๐ŸŽฏ๋ชฉ์  :

TS Type Alias (ํƒ€์ž… ๋ณ„์นญ), ์ •๋ฆฌ ๋ฐ ๋ณต์Šต

 


1. Type Alias ?

ํƒ€์ž…์„ ๋ฏธ๋ฆฌ ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ ์„ ์–ธํ•ด ๋‘” ํ›„

ํ•„์š”ํ•œ ๊ณณ์—์„œ ๋ณ„์นญ์„ ํ˜ธ์ถœํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

// Type Alias

type Hero = {
  name: string;
  power: number;
  height: number;
  gender: "๋‚จ" | "์—ฌ";
};

Hero ๋ผ๋Š” ํƒ€์ž…์˜ ๋ณ„์นญ!


2. ํƒ€์ž… ๋ณ„์นญ์˜ ํ˜•ํƒœ

// Type Alias

type Hero = {
  name: string;
  power: number;
  height: number;
  gender: "๋‚จ" | "์—ฌ";
};

3. ํƒ€์ž… ๋ณ„์นญ์˜ ์ ์šฉ

const hero1: Hero = {
  name: "์Šˆํผ๋งจ",
  power: 100,
  height: 100,
  gender: "๋‚จ",
};

 

๐Ÿงช๋‚˜์˜ ์‹คํ—˜์‹ค

gender์— "๋‚จ" ํ˜น์€ "์—ฌ" ๋ผ๋Š” ํ…์ŠคํŠธ๋ฐ–์— ๋“ค์–ด์˜ฌ ์ˆ˜ ์—†๋‹ค!


4. ํƒ€์ž… ๋ณ„์นญ์˜ ์†์„ฑ๋“ค ํ˜ธ์ถœ

const printHero = (hero: Hero) => {
  console.log(hero.name, hero.power, hero.gender);
};

printHero(hero1); // ์Šˆํผ๋งจ 100 ๋‚จ

 


 

 ์ตœ์ข… ์ •๋ฆฌ 

  1. ํƒ€์ž… ์–ผ๋ผ์ด์–ด์Šค๋Š” ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ key: value(type) ๊ฐ€ ์ €์žฅ๋œ๋‹ค
  2. ํƒ€์ž…์„ ํ•œ๋ฒˆ ์ •์˜ํ•˜๊ณ  ํ•„์š”ํ•œ ๊ณณ์— ๋ฐ˜๋ณตํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค
  3. ์žฅ์ : ์ž‘์„ฑํ•ด์•ผ ํ•  ์ฝ”๋“œ ์–‘์„ ์ค„์ผ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ฝ”๋“œ๊ฐ€ ๊ฐ„๊ฒฐํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฝ๋‹ค