4장 타입설계
28. 유효한 상태만 표현하는 타입을 지향하기
하나의 타입에 여러 상태값을 품고있다면 오류가 발생할 수 있습니다.
interface State {
text: string;
isLoading: boolean;
error?: string
}
JavaScript
복사
위와 같은 State하나로 Response, Error모든것을 처리하는 것은 성공과 실패 모두를 담을 수 있기 때문에 ts의 이점을 얻기 어렵습니다. 따라서 아래처럼 타입의 상태를 나누어서 표현해주는 것이 더 좋습니다.
interface RequestPending {
state: 'pending'
}
interface RequestError {
state: 'error',
error: string
}
interface RequestSuccess {
state: 'ok',
text: string
}
type RequestState = RequestPending | RequestError | RequestSuccess
JavaScript
복사
29. 사용할 때는 너그럽게, 생성할 때는 엄격하게
보통 매개변수는 타입반환에 비해 조건이 널럴하게 만들어줍니다. 여러 조건에따라 다양한 매개변수가 들어올 수 있기 때문입니다.
30. 문서에 타입 정보를 쓰지 않기
주석으로 타입에 대한 정보를 쓰지말고, 타입 이름을 바꾸거나, 명시적인 구조로 바꿔줍시다.
31. 타입 주변에 null 값 배치하기
let min, max;
for(const num of nums){
if(!min){
min = num;
max = num
} else {
min = Math.min(min, num);
max = Math.max(max, num);
}
}
return [min, max]
JavaScript
복사
위 처럼 min 하나만으로 조건을 검사하게 된다면, num이 0일때나, nums가 빈 배열일 때 min, max는 undefined로 남게되어 [undefined, undefined]를 반환해 빈값인데도 이상한 값을 리턴합니다. 즉 반환 타입은 (number, undefined)[]로 추론됩니다. 이를 해결하는 방법은 null을 통해 명시적으로 나타내줄 수 있습니다.
let result: [number, number] | null = null;
for(const num of nums){
if(!result){
...
JavaScript
복사
32. 유니온의 인터페이스보다는 인터페이스의 유니온을 사용하기
28장과 어느정도 이어지는 내용입니다.
이 방법은 실수가 나올 수 있습니다.
interface Layer {
layout: FillLayout | LineLayout | PointLayout;
paint: FillPaint | LinePaint | PointPaint;
}
JavaScript
복사
따라서 아래처럼 유니온 인터페이스를, 인터페이스의 유니온으로 바꿔줍니다.
interface FillLayer {
layout: FillLayout;
paint: FillPaint;
}
interface LineLayer {
layout: LineLayout;
paint: LinePaint;
}
interface PointLayer {
layout: PointLayout;
paint: PointPaint;
}
type Layer = FillLayer | LineLayer | PointLayer;
JavaScript
복사