์ ๋ค๋ฆญ๊ณผ ํ์ ์คํฌ๋ฆฝํธ ๊ด๋ จ ๊ณผ์ ๋ฅผ ํ์๋ค.
//์ฒซ ๋ฒ์งธ ๋ฐฉ๋ฒ - ์ค๋ณต ํจ์ ์ ์ธ
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์ ์ด๋ ํ ํ์ ๋ ๋ค์ด ๊ฐ ์ ์๋ค.
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
{
"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์ ๋ณด์กฐ์ ์ธ ์ญํ ๋ก ์๊ฐํ๋๋ฐ
์๊ฐ ๋ณด๋ค ์ค์นํ ๊ฒ๋ ๋ง์๋ค.
๊ทธ๋๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ ๋ ์ด๋ ํ ๋ถ๋ถ์ด ๋ฌธ์ ์ธ์ง
์ธ์ธํ๊ฒ ์ง์ด ์ฃผ์ด ๋ฌธ์ ๋ฅผ ์์ํ๊ฒ ํ ์ ์์๋ค.