[TS] ํ์ ์คํฌ๋ฆฝํธ - ์ ๋ค๋ฆญ, ํ๋ก๋ฏธ์ค
์ ๋ค๋ฆญ ์๊ฐ
์ ๋ค๋ฆญ์ ํ์ ์ ํจ์์ ํ๋ผ๋ฏธํฐ์ฒ๋ผ ์ฌ์ฉํ๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ ๋ค๋ฆญ์ ์ฌ์ฌ์ฉ์ฑ์ด ๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ๋ ์์ฃผ ์ฌ์ฉํ๋ค. ํ ๊ฐ์ง ํ์ ๋ณด๋ค ์ฌ๋ฌ๊ฐ์ง ํ์ ์์ ๋์ํ๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ ๋ ์ ์ฉํ๋ค.
์ ๋ค๋ฆญ ๊ธฐ๋ณธ ๋ฌธ๋ฒ
๐ก T
๋ Type parameter์ ์ฝ์๋ก ๊ด์ฉ์ ์ผ๋ก ์ฌ์ฉํ๋ค. ๊ผญ T
๋ฅผ ์ฌ์ฉํด์ผํ๋๊ฑด ์๋๋ค.
์๋ ํจ์์ text
ํ๋ผ๋ฏธํฐ์ hi
10
true
๋ฑ ์ด๋ค ํ์
์ ๊ฐ์ด ๋ค์ด๊ฐ๋๋ผ๋ ๊ทธ๋๋ก ๋ฐํํ๋ค. ์ด๋ ๊ฒ ๋ชจ๋ ํ์
์ ๋ฐ์ ์ ์๋ ์ด์ ๋ ํ์
์ ๋ฐ๋ก ์ง์ ํ์ง ์์๊ธฐ ๋๋ฌธ์ ์๋ฌต์ ์ผ๋ก any
ํ์
์ด ๋ผ์ ๊ทธ๋ฐ ๊ฒ์ด๋ค.
function getText(text) {
return text;
}
์๋ ํจ์๋ ์ ๋ค๋ฆญ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ด ์ ์ฉ๋ ํํ๋ค. ์ ํจ์์ ๋น์ทํ๊ฒ ์ด๋ค ํ์ ์ด๋ ํ๋ผ๋ฏธํฐ๋ก ๋๊ธธ ์ ์๋ค.
function getText<T>(text: T): T {
return text;
}
ํจ์๋ฅผ ํธ์ถํ ๋ ์๋์ฒ๋ผ ํ์ ์ ์ง์ ๋๊ฒจ์ค ์ ์๋ค. ์๋ 2๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ํธ์ถํ ์ ์๋ค.
getText<string>('hi'); // ํน์ getText('hi')
getText<number>(10); // ํน์ getText(10)
getText<boolean>(true); // ํน์ getText(true)
getText<string>('hi')
์ฝ๋๋ก ํจ์๋ฅผ ํธ์ถํ์ ๋ ์ ๋ค๋ฆญ์ด ์ ์ฉ๋ ํจ์๋ ์๋ ๋ชจ์๊ณผ ๊ฐ์์ง๋ค. ํจ์๋ฅผ ํธ์ถํ ๋ ์ ๋ค๋ฆญ ๊ฐ์ผ๋ก string
์ ๋๊ฒผ๊ธฐ ๋๋ฌธ์ ํจ์์ T
๋ถ๋ถ์ด string
์ผ๋ก ์ ์ฉ๋ ๊ฒ์ด๋ค(์ ํํ ๋งํ๋ฉด ํจ์๋ฅผ ํธ์ถํ ๋ ๋๊ธด ํ์
์ ๋ํด ํ์
์คํฌ๋ฆฝํธ๊ฐ ์ถ์ ํ ์ ์๊ฒ ๋ ๊ฒ)
// ํ๋ผ๋ฏธํฐ, ๋ฐํ๊ฐ ๋ชจ๋ string
function getText<string>(text: string): string {
return text;
}
์ ๋ค๋ฆญ ํ์ ์ ํ
๋ง์ฝ ํจ์ ์ธ์๋ก ๋ฐ์ ๋ฌธ์์ด์ length
๋ฅผ ํ์ธํ๊ณ ์ถ๋ค๋ฉด .length
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ํ์ง๋ง ์๋์ฒ๋ผ ts(2339) ์ปดํ์ผ๋ฌ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ์ ๋ค๋ฆญ ํจ์ ์ฝ๋์ T
๋ ํ๋ผ๋ฏธํฐ์ ๋ฐํ ๊ฐ ํ์
์ any
๋ฅผ ์ง์ ํ ๊ฒ๊ณผ ๊ฐ์ ๋์์ ํ๋ค. ์ปดํ์ผ๋ฌ ์
์ฅ์์ .length
์์ฑ์ด ์๋ number
ํ์
๋ฑ์ด ์ฌ ์ ์๋ ๊ฒ์ ๊ฐ์ํ์ฌ .length
์์ฑ์ ํ์ฉํ์ง ์๋ ๊ฒ์ด๋ค.
๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ ํ์ ๊ฐ๋๋ฅผ ์ด์ฉํด ํน์ ํ์ ๋ง ํธ๋ค๋งํ๋ฉด ๋๋ค.
function getText<T>(text: T): T {
if (typeof text === 'string') {
console.log(text.length); // 5
}
return text;
}
getText('Hello');
๋ฐฐ์ด์ ์ธ์๋ก ๋ฐ์ length
๋ฅผ ์ฌ์ฉํด๋ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ์ด๋ T[]
ํ์์ ์ ๋ค๋ฆญ ํ์
์ ์ ์ํ๋ฉด ๋๋ค. ๋ ์๋ฐํ๊ฒ ๋งํ๋ฉด ์ ๋ค๋ฆญ ํ์
์ ๋ฐฐ์ด[]
๋ก ์ ํํ ๊ฒ์ด๋ค.
function getText<T>(text: T[]): T[] {
// ๋ ๋ช
์์ ์ธ ์ ๋ค๋ฆญ ์ ์ธ ๋ฐฉ๋ฒ : function getText<T>(text: Array<T>): Array<T> { ... }
console.log(text.length); // 2
return text;
}
getText(['Hello', 'World']);
extends ํค์๋ ํ์ฉ โญ๏ธ
๋ง์ฝ ๋ฐฐ์ด๋ ๋ฐ๊ณ ์ถ๊ณ , ๋ฌธ์์ด๋ ๋ฐ๊ณ ์ถ๋ค๋ฉด? ์ธํฐํ์ด์ค๋ฅผ ์ด์ฉํด length
ํ์
์ ์ ์ํ๋ฉด ๋๋ค.
interface LengthType {
length: number; // length ์์ฑ์ ์ซ์์ด๋ฏ๋ก number๋ก ์ ์
}
์ด์ ํจ์์ extends
ํค์๋๋ฅผ ์ด์ฉํด LengthType
์ ์ ์ธํ๋ค. extends
ํค์๋๋ ๊ธฐ์กด ์ ์ํ๋ ์ธํฐํ์ด์ค ํน์ ํ์
์ ํ์ฅํ ๋ ์ฌ์ฉํ๋ค. ๊ทธ๋ผ ์ ๋ค๋ฆญ์ผ๋ก ๋ฐ์ ํ์
์ ํญ์ LengthType
์ ํ์ ํ์
์ธ ๊ฒ์ผ๋ก ์ธ์ํด์ LengthType
์ ์๋ length
์์ฑ๋ ๊ฐ์ง๊ฒ ๋๋ค.
function getText<T extends LengthType>(text: T): T {
console.log(text.length);
return text;
}
getText('abc'); // 3 (๋ฌธ์์ด์ length ์์ฑ์ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ์ง๋ฏ๋ก OK)
getText(['Hello', 'World']); // 2 (๋ฐฐ์ด์ length ์์ฑ์ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ์ง๋ฏ๋ก OK)
getText(10); // Error
getText({ length: 10 }); // 10 (๊ฐ์ฒด์ length ์์ฑ์ ํฌํจํ์ผ๋ฏ๋ก OK)
getText({ len: 10 }); // Error (๊ฐ์ฒด์ length ์์ฑ์ด ์ ์๋์ด ์์ง ์๊ธฐ ๋๋ฌธ์ Error)
๐ก ํจ์ ํธ์ถ ์ func(...)
์ ๋ช
์ํ์ง ์์ผ๋ฉด ํธ์ถ์ ๋๊ฒผ๋ ์ธ์์ ํ์
์ผ๋ก ์ถ๋ก ๋๋ค.
keyof ํค์๋ ํ์ฉ
์๋ name
price
stock
์์ฑ์ ๊ฐ์ง ShoppingItem
์ด๋ ์ธํฐํ์ด์ค๊ฐ ์๋ค.
interface ShoppingItem {
name: string;
price: number;
stock: number;
}
์๋ ํจ์์ ์ธ์๊ฐ ์ธํฐํ์ด์ค์์ ๊ฐ์ง ์์ฑ๋ง ๋ฐ๋๋ก ์ ์ฝ์ ๊ฑธ๊ณ ์ถ๋ค๋ฉด keyof
ํค์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ๊ทธ๋ผ ShoppingItem
์ธํฐํ์ด์ค๊ฐ ๊ฐ์ง ์์ฑ(key)๋ง ํ์
(์ธ์)์ผ๋ก ์ฌ ์ ์๋ค. ์ฆ ShoppingItem
์ธํฐํ์ด์ค์ 3๊ฐ ์์ฑ์ค 1๊ฐ๊ฐ ์ ๋ค๋ฆญ(T
)์ผ๋ก ์ฌ ๊ฒ์ด๋ผ๊ณ ์ ์ํด์ฃผ๋ ๊ฒ๊ณผ ๊ฐ๋ค.
function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T {
return itemOption;
}
getShoppingItemOption('name'); // ok
getShoppingItemOption('names'); // error
์๋์ฒ๋ผ ์ฌ์ฉํ ์๋ ์๋ค.
function getProperty<T, O extends keyof T>(obj: T, key: O) {
return obj[key];
}
let obj = { a: 1, b: 2, c: 3 };
getProperty(obj, 'a'); // ok
getProperty(obj, 'z'); // error: "z"๋ "a", "b", "c" ์์ฑ์ ํด๋นํ์ง ์์ต๋๋ค.
์ ๋ค๋ฆญ์ ์ธ์ ์ฌ์ฉํ ๊น? — ์ ๋ค๋ฆญ์ ์ฅ์
์๋ ์ฝ๋์์ logText
ํจ์๋ ๋ฌธ์์ด๋ง ๋ฐ์ ์ ์๋ค. ๋ง์ฝ ์ด ํจ์์์ ์ซ์ ํ์
๋ ๋ฐ๊ณ ์ถ๋ค๋ฉด ๋์ผํ ๋ก์ง์ ํจ์๋ฅผ ์ค๋ณตํด์ ๋ง๋ค๊ฑฐ๋ ์ ๋์จ ํ์
์ ์ฌ์ฉํ๋ฉด ๋๋ค.
function logText(text: string): string {
console.log(text);
return text;
}
logText('Hello');
logText(10);
ํจ์ ์ค๋ณต ์์ฑ ์ ๋ฌธ์ ์
์๋์ฒ๋ผ ๋์ผํ ๋ก์ง์ ํจ์๋ฅผ ์ค๋ณตํด์ ๋ง๋ค ์ ์์ง๋ง, ๋จ์ํ ํ์ ์ ๋ค๋ฅด๊ฒ ๋ฐ๊ธฐ ์ํด ์ค๋ณต๋ ์ฝ๋๋ฅผ ๊ณ์ ์์ฐํ๋ฉด ์ฝ๋์๋ ๋น๋ํด์ง๊ณ ๊ฐ๋ ์ฑ๋ ๋จ์ด์ง๋ค. ์ ์ง๋ณด์ ์ธก๋ฉด์์ ๋ณด๋ฉด ์ต์ ์ด๋ค.
// ๋ฌธ์์ด ํ์
์ ๋ฐ๋ ๋์ผ ๋ก์ง์ ํจ์ 1
function logText(text: string): string {
console.log(text);
return text;
}
// ๋๋ฒ ํ์
์ ๋ฐ๋ ๋์ผ ๋ก์ง์ ํจ์ 2
function logNumber(num: number): number {
console.log(num);
return num;
}
const str = logText('Hello'); // ๊ฒฐ๊ณผ ๋ณ์์ string๊ณผ ๊ด๋ จ๋ API์ฌ์ฉํ ์ ์๋ค.
const num = logNumber(10); // ๊ฒฐ๊ณผ ๋ณ์์ number์ ๊ด๋ จ๋ API๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
์ ๋์จ ํ์ ์ฌ์ฉ์ ๋ฌธ์ ์
๋๋ฒ์งธ ๋ฐฉ๋ฒ์ธ ์ ๋์จ ํ์
์ ์ฌ์ฉํ๋ฉด ๊ฐ ํ์
์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ์๋์ฒ๋ผ ๋ฌธ์์ด์ ๋๊ฒจ ํจ์ ํธ์ถ ๊ฒฐ๊ณผ๋ฅผ ๋ณ์์ ๋ด๊ณ split()
๊ฐ์ ๋ฌธ์์ด ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ๋ฌธ์์ด๊ณผ ์ซ์ ํ์
์ด ๊ณตํต์ผ๋ก ์ ๊ทผํ ์ ์๋ API๋ง ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
function logText(text: string | number) {
console.log(text);
return text;
}
const strResult = logText('Hello');
strResult.split(''); // ts(2339) error!
const numResult = logText(10);
ํด๊ฒฐ์ฑ — ์ ๋ค๋ฆญ ์ฌ์ฉ
์ด๋ฐ ๋ฌธ์ ๋ค์ ์ ๋ค๋ฆญ์ ์ด์ฉํ๋ฉด ๋ง๋ํ๊ฒ ํด๊ฒฐํ ์ ์๋ค. ํจ์ ํธ์ถ ์์ ์ ํ์ ์ ์ ์ํ๊ธฐ ๋๋ฌธ์ ๋ชจ๋ ํ์ ์ด ์ฌ ์ ์๊ณ , ๋ฐํ๊ฐ ์ญ์ ํธ์ถ ์์ ํ์ ์ ํด๋นํ๋ API๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
function logText<T>(text: T): T {
console.log(text);
return text;
}
const strResult = logText<string>('Hello');
strResult.split('').reverse().join(''); // 'olleH'
const numResult = logText<number>(10);
numResult.toString(); // '10'
์ ๋ค๋ฆญ ํ์ ์ ์
์ ๋ค๋ฆญ ์ธํฐํ์ด์ค
์ ๋ค๋ฆญ๋ ์ธํฐํ์ด์ค๋ฅผ ์ด์ฉํด ํ์
์ ์๋ฅผ ํ ์ ์๋ค. ์๋ ์ฝ๋์ฒ๋ผ T
ํ์
์ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ์ value
์ ์๋ T
๋ก ๋๊ธฐ๋ ๊ตฌ์กฐ๋ผ๊ณ ์ดํดํ๋ฉด ๋๋ค.
interface DropdownItem<T> {
value: T;
selected: boolean;
}
์ ์ํ ํ์
์ ์๋์ฒ๋ผ ์ฌ์ฉํ๋ฉด ๋๋ค. ์
๋ ฅํ ๋ฌธ์์ด ํ์
<string>
์ DropdownItem
์ T
๋ก ๋๊ฒจ์ง๋ค. ์ฌ๋ฌ๊ฐ์ง ํ์
์ ์ ๋ค๋ฆญ์ ์ด์ฉํด ํ๋์ ์ธํฐํ์ด์ค๋ก ์ปค๋ฒํ๊ณ ์๋ค. ํ์
์ฝ๋๋ฅผ ์ค์ผ ์ ์์ด์ ์ ์ฉํ๋ค.
const emails: DropdownItem<string>[] = [
{ value: 'naver.com', selected: true },
{ value: 'gmail.com', selected: false },
{ value: 'hanmail.net', selected: false },
];
const numberOfProducts: DropdownItem<number>[] = [
{ value: 1, selected: true },
{ value: 2, selected: false },
{ value: 3, selected: false },
];
์๋์ฒ๋ผ ์ฌ๋ฌ ํ์ ์ ๋ฐ๋๋ก ํ ์๋ ์๋ค.
// ์ ๋์จ ์ฐ์ฐ์๋ฅผ ์ด์ฉํ ๋ฐฉ๋ฒ
function createDropdownItem(item: DropdownItem<string> | DropdownItem<number>) {
// ...
}
const item = createDropdownItem(email);
// extends ํค์๋๋ฅผ ์ด์ฉํ ๋ฐฉ๋ฒ
function createDropdownItem<T extends string | number>(item: DropdownItem<T>) {
// ...
}
const item = createDropdownItem<string>(email);
๐ก ์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์ธํฐํ์ด์ค ๋ฟ๋ง ์๋๋ผ ํด๋์ค๋ ์์ฑํ ์ ์๋ค. ์ด๋๊ณผ ๋ค์ํ์ด์ค๋ ์ ๋ค๋ฆญ์ผ๋ก ์์ฑํ ์ ์๋์ ์ฐธ๊ณ .
์ ๋ค๋ฆญ ํด๋์ค
์ ๋ค๋ฆญ ์ธํฐํ์ด์ค์ ๋น์ทํ ๋ฐฉ์์ผ๋ก ์ ๋ค๋ฆญ ํด๋์ค๋ฅผ ์์ฑํ ์ ์๋ค. ํด๋์ค ์ด๋ฆ ์ฐ์ธก์ <T>
์ฝ๋๋ฅผ ์ถ๊ฐํ๊ณ ์ธ์คํด์ค ์์ฑ ์ ํ์
์ ์ด๋ค ๊ฐ์ด ๋ค์ด๊ฐ์ง ์ง์ ํ๋ฉด ๋๋ค.
class GenericMath<T> {
pi: T;
sum: (x: T, y: T) => T;
}
const math = new GenericMath<number>();
ํ๋ก๋ฏธ์ค
์๋ฒ ํต์ ์ ํ๋ API ํธ์ถ์ ํ ๋ ์ ๋ค๋ฆญ์ด ์์ฃผ ์ฐ์ธ๋ค. ๋ณดํต ์๋ฒ ์๋ต Response
๊ฐ ๊ท์น์ ์ ๋ค๋ฆญ์ ์ด๋ค. Promise
๋ ์ ๋ค๋ฆญ ํ์
์ผ๋ก ์ ์๋๋ค.
// ๋ฐํ๊ฐ์ Promise ํ์
์ ๋ฌธ์์ด ๋ฐฐ์ด
function fetchItems(): Promise<string[]> {
const items: string[] = ['a', 'b', 'c'];
return new Promise((res) => res(items));
}
Async
Await
ํค์๋์์ ์๋์ฒ๋ผ ์ฌ์ฉํ๋ค.
interface Employee {
id: number;
employee_name: string;
employee_salary: number;
employee_age: number;
profile_image: string;
}
// ์ ์ฒด ์ง์๋ค(๋ฐฐ์ด) API ํธ์ถ
const fetchEmployees = async (): Promise<Array<Employee> | string> => {
const api = 'http://dummy.restapiexample.com/api/v1/employees';
try {
const response = await fetch(api);
const { data } = await response.json();
return data;
} catch (error) {
if (error) {
return error.message;
}
}
};
// ์ง์ 1๋ช
(๊ฐ์ฒด) API ํธ์ถ
const fetchEmployee = async (
url: string,
id: number,
): Promise<Record<string, string>> => {
const response = await fetch(`${url}/${id}`);
const { data } = await response.json();
return data;
};
๊ธ ์์ ์ฌํญ์ ๋ ธ์ ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์
'๐ช 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
๋ค๋ฅธ ๊ธ
-
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
2024.04.24 -
[TS] ํ์ ์คํฌ๋ฆฝํธ - ํ์ ์ถ๋ก / ๋จ์ธ / ๊ฐ๋
[TS] ํ์ ์คํฌ๋ฆฝํธ - ํ์ ์ถ๋ก / ๋จ์ธ / ๊ฐ๋
2024.04.24 -
[TS] ํ์ ์คํฌ๋ฆฝํธ - ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ
[TS] ํ์ ์คํฌ๋ฆฝํธ - ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ
2024.04.24 -
[JS] location ๊ฐ์ฒด์ href/assign, replace ์ฐจ์ด์
[JS] location ๊ฐ์ฒด์ href/assign, replace ์ฐจ์ด์
2024.04.24