[Effective Typescript - 아이템 39] any를 구체적으로 변형해서 사용하기

Song·2022년 2월 26일
0
post-custom-banner

any란 Javascript에서 표현할 수 있는 모든 값을 커버하는 큰 범위의 타입이다.
(ex. null, undefined, 숫자, 배열, 객체 etc..)
그렇기 때문에 any를 쓰게된다면 정확한 모델링을 위해 any 자체를 구체적으로 변형해서 사용해야한다.

1. 배열 구체화

매개변수가 배열일 경우 타입을 any 대신 any[ ]을 사용하여 정확도를 높일 수 있다.

1-1. any를 일반적으로 사용할 때 👎

/**
 * 1. 반환 타입이 any로 추론된다.
 * 2. 함수 호출 시 매개변수의 타입을 체크하지 않는다.
 */
function getLengthBad(array: any) {
	return array.length;
}

1-2. any를 배열 형태로 구체화했을 때 👍

/**
 * 1. array.length의 타입이 체크되어 반환타입이 any 대신 number로 추론된다.
 * 2. 함수 호출 시 매개변수가 배열인 지 체크된다.
 */
function getLength(array: any[]) {
	return array.length;
}

// 결과 
getLengthBad(/123/) //정규식을 매개변수로 넘겼지만 결과는 오류없이 undefined를 반환
getLength(/123/)  // RegExp 형식의 인수는 any[] 에 할당될 수 없다고 오류를 반환

2. 객체 구체화

만약 매개변수가 객체일때 타입을 any로 단순하게 표현하는 것이 아닌 아래 방법을 사용할 수 있다.

2-1. { [key: string] : any } 👍

매개변수가 객체일 때는 아래와 같이 인덱스 시그니처를 이용하여 구체화할 수 있다.

function hasTwelveLetterKey(o: {[key:string]: any}) {
	for (const key in o) {
    	if (key.length === 12) {
        	return true;
        }
     }
  return false
}

2-2. object

만약 매개변수가 객체지만 들어오는 값을 알 수 없다면 Object 타입을 사용할 수 있다.
하지만 인덱스 시그니처가 없으므로 암시적으로 any 형식이 된다.

function hasTwelveLetterKey(o: object}) {
	for (const key in o) {
    	if (key.length === 12) {
          	console.log(o[key]) // 인덱스 시그니처가 없으므로 암시적으로 any 형식이 된다.
        	return true;
        }
     }
  return false
}

3. 함수 타입 구체화

함수의 타입을 정의할 때도 any를 구체화해서 사용할 수 있다.
아래와 같이 함수를 일반적인 any 타입으로 정의한 것이 아닌
각 함수들이 호출 시 넘겨받는 매개 변수를 구체화하여 타입의 안정성을 높였다.

type Fn0 = () => any;	// 매개변수 없이 호출 가능한 함수
type Fn1 = (arg: any) => any;	// 매개변수가 1개 필요한 함수
type FnN = (...arg: any[]) => args.length;	// 모든 개수의 매개 변수

요약

  • any를 사용할 때는 정말 모든 타입을 허용해야하는 지 검토가 필요하다.
  • any를 사용하게 된다면 any[ ], {[key:string]: any}, {} => any 처럼 구체적인 형태로 사용해야한다.
profile
Learn From Yesterday, Live Today, Hope for Tomorrow
post-custom-banner

0개의 댓글