Woowahan Typescript 세미나 정리(1)

- 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템
- 컴파일러가 자동으로 타입을 추론하는 시스템

- 타입을 명시적으로 지정할 수 있다.
- 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론한다.

function f2(a) {
  return a * 38
}

// 사용자는 사용법을 숙지하지 않은 채, 문자열을 사용하여 함수를 실행했다.
console.log(f2('Mark')) // NaN

function f2(a) {
  return a * 38
}

// 사용자는 a가 any 이기 때문에, 사용법에 맞게 문자열을 사용하여 함수를 실행했다.
console.log(f2('Mark')) // NaN

function f4(a: number) {
  if (a > 0) {
    return a * 38
  }
}
console.log(f(-5) + 5) // NaN

type EatType = (food: string) => void
interface IEat {
  (food: string): void
}

type PersonList = string[]
interface IPersonList {
  [index: number]: string
} // indexable 타입이라고 부름

interface ErrorHandling {
  success: boolean
  error?: { message: string }
}

interface ArtistsData {
  artists: { name: string }[]
}

// type alias
type ArtistResponseType = ArtistsData & ErrorHandling
// interface
interface IArtistsResponse extends ArtistsData, ErrorHandling {}

let art: ArtistsResponseType
let iar: IArtistsResponse

interface Bird {
  fly(): void
  layEggs(): void
}

interface Fish {
  swim(): void
  layEggs(): void
}

type PetType = Bird | Fish

interface MergingInterface {
  a: string
}
interface MergingInterface {
  b: string
}
let mi: MergingInterface // mi 는 a 와 b 모두 타입으로 갖고있다.

let sub1: 1 = 1
let sup1: number = sub1
sub1 = sup1 // error

let sub2: number[] = [1]
let sup2: object = sub2
sub2 = sup2 // error

let sub3: [number, number] = [1, 2]
let sup3: number[] = sub3
sub3 = sup3 // error

let sub5: never = 0 as never
let sup5: number = sub5
sub5 = sup5 // error

// Function returning never must have unreachable end point
function error(message: string): never {
  throw new Error(message)
}
// Inferred return type is never
function fail() {
  return error('Something failed')
}
// Function returning never must have unreachable end point
function infiniteLoop(): never {
  while (true) {}
}

class Animal {}
class SubDog extends Animal {}
let sub6: SubDog = new SubDog()
let sup6: Animal = sub6
sup6 = sub6 // error

let sub8: { a: string; b: number } = { a: '', b: 1 }
let sup8: { a: string | number; b: number } = sub8

let sub9: Array<{ a: string; b: number }> = [{ a: '', b: 1 }]
let sup9: Array<{ a: string | number; b: number }> = sub9

class Person {}
class Developer extends Person {}
class StartupDeveloper extends Developer {}

function tellme(f: (d: Developer) => Developer) {}

// okay
tellme(function dToD(d: Developer): Developer {
  return new Developer()
})

// okay
tellme(function pToD(d: Person): Developer {
  return new Developer()
})

// so..so..
tellme(function sToD(d: StartupDeveloper): Developer {
  return new Developer()
})

function funknown(a: unknown): number | string | void {
  a.toString() // error! Obejct is of type 'unknown'

  if (typeof a === 'number') {
    return a * 38
  } else if (typeof a === 'string') {
    return `Hello ${a}`
  }
}

console.log(funknown(10)) // 380
console.log(funknown('Mark')) // Hello Mark
console.log(funknown(true)) // undefined

let a = 'Mark' // string
const b = 'Mark' // 'Mark' => literal type

let c = 38 // number
const d = 38 // 38 => literal type

let e = false // boolean
const f = false // false => literal type

let g = ['Mark', 'Haeun'] // string[]
const h = ['Mark', 'Haeun'] // string[]

const i = ['Mark', 'Haeun', 'Bokdang'] as const

let j = [0, 1, null] // (number | null)[]
const k = [0, 1, null] // (number | null)[]

class Animal {}
class Rhino extends Animal {}
class Elephant extends Animal {}
class Snake extends Animal {}

let l = [new Rhino(), new Elephant(), new Snake()] // (Rhino | Elephant | Snake)[]
const m = [new Rhino(), new Elephant(), new Snake()] // (Rhino | Elephant | Snake)[]
const n = [new Animal(), new Rhino(), new Elephant(), new Snake()] // Animal[]
const o: Animal[] = [new Rhino(), new Elephant(), new Snake()] // Animal[]

const click = e => {
  e // any
}
document.addEventListener('click', click)

document.addEventListener('click', e => {
  e // MouseEvent
})

function getNumber(value: number | string): number {
  value // number | string
  if (typeof value === 'number') {
    value // number
    return value
  }
  value // string
  return -1
}

class NegativeNumberError extends Error {}

function getNumber(value: number): number | NegativeNumberError {
  if (value < 0) return new NegativeNumberError()
  return value
}

function main() {
  const num = getNumber(-10)
  if (num instanceof NegativeNumberError) {
    return
  }
  num // number
}

interface Admin {
  id: string
  role: string
}

interface User {
  id: string
  email: string
}

function redirect(user: Admin | User) {
  if ('role' in user) {
    routeToAdminPage(user.role)
  } else {
    routeToHomePage(user.email)
  }
}

interface IMaching {
  type: string
}

class Car implements IMachine {
  type: 'CAR'
  wheel: number
}

class Boat implements IMachine {
  type: 'BOAT'
  motor: number
}

function getWhellOrMotor(machine: Car | Boat): number {
  if (machine.type === 'CAR') {
    return machine.wheel
  }
  return machine.motor
}

function getWheelOrMotor(machine: any): number {
  if (isCar(machine)) {
    return machine.wheel
  } else if (isBoat(machine)) {
    return machine.motor
  }
  return -1
}

function isCar(arg: any): arg is Car {
  return arg.type === 'CAR'
}

function isBoat(arg: any): arg is Boat {
  return arg.type === 'BOAT'
}

class Square2 {
  area // error! implicit any
  sideLength // error! implicit any
}

class Square2 {
  area: number
  sideLength: number
}

const squre = new Square2()
console.log(squre.area)

class Square {
  area
  sideLength

  constructor(sideLength: number) {
    this.sideLength = sideLength
    this.area = sideLength ** 2
  }
}

class Square {
  sideLength;

  constructor(sideLength: number) {
    if (/* conditional */) {
      this.sideLength = sideLength;
    }
  }

  get area() {
    return this.sideLength ** 2;
  }
}

class Square {
  sideLength // !로 의도를 표현

  constructor(sideLength: number) {
    this.initialize(sideLength)
  }
  initialize(sideLength: number) {
    this.sideLength = sideLength
  }

  get area() {
    return this.sideLength ** 2
  }
}