์์ ์ ์ธ์ ๊ฐ ๋ฉด์ ์ ๋ณด๋ฉด์ ๋ค์๋ ์ง๋ฌธ ์ค์ ํ๋์ด๋ค.
"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๋ฅผ ์ฐ๊ณ ์๋ค.
'๊ฐ๋ฐ > 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 |