[이펙티브 타입스크립트] 5장 any 다루기

5장 any 다루기

타입 스크립트의 타입 시스템은 선택적이고 점진적이기 때문에, 

정적이면서 동적인 특성을 가지고 있다. 

 

 

item 38. any 타입은 가능한 한 좁은 범위에서만 사용하기

- Blink 예시 ) any 로 선언을 하지만 @ts-ignore을 사용해서 강제로 타입 오류를 제거

class Form extends React.Component<any, any> {

constructor(props: any) {

super(props)

const initialState: any = {

goodsName: '',

moid: '',

amount: '',

buyerName: '',

buyerTel: '',

buyerEmail: '',

returnURL: '',

ReqReserved: '',

ediDate: '',

hashString: '',

mid: '',

}

this.state = initialState

// @ts-ignore

this.form = React.createRef()

}

 

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

• next-face 예시 코드 (작성자: subin)
  • any[]를 사용하여 구체적인 형태로 사용
  • type Props = { options: Array<{ text: string; value: any }> selectedOptions: any[] onSubmitOption: (value: any) => void }

 

item 40. 함수 안으로 타입 단언문 감추기

 

item 41. any의 진화를 이해하기

 

item 42. 모르는 타입의 값에는 any 대신 unknown을 사용하기

 

• next-face 예시 코드 (작성자: subin) 고객웹에서 api 결과값을 확인하는 코드 api 리턴값을 알수 없지만, 동적으로 반환값을 확인하는 코드
• export function buildDynamic<T>( builder: T | DynamicBuilder<T> | NestedDynamicBuilder<T>, context: any, ): T { if (isNestedDynamicBuilder<T>(builder)) { const op = Object.keys(builder)[0] as LogicalOperator switch (op) { case LogicalOperator.$and: return builder[op].every(b => buildDynamic(b, context), ) as unknown as T case LogicalOperator.$or: return builder[op].some(b => buildDynamic(b, context), ) as unknown as T case LogicalOperator.$not: return !buildDynamic(builder[op][0], context) as unknown as T case LogicalOperator.$notNull: return (buildDynamic(builder[op][0], context) != null) as unknown as T case LogicalOperator.$isNull: return (buildDynamic(builder[op][0], context) == null) as unknown as T ...생략 }
• item 43. 몽키 패치보다는 안전한 타입을 사용하기
  • next-face 예시 코드 (작성자: subin) 고객웹에서 파트너의 리뷰 관리 코드 확인 코드 HTMLElement의 내장 속성을 추가 했지만, ‘@ts-ignore’을 사용해서 에러 감춤 (아마 document를 HTMLElement로 설정 안해서 에러 발생한지도…? )
  • const PartnerReviewGuidePage: NextPageWithLayout = () => { const [loading, setLoading] = useState(false) const handleClickReviewSending = () => { setLoading(true) // @ts-ignore document.location = PANTNER_APP_CX_CHAT_DEEPLINK }
• item 44. 타입 커버리지를 추적하여 타입 안전성 유지하기