func in TS (1) : 함수 시그니처, type(타입 별칭), void

// 타입 생략 (비추천. 특히 함수에서는 타입을 꼼꼼히 달아두자.)
let test1 = (a, b) => {
  return a + b;
};

// 타입 주석
let test2 = (a: number, b: number): number => {
  return a + b;
};

// 함수 시그니처 이용. type 키워드를 이용해 타입 별칭 만듦
type addNumber = (arg2: number, arg1: number) => number;

let test3: addNumber = (a, b) => {
  return a + b;
};

 

함수 시그니쳐 부분을 보시면, 어떤 인자를 받고, 무엇을 리턴하는지를 type으로 만들어 놓은 후 함수에 할당만 하면 되는, 간편한 방법을 보실 수 있습니다. 일일히 타입을 지정하는 것보다 훨씬 빠릅니다.

type addNumber = (arg2: number, arg1: number) => number;

 

기본값

일반 함수처럼 파라미터를 정의하는 곳에 값을 할당하면 기본값이 됩니다.

interface IPerson {
  name: string;
  age: number;
}

export const makePerson = (name: string, age: number = 10): IPerson => {
  const person = { name, age };
  return person;
};

console.log(makePerson("jack", 23));
console.log(makePerson("mary"));

 

 

객체 반환하기

다음과 같이 객체를 반환하려고 하면 오류를 냅니다. 왜냐하면 컴파일러는 {}를 객체가 아닌 복합 실행문으로 인식하기 때문입니다.

const makePerson = (name: string, age: number = 10): IPerson => {name, age};

 

쉽게 말해서, JS에서 () => {} 처럼 함수형 화살표를 사용했을 때 {}는 객체가 아니라 무언가를 실행하라는 실행문입니다. 

따라서 객체를 리턴하기 위해서는 () => () 로 표시해줘야 합니다. JS를 생각해보면 당연한 사실인데 종종 잊어버릴 때가 있습니다.

const makePerson = (name: string, age: number = 10): IPerson => ({name, age});

 

 

매개변수에 비구조화 할당문 사용하기

파라미터에 비구조화 할당문을 사용할 수 있습니다만, 쉽게 보면 그냥 파라미터에 객체를 넣을 수 있다고 봐도 무방합니다.

interface IPerson {
  name: string;
  age: number;
}

export const makePerson = ({ name, age }: IPerson): IPerson => ({
  name,
  age,
});

console.log(makePerson({ name: "jack", age: 23 }));

 

객체 만들기

이건 기능이라기보다 팁, 혹은 아이디어에 가깝습니다만  [ ] 를 통해 객체의 키값을 만들어 줄 수 있다는 점을 눈여겨봅시다.

typescript에서의 mapped  type에서의 어노테이션과 비슷함을 알 수 있습니다.

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

console.log(makeObject("name", "darren")); // { name: 'darren' }
console.log(makeObject("item", "gun")); // { item: 'gun' }

 

 

this

메서드 사용시 this를 잘 활용하시면 됩니다. 아시다시피 화살표 함수는 사용하면 안됩니다.

class A {
  value = 1;

  method() {
    return console.log(`value : ${this.value}`);
  }
}

const a = new A();
a.method();

 

this를 활용한 메서드 체인

return을 this로 하면 메서드 체인을 구현할 수 있습니다.

class Calc {
  constructor(public value: number = 0) {}

  add(value: number) {
    this.value += value;
    return this;
  }
}

const calc = new Calc();

console.log(calc.add(3).add(5));

 

void

 

일반적으로 명시적으로 return해주는 값이 없으면 void라고 하며, 딱히 함수에 명확한 정의를 내리기 애매한 경우 () => void를 곧 잘 타이핑하곤 한다.

 

그러나 함수에서 () => void라는 타입을 할당한 경우와 직접적으로 void를 리턴값으로 명시한 경우가 다르니 조심하자.

type voidFunc = () => void

// void 반환은 강제가 아니라, 다른 모든 타입을 반환할 수 있음을 의미한다.
const myFunc: voidFunc = () => {
  return 'hello'
}

// 그러나 리터럴하게 함수 리턴값을 void로 정의한다면 말 그대로 아무 것도 반환해서는 안된다.
const myFunc2 = (): void => {
  return 'hello' // Type 'string' is not assignable to type 'void'.
}