[TS] ํ์ ์คํฌ๋ฆฝํธ - ํ์ ์ถ๋ก / ๋จ์ธ / ๊ฐ๋
ํ์ ์ถ๋ก
๊ธฐ๋ณธ
๐ก ํ์ ์ถ๋ก ์ด๋ ํ์ ์คํฌ๋ฆฝํธ๊ฐ ์ฝ๋๋ฅผ ํด์ํด ๋๊ฐ๋ ๋์์ ์๋ฏธํ๋ค.
์๋์ฒ๋ผ x
์ ๋ํ ํ์
์ ๋ฐ๋ก ์ง์ ํ์ง ์๋๋ผ๋ ๋ณ์ x
์ ์ซ์ 3
์ ํ ๋นํ์ผ๋ฏ๋ก number
ํ์
์ผ๋ก ๊ฐ์ฃผํ๋ค. ์ด์ฒ๋ผ ๋ณ์๋ฅผ ์ ์ธํ๊ฑฐ๋ ์ด๊ธฐํํ ๋ ํ์
์ด ์ถ๋ก ๋๋ค. ๋ณ์, ์์ฑ, ํจ์ ์ธ์์ ๊ธฐ๋ณธ ๊ฐ, ํจ์ ๋ฐํ ๊ฐ ๋ฑ์ ์ค์ ํ ๋๋ ํ์
์ถ๋ก ์ด ์ผ์ด๋๋ค.
let x = 3; // ๋ณ์๋ฅผ ์ ์ธํ๊ณ ํ ๋นํจ์ผ๋ก์ x๋ number ํ์
์ด๋ผ๋ ์ถ๋ก ์ด ์ผ์ด๋ฌ๋ค.
์๋ ์ฝ๋์์ DetailedDropdown
์ธํฐํ์ด์ค๋ extends
ํค์๋๋ฅผ ์ด์ฉํ์ผ๋ฏ๋ก Dropdown
์ธํฐํ์ด์ค์ ์์ฑ๋ ๊ฐ์ง๋ค. DetailedDropdown<number>
์ <number>
ํ์
์ DetailedDropdown
์ ์๋ <T>
๋ก ๋์ด๊ฐ ํ, ๋ค์ Dropdown<T>
์ธํฐํ์ด์ค์ <T>
๋ก ๋๊ฒจ์ ธ ์ต์ข
์ ์ผ๋ก Dropdown
์ ์๋ value: T
๋ number ํ์
์ ๊ฐ๋๋ค. ์ด๋ฐ ๊ณผ์ ์ ํตํด ํ์
์ถ๋ก ์ด ์ด๋ค์ง๊ธฐ ๋๋ฌธ์ value
์ number ํ์
์ด ์๋ ๋ค๋ฅธ ํ์
์ ํ ๋นํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
interface Dropdown<T> {
value: T; // ์ด๋ค ํ์
์ด๋ ์ฌ ์ ์์
title: string; // ๋ฌธ์์ด ํ์
์ผ๋ก ๊ณ ์
}
interface DetailedDropdown<T> extends Dropdown<T> {
description: string;
tag: T;
// extends ํค์๋๋ฅผ ์ฌ์ฉํ์ผ๋ฏ๋ก Dropdown ์ธํฐํ์ด์ค์ value, title๋ ๊ฐ์ง๋ค๊ณ ๋ณผ ์ ์๋ค.
}
const detailedItem: DetailedDropdown<number> = {
title: 'a',
description: 'a',
value: 'a', // Error
tag: 'a', // Error
};
Best Common Type (๊ฐ์ฅ ์ ์ ํ ํ์ )
ํ์ ์ ๋ณดํต ๋ช ๊ฐ์(่ฅๅนฒ) ํํ์ ์ฝ๋๋ฅผ ๋ฐํ์ผ๋ก ํ์ ์ ์ถ๋ก ํ๋ค. ์ด ํํ์์ ์ด์ฉํ์ฌ ๊ฐ์ฅ ๊ทผ์ ํ ํ์ ์ ์ถ๋ก ํ๋๋ฐ, ์ด ๊ทผ์ ํ ํ์ ์ Best Common Type์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
์๋ arr ๋ฐฐ์ด ์์์ ํ์
์ ์ถ๋ก ํ๊ธฐ ์ํด์ ๋ฐฐ์ด์ ์๋ ๊ฐ ์์๋ฅผ ์ดํด๋ด์ผ ํ๋ค. ์๋ ์ฝ๋์ ๋ฐฐ์ด์์ ๊ฐ ์์์ ํ์
์ number
์ null
๋ก ๊ตฌ๋ถ๋๋ค. ์ด๋ Best Common Type ์๊ณ ๋ฆฌ์ฆ์ผ๋ก ๋ค๋ฅธ ํ์
๋ค๊ณผ ๊ฐ์ฅ ์ ํธํํ๋ ํ์
์ ์ ์ ํ๋ ๊ฒ.
let arr = [0, 1, null];
๋ฌธ๋งฅ์์ ํ์ดํ
ํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ ์ถ๋ก ํ๋ ๋ ๋ค๋ฅธ ๋ฐฉ์์ ๋ฌธ๋งฅ์ผ๋ก ํ์ ์ ๊ฒฐ์ ํ๋ ๊ฒ์ด๋ค. ์ด ๋ฌธ๋งฅ์์ ํ์ดํ(ํ์ ๊ฒฐ์ )์ ์ฝ๋์ ์์น(๋ฌธ๋งฅ)๋ฅผ ๊ธฐ์ค์ผ๋ก ์ผ์ด๋๋ค.
์์ 1
์๋ ์ฝ๋์์ window.onmousedown
์ ํ ๋น๋๋ ํจ์์ ํ์
์ ์ถ๋ก ํ๊ธฐ ์ํด window.onmousedown
ํ์
์ ๊ฒ์ฌํ๋ค. ํ์
๊ฒ์ฌ๊ฐ ๋๋๋ฉด ํจ์ ํ์
์ด ๋ง์ฐ์ค ์ด๋ฒคํธ์ ๊ด๋ จ์๋ค๊ณ ์ถ๋ก ํ๊ธฐ ๋๋ฌธ์ mouseEvent
์ธ์์ button
์์ฑ์ ์์ง๋ง kangaroo
์์ฑ์ ์๋ค๊ณ ๊ฒฐ๋ก ์ง๋๋ค.
window.onmousedown = function (mouseEvent) {
console.log(mouseEvent.button); // OK
console.log(mouseEvent.kangaroo); // Error
};
์์ 2
์์ 1๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ํจ์๋ window.onscroll
์ ํ ๋น๋์๊ธฐ ๋๋ฌธ์ ํจ์ ์ธ์ uiEvent
๋ UIEvent๋ก ๊ฐ์ฃผํ๋ค. ๋๋ฌธ์ button
์์ฑ์ด ์๋ค๊ณ ์ถ๋ก ํ์ฌ uiEvent.button
์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ ๊ฒ.
window.onscroll = function (uiEvent) {
console.log(uiEvent.button); // Error!
};
์๋์ฒ๋ผ ํจ์๋ฅผ handler ๋ณ์์ ํ ๋นํ๋ฉด, ํจ์๊ฐ ํ ๋น๋๋ ๋ณ์๋ง์ผ๋ก๋ ํ์
์ ์ถ์ ํ๊ธฐ ์ด๋ ต๊ธฐ ๋๋ฌธ์ ์๋ฌด๋ฐ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๋๋ค. ์ฐธ๊ณ ๋ก noImplicitAny
์ต์
์ ์ฌ์ฉํ๋ค๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
const handler = function (uiEvent) {
console.log(uiEvent.button); // OK
};
ํ์ ์คํฌ๋ฆฝํธ์ ํ์ ์ฒดํน
ํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ฒดํฌ๋ ๊ฐ์ ํํ์ ๊ธฐ๋ฐํ์ฌ ์ด๋ค์ ธ์ผ ํ๋ค๊ณ ์งํฅํ๋ค. ์ด๋ฐ๊ฑธ Duck Typing ๋๋ Structural Subtyping์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
- Duck Typing: ๊ฐ์ฒด์ ๋ณ์ ๋ฐ ๋ฉ์๋์ ์งํฉ์ด ๊ฐ์ฒด ํ์ ์ ๊ฒฐ์ ํ๋ ๊ฒ์ ์๋ฏธ
- Structural Subtyping: ๊ฐ์ฒด์ ์ค์ ๊ตฌ์กฐ๋ ์ ์์ ๋ฐ๋ผ ํ์ ์ ๊ฒฐ์ ํ๋ ๊ฒ์ ์๋ฏธ
ํ์ ๋จ์ธ
๐ก ํ์ ๋จ์ธ์ `as` ํค์๋๋ฅผ ์ฌ์ฉํ๋ค.
ํ์
์คํฌ๋ฆฝํธ์์ ์ถ๋ก ํ๋ ๊ฐ๋ณด๋ค ๊ฐ๋ฐ์๊ฐ ํด๋น ๋ณ์๋ฅผ ๋ ์ ์๊ณ ์์ ๋ ๋ณ์์ ์ํ๋ ํ์
์ ๊ฐ์ ๋ก ๋ถ์ฌํ๋ ๊ฒ์ ๋งํ๋ค. ์๋ ์ฝ๋์์ TS๋ ๋ณ์ a
๋ฅผ any
๋ก ์ถ๋ก ํ๊ธฐ ๋๋ฌธ์ ๋ณ์ b
์ญ์ any
๋ก ์ถ๋ก ํ๋ค. ํ์ง๋ง ๊ฐ๋ฐ์ ์
์ฅ์์ b
๊ฐ number 10์ธ๊ฑธ ์๊ธฐ ๋๋ฌธ์ as
ํค์๋๋ฅผ ์ฌ์ฉํด ๊ฐ์ ๋ก assertion(๋จ์ธ)ํ ์ ์๋ค.
let a;
a = '20';
a = 10; // let a: any
let b = a as number;
ํ์
๋จ์ธ์ querySelector
getElementById
๊ฐ์ DOM API๋ฅผ ์กฐ์ํ ๋ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ค. ์๋์ฒ๋ผ ์ฟผ๋ฆฌ์
๋ ํฐ๋ก .container
ํด๋์ค๋ฅผ ์ ํํ ํ textContext
๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํ๋ฉด ๊ฐ์ฒด๊ฐ null
์ผ ์๋ ์๋ค๋ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. querySelector
์ฝ๋๋ฅผ ์คํํ๋ ์์ ์์ .container
ํด๋์ค๊ฐ ์๋ค๋ ๋ณด์ฅ์ ํ์ง ์์๊ธฐ ๋๋ฌธ์ ๊ทธ๋ฐ ๊ฒ.
const container = document.querySelector('.container');
container.textContext = 'Hello'; // error: Object is possibly null
์ด๋ฐ ์ด์ ๋ก ๋ณดํต ์๋์ฒ๋ผ null
์ ํ์
๊ฐ๋(Element
ํ์
์ด ์๋ค๊ณ ๋ณด์ฅ) ์ํค๋ ํจํด์ ์ฌ์ฉํ๋ค.
const container = document.querySelector('.container');
if (container) {
container.textContext = 'Hello';
}
๋ง์ฝ const container...
์ฝ๋๋ฅผ ์คํํ๋ ์์ ์ ํด๋น ํด๋์ค๊ฐ ๋ฌด์กฐ๊ฑด ์กด์ฌํ๋ค๊ณ ํ์ ํ๋ค๋ฉด as
ํค์๋๋ฅผ ์ด์ฉํด HTMLDivElement
๋ก ํ์
๋จ์ธ์ ํ๋ฉด ๋๋ค. ๊ทธ๋ผ null
ํ์
๋ณด์ฅ๊ฐ์ ์ ๊ฑฐ๋๋ค.
const container = document.querySelector('.container') as HTMLDivElement;
container.textContext = 'Hello';
ํ์ ๊ฐ๋
๐ก ์ ๋์จ ํ์ ์ ์ธ์๋ฅผ ์ฒ๋ฆฌํ ๋ ์ ํํ ์ด๋ค ํ์ ์ธ์ง ๊ฒ์ฌํด์ผ ํ ๋๊ฐ ์๋ค. ์ด๋ ๊ฐ ํ์ ์ ๋ถ๊ธฐ ์ฒ๋ฆฌํ์ฌ ํ์ ๋ณ๋ก ๋ก์ง์ ๋ถ๋ฆฌ(ํ์ ๋ฒ์๋ฅผ ์ขํ์ฃผ๋ ์์ )ํ๋ ํ์ ๊ฐ๋ ์์ ์ด ํ์ํ๋ค. ํ์ ๊ฐ๋๋ ํ์ ๋จ์ธ์ ๋ ๊น๋ํ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ํด์ค๋ค.
is ํค์๋
ํจ์ ํ๋ผ๋ฏธํฐ๋ก ์ ๋์จ ํ์ ์ด ์ง์ ๋๋ฉด ํ์ ์ด 2๊ฐ ์ด์์ด๊ธฐ ๋๋ฌธ์ ๊ณตํต ์์ฑ๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.
interface Dev {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function introduce(): Dev | Person {
return { name: 'Tony', age: 33, skill: 'JS' };
}
const tony = introduce(); // Dev | Person ์ธํฐํ์ด์ค์ ๊ณตํต ์์ฑ๋ง ์ฌ์ฉ ๊ฐ๋ฅ
console.log(tony.skill); // ts(2339) Error (Dev์ Person์ ๊ณตํต ์์ฑ์ธ name๋ง ์ ๊ทผ ๊ฐ๋ฅ)
skill
์์ฑ์ ์ฌ์ฉํ๊ธฐ ์ํด ํ์
๋จ์ธ(type assertion)์ ์ด์ฉํ ์ ์๋ค. ํ์ง๋ง ๋จ์ง 2๊ฐ์ ์์ฑ์ ์ฌ์ฉํ๊ธฐ ์ํด ํ์
๋จ์ธ์ ์ฌ์ฉํจ์ผ๋ก์จ ์ฝ๋๊ฐ ๊ธธ์ด์ง๋ ๋จ์ ์ด ๋ฐ์ํ๋ค.
// as ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ tony์ ํ์
์ Dev๋ผ๊ณ ๋จ์ธ
if ((tony as Dev).skill) {
const { skill } = tony as Dev;
console.log(skill); // 'JS'
// as ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ tony์ ํ์
์ Person๋ผ๊ณ ๋จ์ธ
} else if ((tony as Person).age) {
const { age } = tony as Person;
console.log(age); // 33
}
์ด๋ ์ฌ์ฉํ๋๊ฒ ๋ฐ๋ก ํ์
๊ฐ๋๋ค. ํ์
๊ฐ๋๋ ๊ฐ ํ์
์ ๋ถ๊ธฐ ์ฒ๋ฆฌํ์ฌ ํ์
๋ณ๋ก ๋ก์ง์ ๋ถ๋ฆฌํ๋ ์์
(ํ์
๋ฒ์๋ฅผ ์ขํ์ฃผ๋ ์์
)์ด๋ค. ํ์
๊ฐ๋๋ in
typeof
instanceof
๊ฐ์ ํค์๋๋ฅผ ์ด์ฉํ๊ฑฐ๋, ์ฌ์ฉ์ ์ ์ ํ์
๊ฐ๋ ํจ์๋ฅผ ๋ง๋ค์ด์ ์ฌ์ฉํ ์ ์๋ค.
ํ์
๊ฐ๋ ํจ์๋ “์ด๋ค ์ธ์๋ ์ด๋ค ํ์
์ด๋ค"๋ผ๋ ๊ฐ์ ๋ฆฌํดํ๋ ํจ์๋ก ํ์
์ด ๋ณต์กํ๊ฑฐ๋ ํ์
ํ๋จ ๋ก์ง์ ์ฌ์ฌ์ฉํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค. ํ์
๊ฐ๋ ํจ์๋ ๋ฆฌํด ํ์
์ parameterName is Type
ํ์์ผ๋ก ์ ์ํ๋ฉฐ, ํจ์๋ช
์ ๋ณดํต isTypeName
ํํ๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ค.
์๋ isDev
์ฌ์ฉ์ ์ ์ ํ์
๊ฐ๋ํจ์์ ๋ด๋ถ ๋ก์ง์ ํต๊ณผํ๋ฉด ์ธ์(target
)๋ก ๋๊ธด ๊ฐ์ ํ์
์ด Dev
์ธ์ง(true|false
) ์ฌ๋ถ๋ฅผ ๊ตฌ๋ถํด์ค๋ค. ์ฆ target
ํ๋ผ๋ฏธํฐ์ skill
์์ฑ์ด ์๋ค๋ฉด Dev
ํ์
์ผ๋ก ์ทจ๊ธํด์ skill
์์ฑ์ ์ฌ์ฉํ ์ ์๊ฒ๋๋ค.
// is ํค์๋๋ฅผ ์ฌ์ฉํด ํ์
๊ฐ๋ ํจ์ ์ ์(๋๊ฒจ ๋ฐ์ ํ๋ผ๋ฏธํฐ๊ฐ ํด๋น ํ์
์ธ์ง ํ์ธ)
function isDev(target: Dev | Person): target is Dev {
// target ๊ฐ์ฒด์ skill ์์ฑ์ด ์๋ค๋ฉด Dev ํ์
์ผ๋ก ์ทจ๊ธ(true)
return (target as Dev).skill !== undefined;
}
if (isDev(tony)) {
// Dev ์ธํฐํ์ด์ค์ name, skill ์์ฑ ์ฌ์ฉ ๊ฐ๋ฅ(Dev ํ์
์ผ๋ก ์ทจ๊ธ)
console.log(tony.skill); // 'JS"
} else {
// Person ์ธํฐํ์ด์ค์ name, age ์ฌ์ฉ ๊ฐ๋ฅ(Person ํ์
์ผ๋ก ์ทจ๊ธ)
console.log(tony.age); // 33
}
typeof ํค์๋
typeof
๋ ๋ณ์์ ๋ฐ์ดํฐ ํ์
์ ํ์ธํ ๋ ์ฌ์ฉํ๋ค. typeof ๋ณ์
ํํ๋ก ์ฌ์ฉํ๋ ๊ฒ ์ธ์, ์ด๋ฏธ ์ ์๋์ด ์๋ ๋ณ์(๊ฐ์ฒด ๋ฑ) ํ์
์ ์๋ก ์ ์ํ๋ ๋ณ์์ ๊ทธ๋๋ก ์ ์ฉํ๋ ๋ฐฉ์์ผ๋ก๋ ์ฌ์ฉํ ์ ์๋ค.
์๋ ์ฝ๋์์ typeof
ํค์๋๋ก smith
๊ฐ์ฒด ํ์
์ johan
๊ฐ์ฒด๋ก ๊ทธ๋๋ก ์ฎ๊ฒจ์์ ํ ๋นํ๋ค. smith
๊ฐ์ฒด์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ค๋ณด๋ฉด johan
๊ฐ์ฒด์ ๋์ผํ ํ์
์ ๊ฐ์ง๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
const johan = {
name: 'John',
age: 32,
};
const smith: typeof johan = {
name: 'Smith',
age: 39,
};
๋ฆฌ์กํธ ์ปค์คํ
ํ
์ ๋ฆฌํด ํ์
์ด ๋ฐฐ์ด์ด๊ณ ๊ฐ ์์๊ฐ ๋ชจ๋ ๋ค๋ฅธ ํ์
์ด๋ผ๋ฉด, typeof
๋ฅผ ์ฌ์ฉํ๋ฉด ํ์
์ ๋ ์ฝ๊ฒ ์ง์ ํ ์ ์๋ค. (as const
๋ฅผ ํ์ฉํ ๋ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ ๋งํฌ ์ฐธ๊ณ )
const useFetchData = (url: string) => {
// ์๋ต
return [loading, data, error] as [typeof loading, typeof data, typeof error];
};
in ํค์๋
ํ์ ๊ฐ๋์์ ์ฌ์ฉ ์์
์๋ฐ์คํฌ๋ฆฝํธ์์ in
์ฐ์ฐ์๋ก ๊ฐ์ฒด key
๋ฅผ ์ํํ๋ฏ ํ์
์คํฌ๋ฆฝํธ์์๋ in
์ฐ์ฐ์๋ฅผ ์ด์ฉํด ํน์ ํ์
์ด ๊ฐ์ง๋ key
๋ฅผ ์ํํด์ ํ์
๊ฐ๋ํ ์ ์๋ค.
interface Music {
title: string;
genre: string;
}
interface Movie {
title: string;
director: number;
}
type Media = Music | Movie;
// Media ํ์
์ด ๊ฐ๋ ๊ฐ ์์ฑ(Movie/Music)์ ๊ฐ์ฒด ์์์ ์ ์ํ ๋ ๊ฐ ์์ฑ๋ง๋ค ํด๋นํ๋ ํ์
์ด ์ง์ ๋๋ค
// Media ํ์
์ ํจ์ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ์์ ๋ Music/Movie ๊ณตํต ์์ฑ๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๋ค
์๋ printConsole
ํจ์๋ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐ๋ ์์ ์ Music
Movie
๋ ์ค ์ด๋ ํ์
์ด ์ฌ์ง ์ ์ ์๊ธฐ ๋๋ฌธ์ ๊ณตํต ์์ฑ๋ง ์ฌ์ฉ ํ ์ ์๋ค. ๊ฐ ํ์
๋ณ๋ก ๋ก์ง์ ์ฒ๋ฆฌํ๊ธฐ ์ํด์ ํ์
๊ฐ๋๊ฐ ํ์ํ๋ค.
์๋ ์ฝ๋๋ in
ํค์๋๋ฅผ ์ฌ์ฉํด obj
ํ๋ผ๋ฏธํฐ์ rate
์์ฑ์ด ์์ผ๋ฉด Movie
ํ์
์ผ๋ก ์ทจ๊ธํ๊ณ , ์์ผ๋ฉด Music
ํ์
์ผ๋ก ์ทจ๊ธํ๋๋ก ํ๋ ์์(๋ฌผ๋ก is ํค์๋ ๋ฑ์ ํ์ฉํ ์๋ ์๋ค).
const printConsole = (content: Media) => {
if ('genre' in content) {
return `this is music of <${content.genre}>`;
}
if ('director' in content) {
return `this is movie of <${content.director}>`;
}
};
const fkj: Media = {
title: 'Before Chill',
genre: 'Jazz Hiphop',
};
printConsole(fkj); // genre ์์ฑ์ด ์๊ธฐ ๋๋ฌธ์ Music ํ์
์ผ๋ก ์ทจ๊ธํ๋ค
`is` ํค์๋ ํ์ฉ ์์
const isMusic = (target: Media): target is Music => {
return (target as Music).genre !== undefined;
};
const printConsole = (content: Media) => {
if (isMusic(content)) {
return `this is music of <${content.genre}>`;
}
// ์์์ ์ด๋ฏธ Music ํ์
์ ๋ถ๊ธฐ ํ๊ธฐ ๋๋ฌธ์ ์๋ ์ฝ๋๋ถํด Movie ํ์
์ผ๋ก ์ธ์ํ๋ค
if (content.director) {
return `this is movie of <${content.director}>`;
}
};
๋ง์ฝ `is` ํค์๋๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค๋ฉด ์๋์ฒ๋ผ ์ง์ ๋ถํ ์ฝ๋๊ฐ ๋๋ค.
const printConsole = (content: Media) => {
if ((content as Music).genre) {
return `this is music of <${(content as Music).genre}>`;
}
if ((content as Movie).director)
return `this is movie of <${(content as Movie).director}>`;
};
interface / type์์ ์ฌ์ฉ ์์
์๋์ฒ๋ผ type
์ ์ด์ฉํด ํน์ ๊ฐ์ฒด์ key
๋ชฉ๋ก์ ๋ฏธ๋ฆฌ ์ ์ํ ํ, in
์ฐ์ฐ์๋ฅผ ์ด์ฉํด ํด๋น key
๊ฐ๋ง ๋ฐ๋๋ก ํ ์ ์๋ค. ๋๊ดํธ ๋ค์ ๋ฌผ์ํ๋ฅผ ๋ถ์ฌ์ [key in TypeName]?
์ ํ์ ์ผ๋ก ์ฌ์ฉํ ์๋ ์๋ค.
type NameTypeKeys = 'lastName' | 'firstName';
type NameTypes = {
[key in NameTypeKeys]: string;
// type NameTypes = Record<NameTypeKeys, string> ์์ ๋์ผ
};
const johan: NameTypes = {
lastName: 'Color',
firstName: 'Filter',
};
[...]
๋๊ดํธ ์์ ํํ์์ ์ฌ์ฉํ๋ computed value๋ interface
์์ ์ฌ์ฉํ ์ ์๋ค. ๋์ ์ธํฐํ์ด์ค๊ฐ ๊ฐ์ง ์์ฑ์ ํค ๊ฐ์ด ๊ฐ์ฒด ํํ์ผ๋ ๊ฐ๋ฅํ๋ค.
type NameTypeKeys = 'lastName' | 'firstName';
interface Students {
[key: string]: { [key in NameTypeKeys]: string };
// [key: string]: Record<NameTypeKeys, string> ์์ ๋์ผ
}
const students: Students = {
colorFilter: {
lastName: 'Color',
firstName: 'Filter',
},
};
๐ก ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฒด์ `obj[๋ณ์๋ช ]` ๊ดํธ ํ๊ธฐ๋ฒ์ ์ฐ๋ฉด, ๊ดํธ์์ด number๋ string์ด ์๋๋ฉด ํด๋น ๋ณ์๊ฐ์ ๋ํด `toString()`์ ์๋ฌต์ ์ผ๋ก ํธ์ถํ๋ค. ํ์ ์คํฌ๋ฆฝํธ์์ `toString()`์ ์๋ฌต์ ์ผ๋ก ํธ์ถํ์ง ์๊ธฐ ๋๋ฌธ์ key ํ์ ์ ํญ์ number ํน์ string์ด์ด์ผ ํ๋ค.
๊ธ ์์ ์ฌํญ์ ๋ ธ์ ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์
'๐ช Programming' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JS] ์บ๋ฒ์ค Canvas ๋ํ ํ๋ ์ถ์ ํ ์์ ์กฐ์ ํ๊ธฐ (0) | 2024.04.24 |
---|---|
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ (0) | 2024.04.24 |
[TS] ํ์ ์คํฌ๋ฆฝํธ - ์ ๋ค๋ฆญ, ํ๋ก๋ฏธ์ค (0) | 2024.04.24 |
[TS] ํ์ ์คํฌ๋ฆฝํธ - ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ (0) | 2024.04.24 |
[JS] location ๊ฐ์ฒด์ href/assign, replace ์ฐจ์ด์ (0) | 2024.04.24 |
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote
๋ค๋ฅธ ๊ธ
-
[JS] ์บ๋ฒ์ค Canvas ๋ํ ํ๋ ์ถ์ ํ ์์ ์กฐ์ ํ๊ธฐ
[JS] ์บ๋ฒ์ค Canvas ๋ํ ํ๋ ์ถ์ ํ ์์ ์กฐ์ ํ๊ธฐ
2024.04.24 -
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
2024.04.24 -
[TS] ํ์ ์คํฌ๋ฆฝํธ - ์ ๋ค๋ฆญ, ํ๋ก๋ฏธ์ค
[TS] ํ์ ์คํฌ๋ฆฝํธ - ์ ๋ค๋ฆญ, ํ๋ก๋ฏธ์ค
2024.04.24 -
[TS] ํ์ ์คํฌ๋ฆฝํธ - ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ
[TS] ํ์ ์คํฌ๋ฆฝํธ - ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ
2024.04.24