3장. 타입추론

interface Product{ id: number; name: string; price: number; } function logProduct(product: Product) { const id: number = product.id; const name: string = product.name; const price: number = product.price; console.log(id, nmae, price); }

function logProduct(product: Product) { const {id, name, price} = product; console.log(id, nmae, price); }

app.get('/health', (reuqest, response) => { response.send("Ok"); });

const elmo: Product = { name: 'Tickle Me Elmo', id: '048188 627152', price: 28.99, };

function getQuote(ticker: string) { return fetch(`https://quotes.example.com/?q=${ticker}`) .then(response => response.json()); }

const cache: {[ticker: string]: number} = {}; function getQuote(ticker: string) { if (ticker in cache) { return cache[ticker]; } return fetch(`https://quotes.example.com/?q=${ticker}`) .then(response => response.json()) .then(quote => { cache[ticker] = quote; return quote as number; }); }

getQuote('MSFT').then(considerBuying); // ~~~~ // Property 'then' does not exist on type 'number | Promise<number>'

let productId = "12-34-56"; fetchProduct(productId); productId = 123456; // ~~~~~~ '123456' is not assignable to type 'string'. fetchProductBySerialNumber(productId); // ~~~~~~~~~ // Argument of type 'string' is not assignable to parameter of type 'number'

interface Vector3 { x : number; y: number; z: number; } function getComponent(vector: Vector3, axis: 'x' | 'y' | 'z') { return vector[axis]; }

let x = 'x'; let vec = {x: 10, y: 20, z: 30}; getComponent(vec, x); // ~ Argument of type 'string' is not assignable // to parameter of type '"x" | "y" | "z"'

const elem = document.getElementById('what-time-is-it'); // ^? const elem: HTMLElement | null if (typeof elem === 'object') { elem; // ^? const elem: HTMLElement | null }

interface UploadEvent { type: 'upload'; filename: string; contents: string } interface DownloadEvent { type: 'download'; filename: string; } type AppEvent = UploadEvent | DownloadEvent; function handleEvent(e: AppEvent) { switch (e.type) { case 'download': console.log('Download', e.filename); // ^? (parameter) e: DownloadEvent break; case 'upload': console.log('Upload', e.filename, e.contents.length, 'bytes'); // ^? (parameter) e: UploadEvent break; } }

function isInputElement(el: HTMLElement): el is HTMLInputElement { return 'value' in el; } function getElementContent(el: HTMLElement) { if (isInputElement(el)) { return el.value; // ^? (parameter) el: HTMLInputElement } return el.textContent; // ^? (parameter) el: HTMLElement }

const pt = {}; pt.x = 3; pt.y = 4;

const pt = {}; // ^? const pt: {} pt.x = 3; // ~ Property 'x' does not exist on type '{}' pt.y = 4; // ~ Property 'y' does not exist on type '{}'

interface Point { x: number; y: number; } const pt: Point = {}; // ~~ Type '{}' is missing the following properties from type 'Point': x, y pt.x = 3; pt.y = 4;

declare let hasMiddle: boolean; const firstLast = {first: 'Harry', last: 'Truman'}; const president = {...firstLast, ...(hasMiddle ? {middle: 'S'} : {})}; // ^? const president: { // middle?: string; // first: string; // last: string; // } // or: const president = {...firstLast, ...(hasMiddle && {middle: 'S'})};

interface Coordinate { x: number; y: number; } interface BoundingBox { x: [number, number]; y: [number, number]; } interface Polygon { exterior: Coordinate[]; holes: Coordinate[][]; bbox?: BoundingBox; }

declare function fetchURL( url: string, callback: (response: string) => void ): void; fetchURL(url1, function(response1) { fetchURL(url2, function(response2) { fetchURL(url3, function(response3) { // ... console.log(1); }); console.log(2); }); console.log(3); }); console.log(4); // Logs: // 4 // 3 // 2 // 1

const page1Promise = fetch(url1); page1Promise.then(response1 => { return fetch(url2); }).then(response2 => { return fetch(url3); }).then(response3 => { // ... }).catch(error => { // ... });

async function fetchPages() { const response1 = await fetch(url1); const response2 = await fetch(url2); const response3 = await fetch(url3); // ... }

async function fetchPages() { const [response1, response2, response3] = await Promise.all([ fetch(url1), fetch(url2), fetch(url3) ]); // ... }

function timeout(timeoutMs: number): Promise<never> { return new Promise((resolve, reject) => { setTimeout(() => reject('timeout'), timeoutMs); }); } async function fetchWithTimeout(url: string, timeoutMs: number) { return Promise.race([fetch(url), timeout(timeoutMs)]); }

// Inline form setLanguage('JavaScript'); // Reference form let language = 'JavaScript'; setLanguage(language);

function setLanguage(language: string) { /* ... */ } setLanguage('JavaScript'); // OK let language = 'JavaScript'; setLanguage(language); // OK

type Language = 'JavaScript' | 'TypeScript' | 'Python'; function setLanguage(language: Language) { /* ... */ } setLanguage('JavaScript'); // OK let language = 'JavaScript'; setLanguage(language); // ~~~~~~~~ Argument of type 'string' is not assignable // to parameter of type 'Language'

const rowsA = rawRows.slice(1).map(rowStr => { const row = {}; rowStr.split(',').forEach((val, j) => { row[headers[j]] = val; // ~~~~~~~~~~~~~~~ No index signature with a parameter of // type 'string' was found on type '{}' }); return row; }); const rowsB = rawRows.slice(1) .map(rowStr => rowStr.split(',').reduce( (row, val, i) => (row[headers[i]] = val, row), // ~~~~~~~~~~~~~~~ No index signature with a parameter of // type 'string' was found on type '{}' {}));

const rows = rawRows.slice(1) .map(rowStr => _.zipObject(headers, rowStr.split(','))); // Type is _.Dictionary<string>[]

let allPlayers = []; // ~~~~~~~~~~ Variable 'allPlayers' implicitly has type 'any[]' // in some locations where its type cannot be determined for (const players of Object.values(rosters)) { allPlayers = allPlayers.concat(players); // ~~~~~~~~~~ Variable 'allPlayers' implicitly has an 'any[]' type }

let allPlayers: BasketballPlayer[] = []; for (const players of Object.values(rosters)) { allPlayers = allPlayers.concat(players); // OK }

const allPlayers = Object.values(rosters).flat(); // OK, type is BasketballPlayer[]

const bestPaid = _(allPlayers) .groupBy(player => player.team) .mapValues(players => _.maxBy(players, p => p.salary)!) .values() .sortBy(p => -p.salary) .value() // Type is BasketballPlayer[]