TIL_21.01.30 🏃🏽‍♂️🏃🏽‍♂️

TS

클로저 JS => TS

const makeCounter = (initialValue) => {
  let count = initialValue;
  const increase = () => {
    return count++;
  }
  return increase;
}

const makeCounter = (initialValue: number): (() => number) => {
  let count = initialValue;
  const increase = (): number => {
    return count++;
  };
  return increase;
};

Defualt parameter

const sum = (a: number, b: number = 2): number => a + b;

console.log(sum(10)); // 12

Indexable type

type KeyValueType = {
  [key: string]: string;
};

const makeObject = (key: string, value: string): KeyValueType => ({
  [key]: value
});

console.log(makeObject("name", "lee")); // {name: "lee"}

Class method

class Person {
  constructor(public name: string) {}
  sayName(): string {
    return this.name;
  }
}

const user1 = new Person("Kim");
console.log(user1.sayName()); // Kim

Method chain

class Person {
  constructor(public name: string, public friends: string[] = []) {}
  sayName(): string {
    return this.name;
  }
  addFriend(friendName: string): this {
    this.friends.push(friendName);
    return this; // this를 반환해서 metod chaining이 가능하게 만들어준다.
  }
}

const user1 = new Person("Kim");
const friends = user1.addFriend("lee").addFriend("choi").addFriend("park")
  .friends;

console.log(friends); // ["lee", "choi", "park"]

Generic

배열을 다루는 함수를 작성할 때는 타입이 고정된 함수를 만들기보다는 제너릭 타입을 사용하는 편리하다.

const arrayLength = <T>(array: T[]) => array.length;

console.log(arrayLength(["str", 2])); // 2

제너릭 형태로 구현된 함수는 원칙적으로 다음과 같은 형태로 명시해 주어야한다. 하지만 생략해도 알아서 타입 추론을 하기 때문에 생략이 가능하다.

const saySomething = <T>(something: T): T => something;

console.log(saySomething<number>(20));
console.log(saySomething<string>("Hello!"));

Function signature

변수에 타입이 있듯 함수 또한 타입이 있다. 함수의 타입을 함수의 시그니처라고 한다.

const sum = (a: number): number => a;

const foo: (name: string, age: number) => number = function (
  name: string,
  age: number
): number {
  return age;
};

foo("lee", 20);

type SumFunc = (num1: number, num2: number) => number;

const bar: SumFunc = function (numb1: number, numb2: number): number {
  return numb1 + numb2;
};