๊ฐœ๋ฐœ/JavaScript

type vs interface ๋Š” ๋ญ๊ฐ€ ๋‹ค๋ฅด์ง€?

๋ฐ(Ming) ๐Ÿˆโ€โฌ› 2024. 9. 18. 01:47
728x90
๋ฐ˜์‘ํ˜•

์˜ˆ์ „์— ์–ธ์  ๊ฐ€ ๋ฉด์ ‘์„ ๋ณด๋ฉด์„œ ๋“ค์—ˆ๋˜ ์งˆ๋ฌธ ์ค‘์— ํ•˜๋‚˜์ด๋‹ค. 

 

"typescript์—์„œ type๊ณผ interface์˜ ์ฐจ์ด์ ์„ ์•„์‹œ๋‚˜์š”?"

 

๊ณตํ†ต์ 

type

ํƒ€์ž…์— ๋Œ€ํ•œ ์ด๋ฆ„์„ ์ง€์–ด์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•œ๋‹ค. 

type Home {
 living : string;
 bed : string;
}

 

interface

type๊ณผ ๋™์ผํ•˜๊ฒŒ ํƒ€์ž…์— ๋Œ€ํ•œ ์ด๋ฆ„์„ ์ง€์–ด์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•œ๋‹ค. 

interface Home{
 living: string;
 bed: string;
}

 

 

๋‘˜ ๋‹ค ํƒ€์ž…์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ• ์ค‘์— ํ•˜๋‚˜๋กœ ๊ต‰์žฅํžˆ ์œ ์‚ฌํ•˜๋‹ค. ๋‘˜ ์ค‘์— ํ•˜๋‚˜๋งŒ ์„ ํƒํ•ด์„œ ์‚ฌ์šฉํ•ด๋„ ๋˜์ง€๋งŒ ์ฐจ์ด์ ๋„ ์กด์žฌํ•œ๋‹ค. 

 

 

 

์ฐจ์ด์ 

 

1. ํ™•์žฅ ๋ฐฉ์‹ ๋น„๊ต 

 

interface ๋Š” extends๋ผ๋Š” ๊ฒƒ์„ ์‚ฌ์šฉํ•ด์„œ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ธฐ์กด์˜ interface์— ์ถ”๊ฐ€ํ•ด์„œ ํ™•์žฅ๋œ๋‹ค. 

interface Room {
 table : string;
}

interface Room extends Home{
 bedroom : string;
}

 

 

 

type ์€ & ์ด๋ผ๋Š” ์ธํ„ฐ์„น์…˜์„ ํ†ตํ•ด์„œ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๋‹ค. ์ƒ์†์„ ๋ฐ›๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๊ธฐ์กด ํƒ€์ž„์—์„œ ์ถ”๊ฐ€ํ‡ธ ํƒ€์ž„์„ ๊ฒฐํ•ฉํ•ด์„œ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค. 

type Room {
 table : string;
}

type Room & Home{
 bedroom : string;
}

 

2. ์ƒˆ ํ•„๋“œ ์ถ”๊ฐ€

interface๋Š” ๋™์ผํ•œ ์ด๋ฆ„์˜ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์„ ์–ตํ•ด์„œ ์ถ”๊ฐ€ํ•  ํƒ€์ž…๋งŒ ์ž‘์„ฑํ•˜๋ฉด ํ™•์žฅ๋œ๋‹ค. 

interface Room {
 table : string;
}

interface Room {
 bed: string;
}


interface Room {
 table: string;
 bed: string;
 }

 

type์€ ํ•œ๋ฒˆ ์ƒ์„ฑํ•œ ์ดํ›„์—๋Š” ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค. 

 

type Room {
 table : string;
}

type Room {
 bed: string;
}

//error

 

 

๊ฒฐ๋ก 

๊ฒฐ๊ณผ์ ์œผ๋กœ ๋‘ ๊ฐ€์ง€๋ฅผ ๋น„๊ตํ•ด๋ดค์„ ๋•Œ, ์–ด๋–ค ๊ฑธ ์‚ฌ์šฉํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค๋ฉด interface๋ฅผ ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ๊ณต์‹๋ฌธ์„œ์—์„œ ๊ถŒ์žฅํ•˜๊ธฐ๋„ํ•˜๊ณ  ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋Š” type์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ํ™•์žฅํ•˜๋Š” ๋ถ€๋ถ„์— ์žˆ์–ด์„œ interface๊ฐ€ ํŽธํ•œ ์ ๋„ ์žˆ๊ณ , ํ˜„์žฌ ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ์—์„œ๋„ interface๋ฅผ ์“ฐ๊ธฐ ์‹œ์ž‘ํ•ด์„œ ๋ชจ๋“  ํŒ€์›๋“ค๊ณผ ๋™์ผํ•˜๊ฒŒ interface๋ฅผ ์“ฐ๊ณ  ์žˆ๋‹ค. 







728x90
๋Œ“๊ธ€์ˆ˜0