함수 시그니처를 구현할 때, 함수의 매개변수는 타입의 범위가 넓어도 되지만, 결과를 반환할 때는 일반적으로 타입의 범위가 더 구체적이어야 한다.
[수정 전]
|
declare function setCamera(camera: CameraOptions): void; // 매개변수 타입의 범위를 넓게 해야한다.
declare function viewportForBounds(bounds: LngLatBounds): CameraOptions; // 매개변수 타입의 범위를 넓게 해야한다.
interface CameraOptions {
center?: LngLat;
zoom?: number;
bearing?: number;
pitch?: number;
}
type LngLat =
{ lng: number; lat: number;} |
{ lon: number; lat: number;} |
[number, number];
type LngLatBounds =
{ northeast: LngLat, southwest: LngLat} |
[LngLat, LngLat] |
[number, number, number, number];
function focusOnFeature(f: Feature) {
const bounds = clacBoundBox(f);
const camera = viewportForBounds(bounds);
setCamera(camera);
const {center: {lat, lng}, zoom} = camera; // 에러) 반환 타입의 범위가 넓으면 반환 받을때 어려움을 겪는다.
}
|
[수정 후]
|
interface LngLatFix {
lng: number;
lat: number;
};
type LngLatLike = LngLatFix | { lon: number; lat: number} | [number, number] ;
interface Camera {
center: LngLatFix;
zoom: number;
bearing: number;
pitch: number;
}
interface CameraOptionsFix extends Omit<Partial<Camera>, 'center'> {
center?: LngLatLike;
}
type LngLatBoundsFix =
{ northeast: LngLatLike, southwest: LngLatLike} |
[LngLatLike, LngLatLike] |
[number, number, number, number];
declare function setCameraFix(camera: CameraOptions): void;
declare function viewportForBoundsFix(bounds: LngLatBoundsFix): Camera;
function focusOnFeature2(f: Feature) {
const bounds = clacBoundBoxFix(f);
const camera = viewportForBoundsFix(bounds);
setCamera(camera);
const {center: {lat, lng}, zoom} = camera; // 정상) 반환 타입은 좁혀진 상태로 하는것이 유리하다.
|
* 보통 함수의 매개변수 타입은 반환 타입에 비해 넓은 범위의 타입을 받도록 한다.
* 옵션 속성과 유니온 타입은 반환 타입보다는 매개변수 타입에 적용하는것이 일반적이다.
* 매개변수와 반환 타입의 재사용을 위해서 base 구조(strict 한)와 느슨한 형태를 함께 도입하는 것을 추천한다.
'IT' 카테고리의 다른 글
| Effective Typescript - 31 - 타입 주변에 null 값 배치하기 (0) | 2022.01.23 |
|---|---|
| Effective Typescript - 30 - 문서에 타입 정보를 쓰지 않기 (0) | 2022.01.23 |
| Effective Typescript - 28 - 유효한 상태만 표현하는 타입을 지향하기 (0) | 2022.01.23 |
| Effective Typescript - 27 - 함수형 기법과 라이브러리로 타입 흐름 유지하기 (0) | 2022.01.23 |
| Effective Typescript - 26 - 타입 추론에 문맥(Context)이 어떻게 사용되는지 이해하기. (0) | 2022.01.23 |