[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
๋๊ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.