- ๋ ๋ฐด๋์บ์ ์ดํํฐ๋ธ ํ์ ์คํฌ๋ฆฝํธ ๋์์ ์์ดํ 11,12 ์ฝ๊ณ ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค.
์์ดํ 12. ํจ์ ํํ์์ ํ์ ์ ์ฉํ๊ธฐ
- ํ์ ์คํฌ๋ฆฝํธ์์๋ ํจ์ ์ ์ธ๋ฌธ ๋ณด๋ค ํจ์ ํํ์์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
- ๊ทธ ์ด์ ๋ ํจ์ ํ์ ์ ์ธ์ ํจ์ ํํ์์ ์ฌ์ฌ์ฉ ํ ์ ์๋ ์ด์ ์ด ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
ํจ์ ํ์ ์ ์ธ์ ์ฅ์
์์ 1. DiceRollFn
ํจ์ ํ์
์ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํจ์ ์ ์ธ๋ฌธ
function rollDice1(sides: number): number {
/* COMPRESS */ return 0; /* END */
} // Statement
ํจ์ ํํ์
type DiceRollFn = (sides: number) => number;
const rollDice: DiceRollFn = (sides) => {
/* COMPRESS */ return 0; /* END */
};
์์ 2. lib.dom.d.ts ์ ์ ์๋์ด ์๋ fetch
ํ์
์ ์ธ ํจ์ ํ์
์ ์ฌ์ฌ์ฉํ์ฌ ๊ฐ๊ฒฐํ๊ฒ ์์ฑํ ์ ์์ต๋๋ค.
ํจ์ ์ ์ธ๋ฌธ
async function checkedFetch(input: RequestInfo, init?: RequestInit) {
const response = await fetch(input, init);
if (!response.ok) {
throw Error("request failed:", response.status);
}
return response;
}
async function getQuote() {
const response = await checkedFetches('/quote?by=Mark+Twain');
const quote = await response.json();
return quote;
}
ํจ์ ํํ์
const checkedFetch: typeof fetch = async (input, init) => {
const resp = await fetch(input, init);
if (!response.ok) {
throw Error("request failed:", response.status);
}
return response;
};
async function getQuote() {
const response = await checkedFetches('/quote?by=Mark+Twain');
const quote = await response.json();
return quote;
}
- fetch ํ์
์ ๋ฐํ ํ์
๊น์ง ๋ณด์ฅ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด throw ๋์ return ์ ํ๊ฒ ๋๋ฉด
Promise<Response>
์์Promise<Response|Error>
ํ์ ์ด ๋์ด๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์, ์๋ฌ๋ฅผ ๋ ๋๋ค.
const checkedFetch: typeof fetch = async (input, init) => {
const resp = await fetch(input, init);
if (!response.ok) {
return Error("request failed:", response.status); //โ๏ธ
}
return response;
};
async function getQuote() {
const response = await checkedFetches('/quote?by=Mark+Twain');
const quote = await response.json();
return quote;
}
์์ดํ 13. ํ์ ๊ณผ ์ธํฐํ์ด์ค์ ์ฐจ์ด ์๊ธฐ
๋๋ถ๋ถ์ ๊ฒฝ์ฐ ํ์ ์ ์ฌ์ฉํด๋๋๊ณ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํด๋ ๋ฉ๋๋ค. ํ์ง๋ง ๋์ ์ฐจ์ด๋ฅผ ์๊ณ ๋์ผํ ๋ฐฉ๋ฒ์ผ๋ก ํ์ ์ ์ ์ํด ์ผ๊ด์ฑ์ ์ ์งํด์ผ ํฉ๋๋ค.
์ฐจ์ด์ .
1. ๋ ๋ชจ๋ ํ์ฅ์ด ๊ฐ๋ฅํ๋ ํ์ฅ์ ๊ฐ๋ ์ด ์๋ก ๋ค๋ฆ ๋๋ค.
type StateType = {
name: string;
capital: string;
};
interface StateInterface {
name: string;
capital: string;
}
interface StateLocation {
latitude: number;
}
interface StateWithPopInterface extends StateInterface {
population: number;
}
type StateWithPopType = StateLocation & StateWithPopInterface;
const stateA: StateWithPopInterface = {};
const stateB: StateWithPopType = {};
- ์ธํฐํ์ด์ค ํ์
์ ๊ฐ์ง
stateA
์์name
,capital
,population
๋ชจ๋ ์ ์ธ๋์ด์์ง ์๋ค๊ณ ์๋ฌ๋ฅผ ๋ด์ฃผ๊ณ ์์ต๋๋ค.
- type ํค์๋๋ฅผ ๊ฐ์ง
stateB
์์name
,capital
,population
,latitude
๊น์ง ์๋ฌ๋ฅผ ๋ด์ผํ๋ค๊ณ ์์์ ํ์ง๋ง, ์ค์งname
,capital
,population
๋ง ์๋ฌ๋ฅผ ๋ด์ฃผ๊ณ ์์ต๋๋ค.
์ฆ, ์ธํฐํ์ด์ค๋ ์ ๋์จ ํ์
๊ฐ์ ๋ณต์กํ ํ์
์ ํ์ฅํ์ง๋ ๋ชปํฉ๋๋ค. ๋ณต์กํ ํ์
์ ํ์ฅ์ ์ํ ์, ํ์
๊ณผ &
๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
์ฐธ๊ณ
ํ์ ์ ์ธํฐํ์ด์ค๋ฅผ ํ์ฅ ๊ฐ๋ฅํ๋ฏ๋ก, ํ์ ์ ์์ ์ธํฐํ์ด์ค๋ ์ฌ์ฉ ๊ฐ๋ฅ ํฉ๋๋ค.
2. ์ธํฐํ์ด์ค์๋ ์ ๋์จ์ ํ ์๊ฐ ์์ต๋๋ค. ์ ๋์จ ํ์ ๋ง ๊ฐ๋ฅํฉ๋๋ค.
type AorB = "a" | "b"; //โ
ํ์
๋ณ์นญ์์๋ง ๊ฐ๋ฅ,
type Input = {
/* ... */
};
type Output = {
/* ... */
};
type NamedVariable = (Input | Output) & { name: string }; //โ
ํ์
๋ณ์นญ์์๋ง ๊ฐ๋ฅ
3. ์ธํฐํ์ด์ค์๋ ํ์ ์ ์๋ ๋ณด๊ฐ(augment)์ด ๊ฐ๋ฅํฉ๋๋ค.
interface State {
name: string;
capital: string;
}
interface State {
population: number;
}
const wyoming: State = {
name: 'Wyoming',
capital: 'Cheyenne',
population: 500_000
}; // โ
OK
- ๋ง์ฝ
State
๋ฅผ type ๋ณ์นญ์ ์ฌ์ฉํ์๋ค๋ฉด ์๋ฌ๋ฅผ ๋ ๋๋ค.
๊ฐ์ ์ด๋ฆ์ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑ์ ํ์ฅํ๋ ๊ฒ์ ์ ์ธ ๋ณํฉ(declaration merging) ์ด๋ผ๊ณ ํฉ๋๋ค.
์ธํฐํ์ด์ค๋ ํ์ ์ ์ธ ํ์ผ ์์ฑ์ ์ ์ธ๋ณํฉ์ ์ํด ์ฌ์ฉ ๋ฉ๋๋ค.
์) Array ์ธํฐํ์ด์ค tsconfig์
"target": "ES5"
์ผ ๊ฒฝ์ฐ,array ์ ์ธํฐํ์ด์ค๋ lib.es5.ts ์ ์ ์ธ๋ ์ธํฐํ์ด์ค๊ฐ ์ฌ์ฉ๋ฉ๋๋ค.
tsconfig ํ์ผ๋ด lib:["esnext"]
์ถ๊ฐ์ lib.es.2015.d.ts ์ ์ ์ธ๋ ์ธํฐํ์ด์ค๊ฐ ๋ณํฉ๋ฉ๋๋ค.
๊ฒฐ๊ณผ์ ์ผ๋ก ๊ฐ ์ ์ธ์ด ๋ณํฉ๋์ด ์ ์ฒด ๋ฉ์๋๋ฅผ ๊ฐ์ง๋ Array๋ฅผ ๊ฐ๊ฒ ๋ฉ๋๋ค.
์ด๋ค ๊ฒ์ ์ฌ์ฉํด์ผ ํ ๊น?
๋ณต์กํ ํ์ ์ผ ๊ฒฝ์ฐ :
โ๏ธ ํ์ ๋ณ์นญ ์ฌ์ฉ
ํ์ ๊ณผ ์ธํฐํ์ด์ค ๋๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ํํํ ์ ์๋ ๊ฐ๋จํ ๊ฐ์ฒด์ผ ๊ฒฝ์ฐ:
โ๏ธ ์ผ๊ด์ฑ๊ณผ ๋ณด๊ฐ์ ๊ด์ ์์ ๊ณ ๋ ค ํ ํ์๊ฐ ์์ต๋๋ค.
์คํ์ผ์ด ํ๋ฆฝ๋์ง ์์ ํ๋ก์ ํธ์ธ ๊ฒฝ์ฐ :
โ๏ธ API ์ ๋ํ ํ์ ์ ์ธ์ผ ๊ฒฝ์ฐ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉ ํฉ๋๋ค. (๋ณํฉ์ ์ ์ฉ)
โ๏ธ ๊ทธ๋ฌ๋ ํ๋ก์ ํธ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉ๋๋ ํ์ ์ ์ ์ธ ๋ณํฉ์ด ๋ฐ์ํ๋ ๊ฒ์ ์๋ชป๋ ์ค๊ณ ์ ๋๋คโ๏ธ -> ํ์ ์ฌ์ฉ ๊ถ๊ณ .
์ ๋ฆฌ
๋์ผํ ํ์ ์๊ทธ๋์ฒ๋ฅผ ๊ฐ์ง๋ ์ฌ๋ฌ๊ฐ์ ํจ์๋ฅผ ์์ฑํ ๋๋ ๋งค๊ฐ๋ณ์์ ํ์ ๊ณผ ๋ฐํํ์ ์ ๋ฐ๋ณตํด์ ์์ฑํ๋ ๊ฒ๋ณด๋ค ํจ์์ ์ฒด์ ํ์ ์ ์ธ์ ์ ์ฉํด์ผ ํฉ๋๋ค.
ํ์ ๊ณผ ์ธํฐํ์ด์ค์ ์ฐจ์ด๋ฅผ ์ดํดํ๊ณ ํ๋ก์ ํธ์์ ์ด๋ค ๋ฌธ๋ฒ์ ์ฌ์ฉํ ์ง ๊ฒฐ์ ํ ๋ ์ผ๊ด์ฑ๊ณผ ๋ณด๊ฐ๊ธฐ๋ฒ์ ๊ณ ๋ คํด์ผํฉ๋๋ค.
์ฐธ๊ณ ์๋ฃ