Logo
Hyunsu Blog
typescript_book

๐Ÿ“†Published :Dec 9, 2021 โ€ข

๐Ÿ“†Updated :Dec 9, 2021 โ€ข

โ˜•๏ธ1min

ํ•จ์ˆ˜ ํ‘œํ˜„์‹, ํƒ€์ž…๊ณผ ์ธํ„ฐํŽ˜์ด์Šค

  • ๋Œ„ ๋ฐด๋”์บ„์˜ ์ดํŽ™ํ‹ฐ๋ธŒ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๋„์„œ์˜ ์•„์ดํ…œ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; } Screen Shot 2021-12-10 at 1 42 49 AM

์•„์ดํ…œ 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 ๋ชจ๋‘ ์„ ์–ธ๋˜์–ด์žˆ์ง€ ์•Š๋‹ค๊ณ  ์—๋Ÿฌ๋ฅผ ๋‚ด์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Screen Shot 2021-12-09 at 11 39 03 PM
  • type ํ‚ค์›Œ๋“œ๋ฅผ ๊ฐ€์ง„ stateB์—์„  name,capital,population,latitude๊นŒ์ง€ ์—๋Ÿฌ๋ฅผ ๋‚ด์•ผํ•œ๋‹ค๊ณ  ์˜ˆ์ƒ์„ ํ•˜์ง€๋งŒ, ์‹ค์ง€ name,capital,population ๋งŒ ์—๋Ÿฌ๋ฅผ ๋‚ด์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Screen Shot 2021-12-09 at 11 39 15 PM

์ฆ‰, ์ธํ„ฐํŽ˜์ด์Šค๋Š” ์œ ๋‹ˆ์˜จ ํƒ€์ž… ๊ฐ™์€ ๋ณต์žกํ•œ ํƒ€์ž…์„ ํ™•์žฅํ•˜์ง€๋Š” ๋ชปํ•ฉ๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ํƒ€์ž…์˜ ํ™•์žฅ์„ ์›ํ•  ์‹œ, ํƒ€์ž…๊ณผ &๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ 
ํƒ€์ž…์€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ, ํƒ€์ž… ์ •์˜์‹œ ์ธํ„ฐํŽ˜์ด์Šค๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ ํ•ฉ๋‹ˆ๋‹ค.

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 ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค๋ฉด ์—๋Ÿฌ๋ฅผ ๋ƒ…๋‹ˆ๋‹ค.
Screen Shot 2021-12-10 at 12 18 57 AM
  • ๊ฐ™์€ ์ด๋ฆ„์˜ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์†์„ฑ์„ ํ™•์žฅํ•˜๋Š” ๊ฒƒ์„ ์„ ์–ธ ๋ณ‘ํ•ฉ(declaration merging) ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

  • ์ธํ„ฐํŽ˜์ด์Šค๋Š” ํƒ€์ž…์„ ์–ธ ํŒŒ์ผ ์ž‘์„ฑ์‹œ ์„ ์–ธ๋ณ‘ํ•ฉ์„ ์œ„ํ•ด ์‚ฌ์šฉ ๋ฉ๋‹ˆ๋‹ค.

  • ์˜ˆ) Array ์ธํ„ฐํŽ˜์ด์Šค tsconfig์˜ "target": "ES5" ์ผ ๊ฒฝ์šฐ,

    • array ์˜ ์ธํ„ฐํŽ˜์ด์Šค๋Š” lib.es5.ts ์— ์„ ์–ธ๋œ ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

      Screen Shot 2021-12-10 at 12 27 52 AM Screen Shot 2021-12-10 at 1 09 11 AM

tsconfig ํŒŒ์ผ๋‚ด lib:["esnext"] ์ถ”๊ฐ€์‹œ lib.es.2015.d.ts ์— ์„ ์–ธ๋œ ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ๋ณ‘ํ•ฉ๋ฉ๋‹ˆ๋‹ค.

Screen Shot 2021-12-10 at 1 01 36 AMScreen Shot 2021-12-10 at 1 05 49 AM

๊ฒฐ๊ณผ์ ์œผ๋กœ ๊ฐ ์„ ์–ธ์ด ๋ณ‘ํ•ฉ๋˜์–ด ์ „์ฒด ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง€๋Š” Array๋ฅผ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ?

  • ๋ณต์žกํ•œ ํƒ€์ž… ์ผ ๊ฒฝ์šฐ :

    โœ”๏ธ ํƒ€์ž… ๋ณ„์นญ ์‚ฌ์šฉ

  • ํƒ€์ž…๊ณผ ์ธํ„ฐํŽ˜์ด์Šค ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ„๋‹จํ•œ ๊ฐ์ฒด์ผ ๊ฒฝ์šฐ:

    โœ”๏ธ ์ผ๊ด€์„ฑ๊ณผ ๋ณด๊ฐ•์˜ ๊ด€์ ์—์„œ ๊ณ ๋ ค ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์Šคํƒ€์ผ์ด ํ™•๋ฆฝ๋˜์ง€ ์•Š์€ ํ”„๋กœ์ ํŠธ์ธ ๊ฒฝ์šฐ :

    โœ”๏ธ API ์— ๋Œ€ํ•œ ํƒ€์ž…์„ ์–ธ์ผ ๊ฒฝ์šฐ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉ ํ•ฉ๋‹ˆ๋‹ค. (๋ณ‘ํ•ฉ์— ์œ ์šฉ)

    โœ”๏ธ ๊ทธ๋Ÿฌ๋‚˜ ํ”„๋กœ์ ํŠธ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ํƒ€์ž…์— ์„ ์–ธ ๋ณ‘ํ•ฉ์ด ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์€ ์ž˜๋ชป๋œ ์„ค๊ณ„ ์ž…๋‹ˆ๋‹คโ—๏ธ -> ํƒ€์ž… ์‚ฌ์šฉ ๊ถŒ๊ณ .

์ •๋ฆฌ

  • ๋™์ผํ•œ ํƒ€์ž… ์‹œ๊ทธ๋‹ˆ์ฒ˜๋ฅผ ๊ฐ€์ง€๋Š” ์—ฌ๋Ÿฌ๊ฐœ์˜ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•  ๋•Œ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜์˜ ํƒ€์ž…๊ณผ ๋ฐ˜ํ™˜ํƒ€์ž…์„ ๋ฐ˜๋ณตํ•ด์„œ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํ•จ์ˆ˜์ „์ฒด์˜ ํƒ€์ž…์„ ์–ธ์„ ์ ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ํƒ€์ž…๊ณผ ์ธํ„ฐํŽ˜์ด์Šค์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜๊ณ  ํ”„๋กœ์ ํŠธ์—์„œ ์–ด๋–ค ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•  ๋•Œ ์ผ๊ด€์„ฑ๊ณผ ๋ณด๊ฐ•๊ธฐ๋ฒ•์„ ๊ณ ๋ คํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.


์ฐธ๊ณ ์ž๋ฃŒ

Hi, I'm Hyunsu ๐Ÿ‘‹

Profile Image

์•ˆ๋…•ํ•˜์„ธ์š”. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ฃผํ˜„์ˆ˜์ž…๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ํ’๋ถ€ํ•˜๊ณ  ๊ฐ€์น˜ ์žˆ๋Š” ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ์ผ์— ๋ฟŒ๋“ฏํ•จ์„ ๋Š๋‚๋‹ˆ๋‹ค.

์˜ต์‹œ๋””์–ธ(Obsidian)์—์„œ ํ˜„์žฌ ๋ธ”๋กœ๊ทธ๋กœ ํ•˜๋‚˜์”ฉ ๊ธ€์„ ์˜ฎ๊ธฐ๋Š” ๊ณผ์ •์— ์žˆ์–ด์š”. โ˜•๏ธ ๐Ÿ‘ฉโ€๐Ÿ’ป โ›ท

Github on ViewReach Me Out