타입스크립트 넌 내 타입

• 오늘 뭐했지😮

매뉴얼 검사

<aside> 👩‍🌾 javascript dynamic type : [any]thing ! 리액트는 자바스크립트로 컴포넌트를 만들때 속성 타입 검사를 하는 기능을 제공해요 ⇒ react.propTypes={}

</aside>

매뉴얼검사 : 속성 ( ) {타입검사 } : 속성 함수를 만들어서 타입검사를 시행해요

타입스크립트는 컴파일언어라서 쓰자마자 오류 확인 자바스크립트는 런타임 언어라 실행해야 오류 확인 ㅎ

Avatar.propTypes = {
  //photo:string
  photo(...args) {
    console.log(args);
  },
};

2️⃣ typeIs.js 유틸함수를 만들었어요

function typeIs(data) {
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1);
}

export default typeIs;

Avatar.propTypes = {
  //photo:string
  photo(props, propName, componentName) {
    const propValue = props[propName];
    const propType = typeIs(propValue);
    if (propType === 'string') {
      throw new Error(
        `${componentName}컴포넌트 ${propName}속성은 문자(string) 타입이 요구되나, 실제 전달된 속성은 ${propType}입니다.`
      );
    }
  },
};

매뉴얼 검사

비슷한 로직을 갖고 있는 함수를 꺼냈어요 → CustomPropTypes.js

import { typeIs } from '@/utils';
//pascal naming : 네임스페이스 객체
const CustomPropTypes = {
  string(props, propName, componentName) {
    const propValue = props[propName];
    const propType = typeIs(propValue);

    if (propType !== 'string') {
      throw new Error(
        `${componentName} 컴포넌트 ${propName} 속성은 "문자(string)" 타입이 요구되나, 실제 전달된 속성은 "${propType}" 타입입니다. 😳`
      );
    }
  },
  boolean(props, propName, componentName) {
    const propValue = props[propName];
    const propType = typeIs(propValue);

    if (propType !== 'boolean') {
      throw new Error(
        `${componentName} 컴포넌트 ${propName} 속성은 "불리언(boolean)" 타입이 요구되나, 실제 전달된 속성은 "${propType}" 타입입니다. 😳`
      );
    }
  },
};
export default Object.freeze(CustomPropTypes);

PropTypes와 함께 하는 타입 검사 – React

propTypes는 성능상의 이유로 개발 모드(Development mode) 에서만 확인될 것입니다.