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

2024. 9. 18. 01:47ยท ๊ฐœ๋ฐœ/JavaScript
๋ชฉ์ฐจ
  1. ๊ณตํ†ต์ 
  2. type
  3. interface
  4. ์ฐจ์ด์ 
  5. ๊ฒฐ๋ก 
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

'๊ฐœ๋ฐœ > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

forEach vs map() ์ฐจ์ด์   (0) 2024.05.18
e.preventDefault() ์™€ stopPropagation() ์˜ ์ฐจ์ด์   (0) 2023.11.21
localStorage vs Cookie ๋งŒ๋ฃŒ์‹œ๊ฐ„ ์„ค์ •ํ•˜๊ธฐ  (0) 2023.04.12
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] js vs jsx ? ํ™•์žฅ์ž ๋ญ๊ฐ€ ๋‹ค๋ฅด์ง€?  (0) 2022.12.30
Fetch API - ์ด๋ฏธ์ง€ fetchingํ•˜๊ธฐ  (0) 2022.09.28
  1. ๊ณตํ†ต์ 
  2. type
  3. interface
  4. ์ฐจ์ด์ 
  5. ๊ฒฐ๋ก 
'๊ฐœ๋ฐœ/JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • forEach vs map() ์ฐจ์ด์ 
  • e.preventDefault() ์™€ stopPropagation() ์˜ ์ฐจ์ด์ 
  • localStorage vs Cookie ๋งŒ๋ฃŒ์‹œ๊ฐ„ ์„ค์ •ํ•˜๊ธฐ
  • [์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] js vs jsx ? ํ™•์žฅ์ž ๋ญ๊ฐ€ ๋‹ค๋ฅด์ง€?
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Frontend Developer
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
Ming devlog
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ

๊ณต์ง€์‚ฌํ•ญ

  • About Ming ๐Ÿฐ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (261)
    • ๊ฐœ๋ฐœ (255)
      • ๐Ÿ“ TIL (58)
      • โŒ ์˜ค๋ฅ˜ ๋…ธํŠธ (23)
      • React (23)
      • Next.js (11)
      • React-Native (6)
      • JavaScript (10)
      • Flutter (19)
      • Database (1)
      • ๐Ÿ’ฌ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ (21)
      • ๐Ÿ“š English (9)
      • Etc... (25)
      • โ›ต ํ•ญํ•ด99 (49)
    • ๐Ÿ’ป Dev (6)
      • ๐Ÿ“ TIL (4)
      • ๐Ÿ’ฌ Algorithm (1)
      • Etc... (1)

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ์ฝ”๋”ฉ๊ณต๋ถ€
  • ์˜์–ด๊ณต๋ถ€
  • react
  • ๋ฆฌ์•กํŠธ๋„ค์ดํ‹ฐ๋ธŒ
  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • ๊ฐœ๋ฐœ์ž์ผ๊ธฐ
  • Firebase
  • ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ
  • ํ•ญํ•ด99
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • todaywhatidid
  • ์ฝ”ํ…Œ๊ณต๋ถ€
  • TIL
  • ์ด์ฝ”๋…ธ๋ฏธ์ŠคํŠธ
  • react-native
  • ์ฝ”ํ…Œ
  • ReactNative
  • leetcode
  • ๊ฐœ๋ฐœ์žํšŒ๊ณ 
  • twid
  • ํ”Œ๋Ÿฌํ„ฐ
  • flutter
  • ๋ถ€ํŠธ์บ ํ”„
  • nextjs
  • Git
  • ๋ฆฌ์•กํŠธ
  • ์ฝ”๋”ฉํ…Œ์ŠคํŠธ
  • github
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

250x250
hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.1
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
type vs interface ๋Š” ๋ญ๊ฐ€ ๋‹ค๋ฅด์ง€?
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.