[๐Ÿ’ป ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  FE 44๊ธฐ]TypeScript - 3

JiEunยท2023๋…„ 6์›” 1์ผ
0
post-thumbnail

โœ”๏ธ ์‹œ์ž‘

์ œ๋„ค๋ฆญ๊ณผ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ด€๋ จ ๊ณผ์ œ๋ฅผ ํ’€์—ˆ๋‹ค.


๐Ÿ“ ๋ฐฐ์šด ๊ฒƒ

โœ”๏ธ ์ œ๋„ค๋ฆญ(Generic)

  • ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๊ณ  ํƒ€์ž… ์•ˆ์ •์„ฑ์„ ๋ณด์žฅํ•˜๋Š” ๊ธฐ๋Šฅ
  • ํ•จ์ˆ˜๋‚˜ ํด๋ž˜์Šค๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์‚ฌ์šฉ๋  ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…์„ ๋ฏธ๋ฆฌ ์ง€์ •ํ•˜์ง€ ์•Š๊ณ , ์ดํ›„ ํ•จ์ˆ˜๋‚˜ ํด๋ž˜์Šค๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ธ์ž๋กœ ์ „๋‹ฌ๋œ ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ํƒ€์ž…์„ ์ถ”๋ก ํ•˜๊ฒŒ ๋œ๋‹ค.
//์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ• - ์ค‘๋ณต ํ•จ์ˆ˜ ์„ ์–ธ
function printLog(text: string): string {
	return text;
}

function printLogNumber(text: number): number {
	return text;
}

//๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ• - ์œ ๋‹ˆ์˜จ ์‚ฌ์šฉ
function printLog(text: string | number) {
	return text;
}
printLog('hello');
printLog(123);

์ œ๋„ค๋ฆญ ์—†์ด ์ž‘์—…ํ–ˆ์„ ๊ฒฝ์šฐ์ด๋‹ค.
์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ ์ค‘๋ณต๋˜๋Š” ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•ด์•ผํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๊ณ 
๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ ๋ฌธ์ œ ํ•ด๊ฒฐ์€ ๋˜์ง€๋งŒ string, number ๋‘˜ ๋‹ค ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” API๋งŒ ์ œ๊ณตํ•œ๋‹ค๊ณ  ํ•œ๋‹ค. ์ด์™ธ์˜ ํƒ€์ž…์€ ์ •ํ™•ํžˆ ์ถ”๋ก ๋˜์ง€ ์•Š๊ธฐ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค.

์ œ๋„ค๋ฆญ ์‚ฌ์šฉ ๋ฒ•

function printLog<T>(text: T): T {
	return text;
}

<T>(๋งค๊ฐœ๋ณ€์ˆ˜ : T) : T์™€ ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
T๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ T๋กœ ํ‘œ๊ธฐํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ธํ„ฐํŽ˜์ด์Šค ์ œ๋„ค๋ฆญ

  • ์ธํ„ฐํŽ˜์ด์Šค์—์„œ๋„ ์ œ๋„ค๋ฆญ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
interface Item<T> {
	name: T;
	stock: number;
	selected: boolean;
}

name์€ ์–ด๋– ํ•œ ํƒ€์ž…๋„ ๋“ค์–ด ๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.

ํด๋ž˜์Šค ์ œ๋„ค๋ฆญ

  • ์ œ๋„ค๋ฆญ์„ ์‚ฌ์šฉํ•˜๋Š” TypeScript์—์„œ ํŒฉํ† ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ํด๋ž˜์Šค ํƒ€์ž…์„ ์ฐธ์กฐํ•ด์•ผํ•œ๋‹ค.
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

์œ ์˜์‚ฌํ•ญ

  • ์ œ๋„ค๋ฆญ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค ๋•Œ, ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ํ•จ์ˆ˜ ๋ณธ๋ฌธ์— ์ œ๋„ค๋ฆญ ํƒ€์ž…ํ™”๋œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์“ฐ๋„๋ก ๊ฐ•์š”ํ•œ๋‹ค.
function printLog<T>(text: T): T {
  // ์ปดํŒŒ์ผ๋Ÿฌ ์—๋Ÿฌ ๋ฐœ์ƒ
 	console.log(text.length);
	return text;
}

text.length๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜๋ฉด string์ธ์ง€ number์ธ์ง€, ์–ด๋–ค ๊ฐ’์„ ๋ณด๋‚ผ์ง€ ์•Œ ์ˆ˜ ์—†์ง€์— ์—๋Ÿฌ๊ฐ€ ๋‚œ๋‹ค.
(T์—๋Š” .length๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์ถ”๋ก ํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ)

์ด๋Ÿด ๊ฒฝ์šฐ ์ œ๋„ค๋ฆญ์— ํƒ€์ž…์„ ์ค˜ ์œ ์—ฐํ•˜๊ฒŒ ํ•จ์ˆ˜์˜ ํƒ€์ž…์„ ์ •์˜ํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.

//์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•
function printLog<T>(text: T[]): T[] {
	console.log(text.length);
	return text;
}
//๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•
function printLog<T>(text: Array<T>): Array<T> {
	console.log(text.length);
	return text;
}
  • ์ œ๋„ค๋ฆญ ํƒ€์ž… ๋ณ€์ˆ˜, ํ•จ์ˆ˜๋Š” ์–ด๋Š ์ •๋„ ์–ด๋–ค ํƒ€์ž…์ด ๋“ค์–ด์˜ฌ์ง€ ํžŒํŠธ๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค.
function printLog<T>(text: T): T {
 	console.log(text.length);
	return text;
}

์ด์ „ ์ฝ”๋“œ์—์„œ ๋ณด์‹œ๋‹ค ์‹ถ์ด T์— ์–ด๋–ค ํƒ€์ž…์ด ์˜ฌ์ง€ ์•Œ ์ˆ˜ ์—†์–ด .length๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ extends๋ฅผ ์ด์šฉํ•˜๋ฉด ๋œ๋‹ค.

interface TextLength {
	length: number;
}

// length์— ๋Œ€ํ•ด ๋™์ž‘ํ•˜๋Š” ์ธ์ž๋งŒ ๋„˜๊ฒจ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.
function printLog<T extends TextLength>(text: T): T {
 	console.log(text.length);
	return text;
}

๋˜๋Š” keyof๋ฅผ ์ด์šฉํ•ด ์ œ์•ฝ์„ ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค.

interface Item<T> {
	name: T;
	stock: number;
	selected: boolean;
}

function printLog<T extends keyof Item>(text: T): T {
	return text;
}

printLog('name'); //์ •์ƒ
pirntLog('key'); //์—๋Ÿฌ

<T extends keyof Item>์—์„œ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฐ›๋Š” ๊ฐ์ฒด์— ์—†๋Š” ์†์„ฑ๋“ค์€ ์ ‘๊ทผํ•  ์ˆ˜ ์—†๊ฒŒ ์ œํ•œ์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

โœ”๏ธ ๊ณผ์ œ ์ง„ํ–‰

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ด€๋ จ ์„ค์น˜

npm install -D typescript @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

tsconfig.json ํŒŒ์ผ ์„ธํŒ…

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "lib": ["es6", "dom"],
        "rootDir": "src",
        "module": "CommonJS",
        "esModuleInterop": true,
        "target": "es5",
        "sourceMap": true,
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "allowJs": true
    },
    "include": ["./src"],
    "exclude": ["node_modules", "build"]
}

์ž‘์„ฑ ์ฝ”๋“œ

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
  • ํ•ด๋‹น HTMLElement ๊ฐ€
    HTMLElement๋˜๋Š” null์ธ ๊ฒฝ์šฐ as HTMLElement์„ ์ž‘์„ฑํ•ด ์ค€๋‹ค.
const [todos, setTodos] = useState<TodoItem[]>([]);
  • useState๋„ ์ œ๋„ค๋ฆญํ˜•์‹์œผ๋กœ ์ถ”๊ฐ€ํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value);
}
  
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

}
  • e: React.ChangeEvent<HTMLInputElement>
    - input ์š”์†Œ์˜ ๋ณ€๊ฒฝ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ํƒ€์ž…์ด๋‹ค.
    • React.ChangeEvent๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ์ด๋ฒคํŠธ ํƒ€์ž… ์ค‘ ํ•˜๋‚˜์ด๋‹ค.
    • <HTMLInputElement>๋Š” input ์š”์†Œ์˜ ํƒ€์ž…์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.
  • e: React.FormEvent<HTMLFormElement>
    - <from>์š”์†Œ์˜ ์ œ์ถœ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ํƒ€์ž…์ด๋‹ค.
    • React.FormEvent๋Š” <from>์š”์†Œ์™€ ๊ด€๋ จ๋œ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
    • <HTMLInputElement>๋Š” <from> ์š”์†Œ์˜ ํƒ€์ž…์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.

โœ๏ธ ๋งˆ์น˜๋ฉฐ

๊ณผ์ œ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋‚ด๊ฐ€ ์•Œ์ง€ ๋ชปํ•œ ๋ถ€๋ถ„์ด ์ƒ๊ฐ ๋ณด๋‹ค ๋งŽ์•„์„œ ๋‹นํ™ฉํ–ˆ๋‹ค.

๊ฒ€์ƒ‰ ํ•˜๋Š” ์‹œ๊ฐ„์ด ๋ฌธ์ œ ํ‘ธ๋Š” ์‹œ๊ฐ„ ๋ณด๋‹ค ํ›จ์”ฌ ๋งŽ์•˜๋˜ ๊ฑฐ ๊ฐ™๋‹ค.

์ฒ˜์Œ์ด๋ผ ์–ด๋ ค์šด ๊ฑฐ ๊ฐ™๋‹ค.
์ž์ฃผ ์‚ฌ์šฉํ•ด ๋ณด๊ณ  ์—ฐ์Šตํ•˜๋‹ค ๋ณด๋ฉด ์ต์ˆ™ํ•ด ์งˆ ๊ฒƒ ๊ฐ™๋‹ค.
JavaScript์— ๋ณด์กฐ์ ์ธ ์—ญํ• ๋กœ ์ƒ๊ฐํ•˜๋Š”๋ฐ
์ƒ๊ฐ ๋ณด๋‹ค ์„ค์น˜ํ•  ๊ฒƒ๋„ ๋งŽ์•˜๋‹ค.

๊ทธ๋ž˜๋„ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์–ด๋– ํ•œ ๋ถ€๋ถ„์ด ๋ฌธ์ œ์ธ์ง€
์„ธ์„ธํ•˜๊ฒŒ ์ง‘์–ด ์ฃผ์–ด ๋ฌธ์ œ๋ฅผ ์ˆ˜์›”ํ•˜๊ฒŒ ํ’€ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

profile
๐Ÿ’ป ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋ชฉํ‘œ๋กœ ์„ฑ์žฅ ์ค‘! (์•Œ์•„๋ดค๋˜ ๋‚ด์šฉ ๋“ฑ์„ ์ •๋ฆฌํ•˜๊ธฐ)

0๊ฐœ์˜ ๋Œ“๊ธ€