[Typescript] 이펙티브 타입스크립트 정리(아이템9 ~ 16)

interface Person {
  name: string
}

const alice: Person = { name: 'Alice' } // Type is Person
const bob = { name: 'Bob' } as Person // Type is Person

interface Person {
  name: string
}
const alice: Person = {}
// ~~~~~ Property 'name' is missing in type '{}'
//       but required in type 'Person'
const bob = {} as Person // No error

interface Person {
  name: string
}
const alice: Person = {
  name: 'Alice',
  occupation: 'TypeScript developer',
  // ~~~~~~~~~ Object literal may only specify known properties
  //           and 'occupation' does not exist in type 'Person'
}
const bob = {
  name: 'Bob',
  occupation: 'JavaScript developer',
} as Person // No error

// tsConfig: {"strictNullChecks":false}

document.querySelector('#myButton').addEventListener('click', e => {
  e.currentTarget // Type is EventTarget
  const button = e.currentTarget as HTMLButtonElement
  button // Type is HTMLButtonElement
})

const elNull = document.getElementById('foo') // Type is HTMLElement | null
const el = document.getElementById('foo')! // Type is HTMLElement

interface Person {
  name: string
}
const body = document.body
const el = body as Person
// ~~~~~~~~~~~~~~ Conversion of type 'HTMLElement' to type 'Person'
//                may be a mistake because neither type sufficiently
//                overlaps with the other. If this was intentional,
//                convert the expression to 'unknown' first

interface Person {
  name: string
}
const el = (document.body as unknown) as Person // OK

> x = "hello"
> x.language = 'English'
> x.language
// undefined

interface Room {
  numDoors: number
  ceilingHeightFt: number
}
const r: Room = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: 'present',
  // ~~~~~~~~~~~~~~~~~~ Object literal may only specify known properties,
  //                    and 'elephant' does not exist in type 'Room'
}

interface Room {
  numDoors: number
  ceilingHeightFt: number
}
const obj = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: 'present',
}
const r: Room = obj // OK

interface Options {
  darkMode?: boolean
  [otherOptions: string]: unknown
}
const o: Options = { darkmode: true } // OK

function rollDice1(sides: number): number {
  /* COMPRESS */ return 0 /* END */
} // Statement
const rollDice2 = function(sides: number): number {
  /* COMPRESS */ return 0 /* END */
} // Expression
const rollDice3 = (sides: number): number => {
  /* COMPRESS */ return 0 /* END */
} // Also expression

type DiceRollFn = (sides: number) => number
const rollDice: DiceRollFn = sides => {
  /* COMPRESS */ return 0 /* END */
}

type BinaryFn = (a: number, b: number) => number
const add: BinaryFn = (a, b) => a + b
const sub: BinaryFn = (a, b) => a - b
const mul: BinaryFn = (a, b) => a * b
const div: BinaryFn = (a, b) => a / b

const checkedFetch: typeof fetch = async (input, init) => {
  const response = await fetch(input, init)
  if (!response.ok) {
    throw new Error('Request failed: ' + response.status)
  }
  return response
}

type TState = {
  name: string
  capital: string
}
interface IState {
  name: string
  capital: string
}

type TDict = { [key: string]: string }
interface IDict {
  [key: string]: string
}

type TFn = (x: number) => string
interface IFn {
  (x: number): string
}

const toStrT: TFn = x => '' + x // OK
const toStrI: IFn = x => '' + x // OK

type TPair<T> = {
  first: T
  second: T
}
interface IPair<T> {
  first: T
  second: T
}

type TState = {
  name: string
  capital: string
}
interface IState {
  name: string
  capital: string
}
interface IStateWithPop extends TState {
  population: number
}
type TStateWithPop = IState & { population: number }

type Input = {
  /* ... */
}
type Output = {
  /* ... */
}
interface VariableMap {
  [name: string]: Input | Output
}
type NamedVariable = (Input | Output) & { name: string }

type Pair = [number, number]
type StringList = string[]
type NamedNums = [string, ...number[]]

interface IState {
  name: string
  capital: string
}
interface IState {
  population: number
}
const wyoming: IState = {
  name: 'Wyoming',
  capital: 'Cheyenne',
  population: 500_000,
} // OK

console.log(
  'Cylinder 1 x 1 ',
  'Surface area:',
  6.283185 * 1 * 1 + 6.283185 * 1 * 1,
  'Volume:',
  3.14159 * 1 * 1 * 1
)
console.log(
  'Cylinder 1 x 2 ',
  'Surface area:',
  6.283185 * 1 * 1 + 6.283185 * 2 * 1,
  'Volume:',
  3.14159 * 1 * 2 * 1
)
console.log(
  'Cylinder 2 x 1 ',
  'Surface area:',
  6.283185 * 2 * 1 + 6.283185 * 2 * 1,
  'Volume:',
  3.14159 * 2 * 2 * 1
)

const surfaceArea = (r, h) => 2 * Math.PI * r * (r + h)
const volume = (r, h) => Math.PI * r * r * h
for (const [r, h] of [
  [1, 1],
  [1, 2],
  [1, 3],
]) {
  console.log(
    `Cylinder ${r} x ${h}`,
    `Surface area: ${surfaceArea(r, h)}`,
    `Volume: ${volume(r, h)}`
  )
}

function distance(a: { x: number; y: number }, b: { x: number; y: number }) {
  return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))
}
// 타입에 이름 붙히기
interface Point2D {
  x: number
  y: number
}
function distance(a: Point2D, b: Point2D) {
  /* ... */
}

// HIDE
interface Options {}
// END
type HTTPFunction = (url: string, options: Options) => Promise<Response>
const get: HTTPFunction = (url, options) => {
  /* COMPRESS */ return Promise.resolve(new Response()) /* END */
}
const post: HTTPFunction = (url, options) => {
  /* COMPRESS */ return Promise.resolve(new Response()) /* END */
}

interface Person {
  firstName: string
  lastName: string
}

interface PersonWithBirthDate extends Person {
  birth: Date
}

interface Person {
  firstName: string
  lastName: string
}
type PersonWithBirthDate = Person & { birth: Date }

interface State {
  userId: string
  pageTitle: string
  recentFiles: string[]
  pageContents: string
}
interface TopNavState {
  userId: string
  pageTitle: string
  recentFiles: string[]
}

interface State {
  userId: string
  pageTitle: string
  recentFiles: string[]
  pageContents: string
}
type TopNavState = {
  userId: State['userId']
  pageTitle: State['pageTitle']
  recentFiles: State['recentFiles']
}

interface State {
  userId: string
  pageTitle: string
  recentFiles: string[]
  pageContents: string
}
type TopNavState = {
  [k in 'userId' | 'pageTitle' | 'recentFiles']: State[k]
}

interface State {
  userId: string
  pageTitle: string
  recentFiles: string[]
  pageContents: string
}
type TopNavState = Pick<State, 'userId' | 'pageTitle' | 'recentFiles'>

interface SaveAction {
  type: 'save'
  // ...
}
interface LoadAction {
  type: 'load'
  // ...
}
type Action = SaveAction | LoadAction
type ActionType = 'save' | 'load' // Repeated types!

type ActionType = Action['type'] // Type is "save" | "load"

interface Options {
  width: number
  height: number
  color: string
  label: string
}
type OptionsKeys = keyof Options
// Type is "width" | "height" | "color" | "label"

interface Options {
  width: number
  height: number
  color: string
  label: string
}
class UIWidget {
  constructor(init: Options) {
    /* ... */
  }
  update(options: Partial<Options>) {
    /* ... */
  }
}

const INIT_OPTIONS = {
  width: 640,
  height: 480,
  color: '#00FF00',
  label: 'VGA',
}
type Options = typeof INIT_OPTIONS

function getUserInfo(userId: string) {
  // COMPRESS
  const name = 'Bob'
  const age = 12
  const height = 48
  const weight = 70
  const favoriteColor = 'blue'
  // END
  return {
    userId,
    name,
    age,
    height,
    weight,
    favoriteColor,
  }
}
// Return type inferred as { userId: string; name: string; age: number, ... }

type UserInfo = ReturnType<typeof getUserInfo>

interface Name {
  first: string
  last: string
}
type DancingDuo<T extends Name> = [T, T]

const couple1: DancingDuo<Name> = [
  { first: 'Fred', last: 'Astaire' },
  { first: 'Ginger', last: 'Rogers' },
] // OK
const couple2: DancingDuo<{ first: string }> = [
  // ~~~~~~~~~~~~~~~
  // Property 'last' is missing in type
  // '{ first: string; }' but required in type 'Name'
  { first: 'Sonny' },
  { first: 'Cher' },
]

type Rocket = { [property: string]: string }
const rocket: Rocket = {
  name: 'Falcon 9',
  variant: 'v1.0',
  thrust: '4,940 kN',
} // OK

interface Rocket {
  name: string
  variant: string
  thrust_kN: number
}
const falconHeavy: Rocket = {
  name: 'Falcon Heavy',
  variant: 'v1',
  thrust_kN: 15_200,
}

function parseCSV(input: string): { [columnName: string]: string }[] {
  const lines = input.split('\n')
  const [header, ...rows] = lines
  return rows.map(rowStr => {
    const row: { [columnName: string]: string } = {}
    rowStr.split(',').forEach((cell, i) => {
      row[header[i]] = cell
    })
    return row
  })
}

interface Row1 {
  [column: string]: number
} // Too broad
interface Row2 {
  a: number
  b?: number
  c?: number
  d?: number
} // Better
type Row3 =
  | { a: number }
  | { a: number; b: number }
  | { a: number; b: number; c: number }
  | { a: number; b: number; c: number; d: number }

type Vec3D = Record<'x' | 'y' | 'z', number>
// Type Vec3D = {
//   x: number;
//   y: number;
//   z: number;
// }

type Vec3D = { [k in 'x' | 'y' | 'z']: number }
// Same as above
type ABC = { [k in 'a' | 'b' | 'c']: k extends 'b' ? string : number }
// Type ABC = {
//   a: number;
//   b: string;
//   c: number;
// }

interface Array<T> {
  //...
  [n: number]: T
}

const xs = [1, 2, 3]
function checkedAccess<T>(xs: ArrayLike<T>, i: number): T {
  if (i < xs.length) {
    return xs[i]
  }
  throw new Error(`Attempt to access ${i} which is past end of array.`)
}

const xs = [1, 2, 3]
const tupleLike: ArrayLike<string> = {
  '0': 'A',
  '1': 'B',
  length: 2,
} // OK