home

Interface์™€ Type alias

๊ธ€ ๋ถ„๋ฅ˜
sub
ํ‚ค์›Œ๋“œ
typescript
์ƒ์„ฑ์ผ
2022/07/09 06:27
์ตœ๊ทผ ์ˆ˜์ •์ผ
2023/04/10 00:36
์ž‘์„ฑ์ค‘
ย โ†’ ๋น„๊ต์  / ์ƒ๋Œ€์  ๋” ์ข‹๋‹ค๊ณ  ์ƒ๊ฐ ๋˜๋Š” ๊ฒฝ์šฐ, ๋‘˜๋‹ค ์žˆ๋Š”๊ฒฝ์šฐ ๋ฌด์Šน๋ถ€
ย โ†’ ๋น„๊ต์  / ์ƒ๋Œ€์  ๋ณ„๋กœ ์•ˆ์ข‹๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋Š” ๊ฒฝ์šฐ

๋“ค์–ด๊ฐ€๊ธฐ์ „์—

โ€ข
์ด์ „์—๋Š” ์ข€๋” ์ฐจ์ด๊ฐ€ ๋ช…ํ™•ํ–ˆ์Œ, ~~๋Š” ์—๋Ÿฌ ์ •๋ณด๊ฐ€ ์•ˆ๋œฌ๋‹ค ๋“ฑ๋“ฑ.
โ€ข
TS ๋ฒ„์ „์ด ์—…๋ฐ์ดํŠธ๋˜๋ฉด ๋ ์ˆ˜๋ก Interface์™€ Type alias์ฐจ์ด๋Š” ์ค„์–ด๋“ค๊ณ  ์žˆ์Œ.
โ€ข
์—…๋ฐ์ดํŠธ๋ฅผ ๊ฑฐ๋“ญํ•˜๋ฉฐ ๋ฐ”๋€Œ๋Š” ๋‚ด์šฉ๋“ค์ด ๋งŽ์Œ

Type Alias?

โ€ข
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ ํƒ€์ž…์ธ string, number, booleanโ€ฆ
โ€ข
type ํ‚ค์›Œ๋“œ๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ์Œ.

์„ ์–ธ ๋ณ‘ํ•ฉ(Declaration Merging)

Interface

interface InterfaceName { property1: string } interface InterfaceName { property2: string }
TypeScript
๋ณต์‚ฌ
โ€ข
๊ฐ™์€ ์ด๋ฆ„์˜ interface๋ฅผ ๋‘๋ฒˆ ์„ ์–ธํ•  ๊ฒฝ์šฐ ์ž๋™์œผ๋กœ ๋ณ‘ํ•ฉ ๋˜์–ด ๊ฒฐ๊ณผ์ ์œผ๋กœ InterfaceName์€ property1, property2๋ฅผ ๋‹ค ๊ฐ€์ง€๊ฒŒ ๋จ

Type

type TypeName ={ property1: string } // ์—๋Ÿฌ -> ๊ฐ™์€์ด๋ฆ„์˜ ํƒ€์ž… ์„ ์–ธ ๋ถˆ๊ฐ€๋Šฅ type TypeName ={ property2: string }
TypeScript
๋ณต์‚ฌ
โ€ข
์ธํ„ฐํŽ˜์ด์Šค์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ๊ฐ™์€์ด๋ฆ„์œผ๋กœ ์„ ์–ธํ•œ๋‹ค๊ณ  ์ž๋™์œผ๋กœ ํƒ€์ž…์ด ํ™•์žฅ๋˜์ง€ ์•Š์Œ

๋ช…์‹œ์  ๋ณ‘ํ•ฉ

Interface

interface Interface1 { property1: string } interface Interface2 extends Interface { property2: string }
TypeScript
๋ณต์‚ฌ
โ€ข
extends๋ฅผ ์ด์šฉํ•ด ๋‹ค๋ฅธ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ƒ์† ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ - ํด๋ž˜์Šค๋„ ๊ฐ€๋Šฅ

Type alias

// Interface1, Interface2 type Type1 = { property1: string } type Type2 = { property2: string } type NewType = Type1 & Type2; type AnotherNewType = Interface1 & Interface2
TypeScript
๋ณต์‚ฌ
โ€ข
Intersection - &๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‘๊ฐœ์˜ ํƒ€์ž…์„ ์ด์šฉํ•ด ํ•˜๋‚˜์˜ ํƒ€์ž…์œผ๋กœ ์ƒ์„ฑ ๊ฐ€๋Šฅ
โ€ข
์ด๋ฏธ ์„ ์–ธ๋œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ด์šฉํ•˜์—ฌ Intersection ๊ฐ€๋Šฅ โ†’ Type alias๋ฅผ ์ด์šฉํ•˜์—ฌ ์ธํ„ฐํŽ˜์ด์Šค์— Interserction์€ ๋‹น์—ฐํžˆ ๋ถˆ๊ฐ€๋Šฅ(์ง€์› ์•ˆํ•˜๋‹ˆ๊นŒ..)

Union

Interface

โ€ข
์ธํ„ฐํŽ˜์ด์Šค๋Š” union ๋ถˆ๊ฐ€ โ†’ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋ฌถ์–ด union์€ ๊ฐ€๋Šฅ

Type alias

// NewType์€ string ๋˜๋Š” number๊ฐ€ ๋  ์ˆ˜ ์žˆ์Œ type NewType = string | number; interface Interface1 { baseProperty: number; property1: string; } interface Interface2 extends Interface { baseProperty: string; property2: number; } // AnotherNewType์˜ ๊ฒฝ์šฐ type AnotherNewType = Interface1 | Interface2
TypeScript
๋ณต์‚ฌ
โ€ข
A ๋˜๋Š” B ํƒ€์ž… ์ผ ์ˆ˜ ์žˆ๋‹ค ์— ๋Œ€ํ•œ ์ •์˜
โ€ข
interface ๋˜ํ•œ union type์„ ์ƒ์„ฑ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ฝ”๋“œ์—์„œ๋Š” ๊ณตํ†ต๋œ ํƒ€์ž…์œผ๋กœ๋งŒ ์ถ”๋ก ๋จ
โ€ข
์œ„ ์ฝ”๋“œ์˜ AnotherNewType์˜ ๊ฒฝ์šฐ Type Narrow๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ baseProperty๋งŒ ์ ‘๊ทผ๊ฐ€๋Šฅ โ†’ TypeNarrow๋กœ ์ ‘๊ทผํ•ด์•ผํ•จ

๊ฒฐ๋ก 

TS ๊ณต์‹ ๋ฌธ์„œ์˜ ์ถ”์ฒœ

โ€ข
๊ณต์‹ ๋ฌธ์„œ์—์„œ๋Š” Interface๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  type์ด ํ•„์š” ํ• ๋•Œ๋งŒ type ์‚ฌ์šฉ์„ ์ถ”์ฒœํ•จ โ†’ ๋ณธ์ธ๊ณผ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” Union Type์„ ์“ธ์ผ์ด ๋งŽ์•˜์Œ

์„ฑ๋Šฅ

โ€ข
์ธํ„ฐํŽ˜์ด์Šค๋Š” ์บ์‹œ๋˜์–ด ์„ฑ๋Šฅ์ด ๋”๋น ๋ฆ„