Type vs Interface
ํ์ต ํค์๋
ํ์ ๋ณ์นญ(Type)
์ธํฐํ์ด์ค(interface)
ํ์ ๋ณ์นญ(Type) vs ์ธํฐํ์ด์ค(interface)
ํ์
๋ณ์นญ
๋ณ์๋ฅผ ์ ์ธํ๋ฏ ํ์ ์ ๋ณ๋๋ก ์ ์ํ ์ ์๋ค.
type ํ์ ์ด๋ฆ = ํ์
ํ์ ์ ์ด๋ฆ์ ๋๋ฌธ์๋ก ์ง์
type TGender = 'female' | 'male';
type TUser = {
name: string;
age: number;
gender: TGender; // ๐๐ป type๋ณ์นญ ์์ ๋๋ค๋ฅธ type๋ณ์นญ์ผ๋ก ์ ์ฉ์ด ๊ฐ๋ฅํ๋ค.
};
const user1: TUser = {
name: 'ํ๊ธธ๋',
age: 20,
};
๐จ ๋์ผํ ์ค์ฝํ ๋ด์์๋ ๋์ผํ ์ด๋ฆ์ ํ์ ๋ณ์นญ์ ์ ์ธํ๋๊ฒ์ ๋ถ๊ฐ๋ฅํ๋ค!
type TUser = {
name: string;
age: number;
};
type TUser = {
// โ ๋์ผํ ์ด๋ฆ์ด ํ์
์ง์ ์ ์๋๋ค.
};
type TUser = {
name: string;
age: number;
};
function Test() {
type TUser = {
// โ
์ค์ฝํ๊ฐ ๋ค๋ฅด๋ฉด ๋์ผํ ์ด๋ฆ ์ฌ์ฉ ๊ฐ๋ฅ
name: string;
address: string;
};
const user: TUser = {
name: 'ํ๊ธธ๋',
address: '์์ธํน๋ณ์',
};
}
๐จ ํ์ ์ ๋ฆฌํฐ๋ด๋ก ์ง์ ํด๋๋ค๋ฉด?
type TGender = 'female' | 'male';
type TUserPick = {
name: string;
age: number;
gender?: TGender; // ๐๐ป ํ์
์ 'female' | 'male' ๋ผ๊ณ ๋ฆฌํฐ๋ด ๋ฐฉ์์ผ๋ก ์ง์
};
const user1 = {
name: '์ด๋์',
age: 30,
gender: 'female', // ๐๐ป ํ์
์ถ๋ก ์ ์ํด ํ์
์ string ์ง์
};
const user2: TUserPick = user1; // ๐จ gender์ ํ์
์ด ๋ง์ง ์์, error
ํ์
๋ณ์นญ์ ํ์ฅ
&
์ฐ์ฐ์๋ฅผ ์ด์ฉํ ํ์ฅ
type Person = {
name: string;
age: number;
};
type MyWorker = Person & {
// & ์ฐ์ฐ์๋ฅผ ํตํด ํ์
ํ์ฅ
company: string;
readonly position: string; // ํด๋น ํค์๋๊ฐ ๋ถ๊ฒ๋๋ฉด ๊ฐ์ ์ฝ์ด์ค๋๊ฑด ๋์ง๋ง, ๋ณ๊ฒฝํ๋๊ฑด ํ ์ ์๋ค.
getMoney: (amount: number) => number;
};
type Employ = Person & MyWorker; // ์๋ก์ด ํ์
์ ์์ฑํด์ & ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ ํ์ฅ๋ฒ
โ ์ฝ๊ธฐ์ ์ฉ readonly : ํด๋น ํค์๋๊ฐ ๋ถ์ด๋ฉด ๊ฐ์ ์ฝ๋๊ฑด, ๊ฐ์ฒด์ value ๊ฐ ๋ณ๊ฒฝํ๋๊ฑด ํ ์ ์๋ค.
interface Person {
readonly name: string;
age?: number;
}
const person: Person = {
name: '๊น์ฒ ์',
// age: 27,
};
person.name = 'ํ๊ธธ๋'; // โ
์ธํฐํ์ด์ค
ํ์ ๋ณ์นญ๊ณผ ๋์ผํ๊ฒ ํ์ ์ ์ด๋ฆ์ ์ง์ด์ฃผ๋ ๋ ๋ค๋ฅธ ๋ฌธ๋ฒ
์์ํ์ ์ ์ง์ ํ ์ ์๊ณ ,
๊ฐ์ฒด
ํ์ ๋ง ์ง์ ๊ฐ๋ฅinterface ํ์ ์ด๋ฆ {}
ํ์ ์ ์ด๋ฆ์ ๋๋ฌธ์๋ก ์ง์
interface Person {
name: string;
age: number;
}
โญ๏ธ ๋์ผํ ์ค์ฝํ ๋ด์์๋ ๋์ผํ ์ด๋ฆ์ ์ธํฐํ์ด์ค ์ ์ธ์ด ๊ฐ๋ฅํ๋ค!
interface IBox {
width: number;
height: number;
}
interface IBox {
shape: string;
}
const boxModel2: IBox = {
width: 20,
height: 30,
shape: '๋ค๋ชจ',
};
์ธํฐํ์ด์ค์ ํ์ฅ
&
์ฐ์ฐ์๋ฅผ ํ์ฉํ ํ์ฅ
interface IPerson {
name: string;
age: number;
}
interface IWorker {
company: string;
readonly position: string;
getMoney: (amount: number) => number;
}
const employee: IWorker & IPerson = {
name: '์ด๋์',
age: 30,
company: 'google',
position: 'teacher',
getMoney: (amount: number) => {
return amount;
},
};
extends
๋ฅผ ์ฌ์ฉํ ํ์ฅ
interface IUser {
name: string;
age: number;
}
interface IUserAddress extends IUser {
code: string;
address: string;
}
const userAddress: IUserAddress = {
name: '๊น์ฒ ์',
age: 20,
code: '13456',
address: '์์ธํน๋ณ์ ๊ฐ๋จ๊ตฌ',
};
๋ค์คํ์ฅ
,
๋ฅผ ์ฌ์ฉํ ํ์ฅ
interface IUser {
name: string;
age: number;
}
interface IWorker {
company: string;
readonly position: string;
getMoney: (amount: number) => number;
}
interface IUserAddress extends IUser, IWorker {
// ํ์
์ ํ์ฅํ ๋ extends๋ฅผ ํตํด ํ์ฅํ๋ค. ( , ๋ฅผ ํตํด ํ์ฅ ๊ฐ๋ฅ )
code: string;
address: string;
}
const userAddress: IUserAddress = {
name: '๊น์ฒ ์',
age: 20,
code: '13456',
address: '์์ธํน๋ณ์ ๊ฐ๋จ๊ตฌ',
company: 'google',
position: 'teacher',
getMoney: (amount: number) => {
return amount;
},
};
ํ์
๋ณ์นญ(Type) vs ์ธํฐํ์ด์ค(interface)
์ ์ธ๋ฐฉ์์ ์ฐจ์ด
ํ์ฅ๋ฐฉ์์ ์ฐจ์ด
๐คฅ ๊ฐ๋ฐ์์ ์ทจํฅ์ ๋ฐ๋ผ ์ฌ์ฉํ๋ ๋ฐฉ์์ด ๋ค๋ฅผ๋ฟ ๋๊ฐ์ง์ ํฐ ์ฐจ์ด๋ ์๋ค.
๐ ์ฐธ๊ณ
Last updated