IT (58) 썸네일형 리스트형 Effective Typescript - 43 - 몽키 패치보다는 안전한 타입을 사용하기 저자는 자바스크립트의 가장 유명한 특징을 객체나 클래스에 임의의 속성을 임의로 추가할 수 있을 만큼 유연하다는 것을 꼽습니다. 자바스크립트 FE 개발 시, window나 document 객체에 임의의 속성을 만들어 값을 할당하여 전역 변수처럼 사용하곤 합니다. 이런 행위를 몽키 패치라고 표현합니다. window.monkey = 'test'; document.monkey = 'monky patch'; const el = document.getElementById('monky-div'); el.monkey = 'cached!'; 사실 객체에 위와 같이 몽키패치 하듯 임의의 속성을 추가하는 것은 일반적으로 좋은 설계가 아니라고 합니다. 타입스크립트 관점에서 몽키 패치를 사용한다면, 예를 들어 document .. Effective Typescript - 42 - 모르는 타입의 값에는 any 대신 unknown을 사용하기 unknown에는 함수의 반환 값과 관련된 형태, 변수 선언과 관련된 형태, 단언문과 관련된 형태가 있습니다. 먼저, 함수의 반환값과 관련된 unknown을 알아보겠습니다. YAML 파서인 parseYAML 함수를 작성한다고 가정하고 아래의 예제를 살펴봅시다. // 아이템 38에서 설명한 함수의 반환시 any 지양하기 철학에 위반. function parseYAML(yaml: string): any { // ... } const book = parseYAML(` name: asdfsafd author: abbbb `); alert(book.title); // 타입 체킹에서는 이상 없음. 런타임에 undefined 관련 오류가 발생할 수 있음. book(); // 오류가 없음. 런타임에 함수가 아니라는 오.. Effective Typescript - 41 - any의 진화를 이해하기 타입스크립트의 타입은 변수를 선언할 때 결정된다. 하지만 any 타입과 관련해서 예외인 상황이 있습니다. 아래 예제가 바로 그러한 상황입니다. function range(start: number, limit: number) { const out = []; // any[] for (let i = start; i Effective Typescript - 40 - 함수 안으로 타입 단언문 감추기 함수를 작성하다 보면, 외부로 드러난 타입 정의는 간단하지만 내부 로직이 복잡해서 안전한 타입으로 구현하기 어려운 경우가 많습니다. 함수의 모든 부분을 안전한 타입으로 구현하는 것이 이상적이지만, 불필요한 예외 상황까지 고려해 가며 타입 정보를 힘들게 구성할 필요는 없습니다. 함수 내부에는 타입 단언을 사용하고 함수 외부로 드러나는 타입 정의를 정확히 명시하는 정도로 타협하는 것이 좋습니다. 프로젝트 전반에 위험한 타입 단언문이 드러나 있는 것 보다는 제대로 타입이 정의된 함수 안으로 타입 단언문을 감추는 것이 더 좋은 설계입니다. declare function shallowEqual(a: any, b: any): boolean; function cacheList(fn: T): T{ let lastArg.. Effective Typescript - 39 - any를 구체적으로 변형해서 사용하기 일반적인 상황에서는 any 보다 더 구체적으로 타입을 표현할 수 있는 상황이 높다. 따라서 더 구체적인 타입을 찾아 타입 안정성을 높이도록 해야한다. 예를 들어, any 타입의 값을 그대로 정규식이나 함수에 넣는 것은 권장되지 않는다. function getLenBad(array: any) { // 비추 return array.length; } function getLen(array: any[]) { // 좀더 안전 return array.length; } 알수 없는 구조의 객체를 파라메터로 받는 함수의 구현시에도 any보다 좀더 구체적인 타입을 명시할 수 있다. function getSomeObjKeysBad(obj: any) { // 비추 return Object.keys(obj); } functio.. Effective Typescript - 38 - any 타입은 가능한 좁은 범위에서만 사용하기 아래 예제는 함수 호출 시 any로 강제로 변환해야 하는 경우, any를 가능한 좁은 범위 내에서 사용하기 위한 방법을 설명한다. interface Foo { _brand: 'foo' } interface Bar { _brand: 'bar' } function processBar(b: Bar){ console.log(b); } function expressionReturningFoo(): Foo { /** */ return {_brand: 'foo'}; } function f1(){ const x: any = expressionReturningFoo(); // 비추 processBar(x) } function f2(){ const x = expressionReturningFoo(); processBar(.. Effective Typescript - 37 - 공식 명칭(nominal typing)에는 상표를 붙이기 구조적 타이핑의 특성 때문에 가끔 코드가 의도하지 않은 결과를 낼 수 있습니다. 아래의 예제가 바로 그러한 상황을 표현하고 있습니다. interface Vector2D { x: number; y: number; }; function clacNorm(p: Vector2D){ return Math.sqrt(p.x * p.x + p.y * p.y); } clacNorm({x: 3, y: 4}); // 정상 결과 5 const vec3D = {x : 3, y: 4, z: 1}; clacNorm(vec3D); // 정상 결과 5 // 구조적 타이핑 관점에서는 이상이 없는 것이지만 수학적 결과를 기대했다면 오류이다. clacNorm 함수가 3차원 벡터를 허용하지 않게 하려면 공식 명칭(nominal typing)을.. Effective Typescript - 36 - 해당 분야의 용어로 타입 이름 짓기 * 가독성을 높이고, 추상화 수준을 높히기 위해서 해당 분야의 용어를 사용해서 타입 이름을 지정해야한다. * 같은 의미에 다른 이름을 붙이면 안된다. 특별한 의미가 있을 때만 용어를 구분해야 한다. 이전 1 2 3 4 5 6 7 8 다음