TIL

interface Point {
  x: number
  y: number
}

const obj = {
  x: 10,
  y: 10,
  name: "point_x",
}

printPoint(obj)

function printPoint(point: Point): void {
  console.log(point)
}

expect().toBe() vs expect().toEqual()

const inputArr = ["A", "B", "C"]

//...some code

expect(inputArr).toEqual(["A", "B", "C"]) // Pass
expect(inputArr).toEqual(["A", "B", "C"]) // Fail

const duck1 = {
  speak: function () {
    console.log("꽥꽥")
  },
}

const duck2 = {
  speak: function () {
    console.log("꿕꿕")
  },
}

function makeDuckSpeak(duck) {
  duck.speak()
}

makeDuckSpeak(duck1) //'꽥꽥' 같은 오리타입
makeDuckSpeak(duck2) //'꿕꿕' 같은 오리타입

let tuple: [string, number, string]
tuple = ["asdf", 123, "asdf"]

// 평소 당연하게 생각한 것
enum Color {
  Red, //0
  Green, //1
  Blue, //2
}

Color[0] //RED
Color[1] //Green
Color[2] //Blue

// 새로 알게 된 것 - 시작 지점에 따라 자동으로 number값이 달라짐.
enum Color {
  Red = 1, //1
  Green, //2
  Blue, //3
}

Color[1] //RED
Color[2] //Green
Color[3] //Blue

let obj: Object = [] // 들어가긴 한다.
obj.forEach(() => {}) //당연히 불가능

let obj: Object = 1 //들어간다.
obj.toFixed() //불가

let obj: any = [] // 들어간다.
obj.forEach(() => {}) //가능

let obj: any = 1 //들어간다.
obj.toFixed() //가능

let i: string = undefined
let j: number = undefined

let some: any = "123"

;(<string>some).length(some as string).length

interface Color {
  r?: number
  g?: number
  b?: number
}

interface ColorLike {
  r?: number
  g?: number
  b?: number
  a: number
}

getColor({ r: 10, g: 10, b: 10, a: 10 }) // 객체 리터럴이 넘어 올때는 컴파일 에러가 발생한다.

getColor({ r: 10, g: 10, b: 10, a: 10 } as ColorLike) // 이렇게 구조가 포함된 타입을 지정해주면 초과하는 프로퍼티가 있더라도 구조가 포함되어있다면 문제가 없다.

let colorLike = { r: 10, g: 10, b: 10, a: 10 }
getColor(colorLike) // 이것도 가능
function getColor(color: Color) {
  console.log(color)
}

interface SquareConfig {
  color?: string
  width?: number
  [propName: string]: any
}

interface SearchFunc {
  (source: string, subString: string): boolean
}
//그냥 이렇게 리터럴로 정의 하는 경우가 더 많은 듯.
;(source: string, subString: string) => boolean

interface StringArray {
  [index: string]: string
}

interface NumberDictionary {
  [index: string]: number
  length: number // 성공, length는 숫자입니다
  name: string // 오류, `name`의 타입은 인덱서의 하위타입이 아닙니다
}

interface ConstructorType {
  new (h: number, m: number): SomeInterface
}

interface SomeInterface {
  //
}

// 불가능 static 메서드인 constructor는 interface로 체크되지 않는다.
class Clock implements ClockConstructor {
  currentTime: Date
  constructor(h: number, m: number) {}
}

//이렇게 생성자를 위임해서 class를 생성해야 한다.
function createClock(
  ctor: ClockConstructor,
  hour: number,
  minute: number
): ClockInterface {
  return new ctor(hour, minute)
}

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ")
}

class Animal {
  #name: string
  constructor(theName: string) {
    this.#name = theName
  }
}

new Animal("Cat").#name // 프로퍼티 '#name'은 비공개 식별자이기 때문에 'Animal' 클래스 외부에선 접근할 수 없습니다.

class Employee {
  private _fullName: string

  get fullName(): string {
    return this._fullName
  }
  set fullName(newName: string) {
    // 제약 사항들

    this.full_name
  }
}

let emp = new Employee()

emp.fullName = "asd" //제약 사항이 체크되어 들어간다.
console.log(emp.fullName)

interface GenericIdentityFn {
  <T>(arg: T): T
}

function identity<T>(arg: T): T {
  return arg
}

let myIdentity1: <T>(arg: T) => T = identity
let myIdentity2: GenericIdentityFn = identity
let myIdentity3: { <T>(arg: T): T } = identity

interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length) // 이제 .length 프로퍼티가 있는 것을 알기 때문에 더 이상 오류가 발생하지 않습니다.
  return arg
}

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

let x = { a: 1, b: 2, c: 3, d: 4 }

getProperty(x, "a") // 성공
getProperty(x, "m") // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음.

interface WOOOOOOOProps {
  idx: number
}
function WOOOOOOO({ idx }: WOOOOOOOProps) {
  const calc = () => {
    return idx
  }
  return <div>{calc()}</div>
}

interface FOOOOOOProps {
  idx: number
}
function FOOOOOO({ idx }: FOOOOOOProps) {
  const calc1 = () => {
    return idx
  }

  //보통 이렇게 쓸 이유가 없지만 deps의 행동을 보기 위해 이렇게 기술
  // 일반적으로 이렇게씀
  /*
  const calc2 = useCallback(() => {
    return idx; 의미가 없다.
  }, [idx])
  */
  const calc2 = useCallback(calc1, [])

  return <div>{calc2()}</div>
}

function APP() {
  const [counter, setCounter] = useState(0)

  return (
    <>
      <WOOOOOOO idx={counter} />
      <FOOOOOO idx={counter} />
      <button onClick={() => setCounter(counter + 1)}>++++++++</button>
    </>
  )
}

import { useState } from "react"

export default function FunctionComponentCounter() {
  const [count, setCounter] = useState(0)

  const onClickAddThree = () => {
    //호출시 3씩 업데이트 된다.
    setCounter(prev => prev + 1)
    setCounter(prev => prev + 1)
    setCounter(prev => prev + 1)
  }

  const onClickOne = () => {
    //호출시 1씩 업데이트 된다.
    setCounter(count + 1)
    setCounter(count + 1)
    setCounter(count + 1)
  }

  return (
    <div>
      <h1>function</h1>
      <h1>{count}</h1>
      <button onClick={onClick}>add three</button>
      <button onClick={onClickOne}>add one</button>
    </div>
  )
}

const onClickOne = async () => {
  await fetch("")
  setCounter(count - 1)
  setCounter(count + 1)
  setCounter(count + 1)
}