이번 포스팅에서는 typescript가 타입 시스템을 정적이면서 동적으로 쓸 수 있게 해주는 any 타입에 대해 알아볼 것이다. any의 장점은 살리면서 단점을 줄이는 방법을 살펴보자.
아이템 38. any 타입은 가능한 한 좁은 범위에서만 사용하기
function f1() {
const x : any = expressReturningFoo();
processBar(x);
return x
}
// 이게 낫다
function f2() {
const x = expressReturningFoo();
processBar(x as any);
return x
}
아래처럼 짜야되는 이유는 x 타입을 any라고 명시해주면, f1()의 리턴값들도 타입체크가 안되어버린다. 그렇게 되면, 프로젝트 전역으로 퍼져버리기 때문에 좋지않은 코딩 스타일이다.
아이템 39. any를 구체적으로 변형해서 사용하기
- any를 사용할 때 정말 모든값을 허용할지 면밀히 검토하기
- any보다 조금은 더 명확하게 명시하기
function getLengthBad(array:any) { return array.length };
function getLength(array:any[]) { return array.length };
아이템 41. any의 진화를 이해하기
- any, any[] 타입은 진화할 수 있기 때문에 이렇나 코드를 인지하고 있어야 함
const result = []; // any[] result.push('a'); // string [] result.push(1); // (string|number) []
- 그렇기 때문에 any를 진화시키는 방식보다는 명시적 타입 구문을 사용하는 것이 안전
아이템 42. 모르는 타입의 값에는 any 대신 unknown을 사용하기
- unknown은 any 대신 사용할 수 있는 안전한 타입이다. 어떠한 값이 있지만 그 타입을 알지 못하는 경우라면 unknown을 사용하면 된다.
'Front-End' 카테고리의 다른 글
이펙티브 타입스크립트 - 1장. 타입스크팁트 알아보기 (0) | 2022.01.15 |
---|---|
Next - 이미지 최적화 ( Image Component and Image Optimization ) (0) | 2021.12.15 |
가로세로 비율 유지하는 반응형 박스 (0) | 2021.12.15 |
클라이언트 UI와 서버 데이터 제대로 연동하고 싶다. (0) | 2018.02.23 |
Web project 성능 최적화하기 (0) | 2017.12.11 |