2. TypeScript
1. REPL
REPL(read-eval-print loop) CLI, ์ฝ์ ํ๊ฒฝ, ์ธํฐ๋ํฐ๋ธ ํฑ๋ ๋ฒจ(interactive toplevel), ๋ญ๊ธฐ์ง ์ ธ(language shell) ๋ฑ์ผ๋ก๋ ๋ถ๋ฆผ ๋จ์ผ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ์ ์ด๋ฅผ ํ๊ฐ(์คํ)ํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฉ์์๊ฒ ๋ฐํํ๋ ์ปดํจํฐ ํ๋ก๊ทธ๋๋ฐ ํ๊ฒฝ
ts-node
ts-node๋ TypeScript ์คํ๊ธฐ์ด๋ฉด์ Node.js์ฉ REPL ํ์ ์คํฌ๋ฆฝํธ๋ ์ปดํ์ผ ์ธ์ด์ด๊ธฐ ๋๋ฌธ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํ์ด ํ์ ๐ก ts-node๋ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํํด์ฃผ๊ธฐ ๋๋ฌธ์ ์ปดํ์ผ ์์ด๋ Node.js์์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ง์ ์คํํ ์ ์์ ๐ก ๊ฐ๋ฐ ํ๊ฒฝ์์ ํ์ ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ํ ์คํธํ ์ ์์
// REPL ์คํ
npx ts-node
// ์ข
๋ฃ
Ctrl + C or .exit
๊ฐ๋ฐ ํ๊ฒฝ์์๋ง ์ด์ฉํ ๊ฒ
npm install -D typescript
npm install -D ts-node
2. TypeScript
JS + TS ๋ฌธ๋ฒ (syntax)
ํ์
์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์
๋ฌธ๋ฒ์ ์ถ๊ฐํด์ ๋ง๋ ์ํผ์
์ผ๋ก, ํ์
๊ฐ๋
์ js์ ๋์
ํ ๊ฒ
์ ์ ํ์
์ ํน์ฑ์ ๊ฐ์ง๊ณ ์๊ณ , ์ต์ข
์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํ์ผ๋จ
๐ก ์ปดํ์ผ์ด๋, ๋ฒ์ญ
์ ๊ฐ๋
Interface vs Type
ํ์ ๋ณ์นญ๊ณผ ์ธํฐํ์ด์ค์ ์ฐจ์ด์
๊ฑฐ์ ๋น์ทํ๊ณ , ๋์ฒด๋ก ์ ํธ์ ๋ฐ๋ผ ์ ํ ํ์ ํ์ฅ ๋ฐฉ๋ฒ ๋ฑ์์ ์ฐจ์ด๊ฐ ์กด์ฌ (์ธํฐํ์ด์ค - ํ์ฅ ๊ฐ๋ฅ, ํ์ - ํ์ฅ ๋ถ๊ฐ๋ฅ)
Interface
์ธํฐํ์ด์ค๋ ๊ฐ์ฒด์ฒ๋ผ { }
๋ก ์ ์ธ
extends๋ก ํ์ฅํด์ ์ฌ์ฉํ ์ ์์
interface Person {
name: string;
age: number;
};
Type
ํ์
์ ์ก์์ฃผ๋ ๊ฒ
ํ์
์ ๋ณ์์ฒ๋ผ =
์ ์ฌ์ฉํด ํ ๋นํ๋ฉฐ, ํ์ํ ๊ฒ์ ๋ค ์ง์ด๋ฃ์ ์ ์์
type Human = {
name: string;
age: number;
};
ํ์
์ถ๋ก
ํ์ ์ ์ผ์ผ์ด ์ก์์ฃผ๊ธฐ ํ๋ค ๋, ๋ชจ๋ ํ์ ์ ๋ค ์ ์ด์ฃผ์ง ์๋๋ผ๋ ์์์ ํ์ ์ ์ถ๋ก ํด์ค
๐ก ํ์ ์คํฌ๋ฆฝํธ์ VS Code ๋ชจ๋ ๋ง์ดํฌ๋ก์ํํธ๊ฐ ๊ฐ๋ฐ ๋ง์ดํฌ๋ก์ํํธ๊ฐ VS Code๋ผ๋ IDE๋ฅผ ์ง์ ๋ง๋ ์ด์ ๋ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ ํํ๊ธฐ ์ํจ VS Code๋ ํ์ ์คํฌ๋ฆฝํธ์ ์ผ๋ ํธ๋ก ์ผ๋ก ๋ง๋ค์๊ธฐ ๋๋ฌธ์, ํ์ ์คํฌ๋ฆฝํธ๋ IDE์ ํตํฉ๋์ด ์๋ ์์ฑ์ด ์ง์๋๊ณ ์ค๋ฅ๋ฅผ ์บ์นํ๊ธฐ ์ฌ์ ํ์ ์คํฌ๋ฆฝํธ๊ฐ JS์ ๋์ ํธํ์ฑ์ ๊ฐ์ง๋ ์ด์ ๋ ์ ์ ๊ฐ ์ฌ์ฉํ๊ณ ์๋ ์๋น์ค๋ฅผ ๊ณ์ ์ฌ์ฉํ ์ ์๊ฒ ํ๊ธฐ ์ํจ
๐ ํ์ ์คํฌ๋ฆฝํธ : 2012๋ 10์ 1์ผ ๐ VS Code : 2015๋ 4์ 29์ผ
Union Type vs Intersection Type
Union Type
ํฉ์งํฉ
์ฌ๋ฌ ํ์
์ค ํ๋
์ผ ์ ์์์ ์ ์ธํ๋ ๋ฐฉ๋ฒ
type MyBool = true | false;
๋งค๊ฐ๋ณ์๋ฅผ ์ ํํ ๋ ์ ์ฉ
type Category = 'food' | 'toy' | 'bag';
function fetchProducts({ category }: { category: Category }) {
console.log(`Fetch ${category}`);
}
๋ ๊ฑฐ์ ํ๊ฒฝ ๋๋ ์ฝ๋์์ ์ฌ์ฉ
์๋ ์๋ฐ์คํฌ๋ฆฝํธ์๋ ํ์ ์ด ์์๊ธฐ ๋๋ฌธ ๋ํ์ ์ผ๋ก ReactNode
export type ReactNode =
| React$Element<any>
| ReactPortal
| ReactText
| ReactFragment
| ReactProvider<any>
| ReactConsumer<any>;
Intersection Type
๊ต์งํฉ
ํ์
์ ํ์ฅ
ํ๋ ๋ฐฉ๋ฒ, ์ฌ๋ฌ ์์ฑ์ ๊ฐ์ง
type Human = {
name: string;
age: number;
};
type Creature = {
hp: number;
mp: number;
};
type Person = Human & Creature;
let person: Person;
person = { name: 'ํ๊ธธ๋', age: 13, hp: 256, mp: 16 };
Optional Parameter
ํจ์์ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฃ์ง ์์ผ๋ฉด undefined๊ฐ ๋์ด
ํ์
์ ์ฌ์ฉํ๋ฉด ๋ฌด์กฐ๊ฑด ๋งค๊ฐ๋ณ์๋ฅผ ๋ฃ๋๋ก ์๋ฌ๊ฐ ๋ฐ์
๋งค๊ฐ๋ณ์๋ฅผ ๋ฃ์ง ์๊ณ ๋ ์ฌ์ฉํ ์ ์๋๋ก Optional Parameter๋ฅผ ์ฌ์ฉ
๋ฌผ์ํ ๊ธฐํธ(?)
์ฌ์ฉ ๋ฐฉ๋ฒ
// Optional Parameter ์ฌ์ฉ
function greeting(name?: string): string {
return `Hello, ${name || 'world'}`;
}
// ๊ธฐ๋ณธ๊ฐ ์ค์
function greeting(name: string = 'world'): string {
return `Hello, ${name}`;
}
๋งค๊ฐ๋ณ์๊ฐ ์ค๋ธ์ ํธ์ผ ๋ ๋ง์ด ํ์ฉ
function greeting({ name, age }: {
name: string;
age?: number;
}): string {
return age ? `${name} (${age})` : name;
}
โ ๏ธ ts-node์์๋ ํ ์ค๋ก ๋ถ์ฌ ์ฐ๊ฑฐ๋, type ๋ฑ์ผ๋ก ๋ฐ๋ก ๋ถ๋ฆฌํด์ผ ํด์ ๊ฐ๋ฅ
Last updated