#39 any를 구체적으로 변형해서 사용하기

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍요약

✅any보다 더 정확한 모델링을 위해,

any[]

{[key: string]: any}

() => any 처럼 구체적인 형태를 사용해야 한다

 

📍any

✅자바스크립트에서 표현할 수 있는 모든 값을 아우르는 매우 큰 범위의 타입

- 원시 값

- 정규식

- 클래스

- DOM 엘리먼트 등을 포함

 

✅any 타입의 값을 그대로 정규식이나 함수에 넣으면 안됨

- 아래 코드에서 any 대신 any[] 를 사용하여 배열이 아닌 경우를 걸러낼 수 있다

 

function getLengthBad(array: any) {  // Don't do this!
  return array.length;
}

function getLength(array: any[]) { // 차라리 이렇게
  return array.length;
}

getLengthBad(/123/);  // 에러 탐지 불가
getLength(/123/);
       // ~~~~~ Argument of type 'RegExp' is not assignable
       //       to parameter of type 'any[]'

 

✅요소의 타입과 관계 없이, 이차원 배열 형태에 any를 사용하려면 any[][] 처럼 선언

✅객체에서 밸류값의 타입을 모를 때는 {[key: string]: any} 처럼 선언

function getLengthBad(array: any) {  // Don't do this!
  return array.length;
}

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

 

- object를 사용해도 되지만, 프로퍼티에 접근할 수 없어서 내부에서 에러 발생

(안쓰는게 낫다)

function getLengthBad(array: any) {  // Don't do this!
  return array.length;
}

function getLength(array: any[]) {
  return array.length;
}
function hasTwelveLetterKey(o: object) {
  for (const key in o) {
    if (key.length === 12) {
      console.log(key, o[key]);
                   //  ~~~~~~ Element implicitly has an 'any' type
                   //         because type '{}' has no index signature
      return true;
    }
  }
  return false;
}

 

📍함수에서 any를 사용하는 3가지 방법

function getLengthBad(array: any) {  // Don't do this!
  return array.length;
}

function getLength(array: any[]) {
  return array.length;
}
type Fn0 = () => any;  // 매개변수 없이 호출 가능한 모든 함수
type Fn1 = (arg: any) => any;  // 매개변수 1개
type FnN = (...args: any[]) => any;  // 여러 매개변수
                                     // Function 타입과 동일

 

type FnN = (...args: any[]) => any; 에서

...args: any 처럼 할 수도 있지만, 맨 위 내용처럼 배열로 선언하면 더 구체적임