๐Ÿคทโ€โ™€๏ธ ๊ฐœ๋…๊ณต๋ถ€: 3. Typescript๊ฐ€ ๋ญ˜๊นŒ? (2) ( interface, type alias, enum, Generic, Utility Types(Pick, Omit, Exclude)...)

Ko Seoyoungยท2021๋…„ 3์›” 9์ผ
0
post-thumbnail
post-custom-banner

Type interface

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ ์ธํ„ฐํŽ˜์ด์Šค๋Š” ํƒ€์ž… ์ด๋ฆ„ ์ง€์ •์— ์—ญํ• ์„ ๋ถ€์—ฌํ•˜๊ณ , ์ฝ”๋“œ ์•ˆ์ด๋‚˜ ๋ฐ–์—์„œ ๊ณ„์•ฝ์„ ์ •์˜ํ•˜๋Š” ๊ฐ•๋ ฅํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.

๊ณต์‹๋ฌธ์„œ์˜ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ธํ„ฐํŽ˜์ด์Šค์˜ ์—ญํ• ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

  • SquareConfig์— ์ •์˜๋˜์ง€ ์•Š๋Š” clor ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค.

  • ?์ด ๋ถ™์€๊ฒฝ์šฐ optional properties๋กœ ํ•„์ˆ˜์ ์œผ๋กœ ๋„˜๊ฒจ์ฃผ์ง€ ์•Š์•„๋„ ๋˜๋Š” ์†์„ฑ์„ ๋งํ•œ๋‹ค.

readonly ์†์„ฑ?

๋ณ€์ˆ˜(variables)๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”(์žฌํ• ๋‹น ๋ถˆ๊ฐ€๋Šฅ) ์ƒ์ˆ˜๋ฉด const ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ readonly๋Š” ๋ณ€ํ•˜์ง€ ์•Š๊ณ  ์˜ค์ง ์ฝ๊ธฐ๋งŒ ๊ฐ€๋Šฅํ•œ ์†์„ฑ(properties)์ด๋‹ค

Function Types

์ด๋ ‡๊ฒŒ ํ•จ์ˆ˜ ์ธํ„ฐํŽ˜์ด์Šค ์ง€์ •๊ฐ€๋Šฅ(์ธ์ž๋ช…์€ ๊ฐ™์ง€ ์•Š์•„๋„ ๋จ)

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;

mySearch = function (source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
};

Class Type๋„ ์ง€์ • ๊ฐ€๋Šฅ

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) {}
}

Extends๋กœ ์ธํ„ฐํŽ˜์ด์Šค ํ™•์žฅ ๊ฐ€๋Šฅ

interface Shape {
  color: string;
}

interface PenStroke {
  penWidth: number;
}

interface Square extends Shape, PenStroke {
  sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

Type alias

alias๋Š” ๊ฐ€๋ช…์ด๋ผ๋Š” ๋œป, ์ฆ‰ type alias๋Š” ํƒ€์ž…์— ๋˜ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

interface์™€ ๋น„์Šทํ•˜์ง€๋งŒ primitives, unions, tuples, ๋‹ค๋ฅธ ํƒ€์ž…๋“ค๋„ ์ด๋ฆ„์„ ์ง€์„ ์ˆ˜ ์žˆ๋‹ค(union: number|string ๊ฐ™์€๊ฑฐ)

aliasingํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์‚ฌ์‹ค์ƒ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์กด์žฌํ•˜๋Š” ํ•ด๋‹น ํƒ€์ž…์— ์ƒˆ๋กœ์šด ์ด๋ฆ„์„ ์ง“๋Š”๊ฒƒ์ด๋‹ค.

interface์ฒ˜๋Ÿผ ์ œ๋„ˆ๋ฆญํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค: ๋‹ค์Œ๊ณผ ๊ฐ™์ด T๋ผ๋Š” type ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Œ

type Container<T> = { value: T };

type Tree<T> = {
  value: T;
  left?: Tree<T>;
  right?: Tree<T>;
};

interface vs type?

์ฐธ๊ณ ๋งํฌ

์•„๋‹ˆ ๋‘๊ฐœ ๋˜‘๊ฐ™์€๊ฑฐ ์•„๋‹ˆ๋ƒ โ†’ ๋ฏธ๋ฌ˜ํ•œ ์ฐจ์ด๊ฐ€ ์žˆ์ง€๋งŒ ๋Œ€๋ถ€๋ถ„์˜ ์ƒํ™ฉ์—์„œ ๊ฑฐ์˜ ๋น„์Šทํ•˜๋ฏ€๋กœ ๊ทธ๋ƒฅ ์“ฐ๊ณ  ์‹ถ์€๊ฑฐ ์“ฐ๋ฉด๋œ๋‹ค๊ณ  ํ•œ๋‹ค(https://microsoft.github.io/TypeScript-New-Handbook/everything/#interface-vs-alias)

์œ„ ๋ธ”๋กœ๊ทธ์— ๋”ฐ๋ฅด๋ฉด ๋ณดํ†ต interface๋Š” ๊ณต์šฉ api ์ž‘์„ฑ์— ์ž์ฃผ ์‚ฌ์šฉ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. (์šฐ๋ฆฌ ํšŒ์‚ฌ์—์„œ๋„ ๋””๋น„ ๋ชจ๋ธ๊ณผ ๊ด€๋ จ๋œ ๊ณต์šฉ Object ํƒ€์ž…์„ ์ธํ„ฐํŽ˜์ด์Šค๋กœ ์ง€์ •ํ•˜๊ณ  ์žˆ๋‹ค. (User, Item, Post ๋“ฑ))

๐Ÿ‘‰ interface๋Š” ํ™•์žฅ ๊ฐ€๋Šฅ(์†์„ฑ์ถ”๊ฐ€ ๊ฐ€๋Šฅ), type์€ ์ค‘๋ณต๋˜๋Š” ํƒ€์ž… ์„ ์–ธ ๋ถˆ๊ฐ€๋Šฅ


Enums

์—ด๊ฑฐํ˜•์€ ๊ด€๋ จ ๊ฐ’ ๋ชจ์Œ์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. c, java์™€ ๊ฐ™์€ ๋งŽ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋“ค์€ enum์„ ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ํฌํ•จํ•˜๊ณ  ์žˆ์ง€๋งŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ทธ๋ ‡์ง€ ์•Š๋‹ค. ๋Œ€์‹ , ํƒ€์ž…์Šคํฌ๋ฆฝ์Šค๋ฅผ ํ†ตํ•ด ์—ด๊ฑฐํ˜•์„ ์„ ์–ธํ•  ์ˆ˜์žˆ๋‹ค.

enum CardSuit {
    Clubs,
    Diamonds,
    Hearts,
    Spades,
}

// Sample usage
var card = CardSuit.Clubs

// Safety
card = 'not a member of card suit' // Error : `CardSuit`์ด ์—ด๊ฑฐํ˜•์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ž์—ด์„ ํ• ๋‹นํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค

์—ด๊ฑฐํ˜•์ด ์กด์žฌํ•˜๋Š” ์ด์œ ๋Š” ๋” ์ง๊ด€์ ์ธ ์ด๋ฆ„์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด์„œ์ด๋‹ค

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์—ด๊ฑฐํ˜•์€ ์ˆซ์ž๊ฐ€ ๊ธฐ๋ณธ์ด๊ณ  0๋ถ€ํ„ฐ ์‹œ์ž‘ํ•œ๋‹ค

enum Color {
    Red, // 0
    Green, // 1
    Blue, // 2
}
var col = Color.Red
col = 0 // Effectively same as Color.Red

Generics

Generic์˜ ์ฃผ๋œ ๋™๊ธฐ: ๋ฉค๋ฒ„ ๊ฐ„์— ์˜๋ฏธ ์žˆ๋Š” ํƒ€์ž… ์ œ์•ฝ์„ ๋‘๊ธฐ ์œ„ํ•ด์„œ

ํƒ€์ž… ์ œ์•ฝ์„ ๋‘˜ ์ˆ˜ ์žˆ๋Š” ๋ฉค๋ฒ„:

  • Class ์ธ์Šคํ„ด์Šค ๋ฉค๋ฒ„
  • Class ๋ฉ”์†Œ๋“œ
  • ํ•จ์ˆ˜ ์ธ์ž
  • ํ•จ์ˆ˜ ๋ฆฌํ„ด ๊ฐ’

์ œ๋„ˆ๋ฆญ ex)

๋‹ค์Œ์€ ๊ทธ๋ƒฅ ๊ฐ‘์ž๊ธฐ ์ƒ๊ฐ๋‚œ ํ•จ์ˆ˜๋กœ, ์ž…๋ ฅ๋œ ๋ฐฐ์—ด์˜ ๊ธธ์ด์˜ 2๋ฐฐ์˜ ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์ด ์ œ๋„ˆ๋ฆญ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ํƒ€์ž…์ด ๋‹ค๋ฅธ ๊ฒฝ์šฐ ์ค‘๋ณต๋œ ๋กœ์ง์„ ๊ฐ–๋Š” ํ•จ์ˆ˜๋ฅผ ์—ฌ๋Ÿฌ๋ฒˆ ์„ ์–ธํ•ด์•ผํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์ œ๋„ˆ๋ฆญ์„ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. (ํƒ€์ž…์„ ์ธ์ž๋กœ ๋„˜๊ธฐ๋Š” ๊ฐœ๋…์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜๋„ ์žˆ์„ ๋“ฏ ์‹ถ๋‹ค.)

function doubledLengthOfNumberArray(arg: number[]): number {
  return arg.length * 2;
}

function doubledLengthOfStringArray(arg: string[]): number {
  return arg.length * 2;
}

// --> ์ œ๋„ˆ๋ฆญ ์‚ฌ์šฉ
function doubledLengthOfArray<T>(arg: T[]): number {
  return arg.length * 2;
}

const result1 = doubledLength<string>(["a","b","c"]); // 6
const result2 = doubledLength<string>([1,3,5,7,9]) // 10

Utility Types

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ๊ณต๋™์˜ types๋ฅผ ๋ณ€ํ˜•ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” Utility Types๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

  • Partial<Type>
  • Required<Type>
  • Readonly<Type>
  • Record<Keys, Type>
  • Pick<Type, Keys>
  • Omit<Type, Keys>
    โ—๏ธ์ฃผ์˜ํ• ์ : ์‹ค์ œ๋กœ ๊ฐ’์ด ์—†์–ด์ง€๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ํƒ€์ž…์ด ๊ทธ๋ ‡๋‹ค๋Š”๊ฑฐ (์˜ˆ์‹œ์ฝ”๋“œ..ใ„ฑ)
  • Exclude<Type, ExcludedUnion>

์ด์™ธ์—๋„ Extract, NonNullable, Parameters, ConstructorParameters, ReturnType ๋“ฑ์˜ ๋‹ค์–‘ํ•œ Utility Type์ด ์กด์žฌํ•œ๋‹ค.

๊ณต์‹๋ฌธ์„œ ์ฐธ๊ณ : https://www.typescriptlang.org/docs/handbook/utility-types.html


์ฐธ๊ณ ์ž๋ฃŒ

Type interface

๋•ํƒ€์ดํ•‘์ด๋ž€

Type alias

Enums

profile
Web Frontend Developer ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป #React #Nextjs #ApolloClient
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€