대시보드 1차 프로젝트를 마치고 유지보수를 위한 2차 프로젝트가 시작하는 시점인 지금, 이번 프로젝트의 골자인 코드 리펙토링을 하기 위해 코드를 다시 살펴 보았습니다.
저번 프로젝트를 시작하면서 typescript를 처음 배웠고, 마감일 또한 타이트하였기에 군데군데 변수들이 any로 적혀있고 객체들 또한 타입지정 없이 중구난방으로 적혀있는 상태였습니다.
하여 기본을 다시 배우고 코드 정화작업을 실시하기 위해 가장 문제가 심각했던 함수의 타입정의에 대해 포스팅을 남기려고 합니다.
1. Call Signatures
call signature는 보통 코드위에 마우스를 올리면 보이는 파라미터의 타입들을 의미합니다.
아래의 코드와 같은 형태인 데, 파라미터가 많이 생기게 되면 타입을 정의해주는 call signatuere에 의해 길이가 길어지기 때문에, 미관상 좋지 못합니다.
(사실 파라미터가 많으면 interface로 정의하는게)
const add = (a: number, b: number) => a + b;
type Add = (a: number, b: number) => number;
const add2: Add = (a, b) => a + b;
위와 같이 타입으로 정의하여 코드를 작성하면 타입을 우선적으로 고려하여 작성하기 때문에 타입오류방지가 유리하게 됩니다.
2. Overloading
오버로딩의 정의
TypeScript에선 동일한 이름을 가진 함수를 여러 개 정의할 수 있으며
(C++에서 사용하는 overloading과 동일)
각 함수는 서로 다른 타입을 가지는 매개변수를 가지고 정의해야 합니다.
이름이 동일하지만 다른 매개변수를 가지는 함수를 함수 오버로딩이라고 합니다.
type Add2 = {
(a: number, b: number): number;
(a: number, b: string): number;
};
const add3: Add2 = (a, b) => a + b;
console.log(add3(1, 2));
console.log(add3(1, "2"));
객체 타입의 오버로딩
아래의 코드와 같이 활용하여 코드를 정리할 수 있습니다.
type Config = {
path: string;
state: number;
};
type Push = {
(path: string): void;
(config: Config): void;
};
const push: Push = (config) => {
if (typeof config === "string") console.log(config);
else console.log(config.path);
};
const test: Config = {
path: "/home",
state: 1,
};
push("/house");
push(test);
매개변수의 갯수가 다른 오버로딩
매개변수로 받는 갯수가 다른 경우 선택적 매개변수 처리를 위해 '?'를 붙여 optional하게 변경해줄 수 있습니다.
type AddNum = {
(a: number, b: number): number;
(a: number, b: number, c: number): number;
};
const addNum: AddNum = (a, b, c?: number) => {
if (c) return a + b + c;
return a + b;
};
console.log(addNum(1, 2))
console.log(addNum(1, 2, 3))
