TIL/TypeScript

[TypeScript] 이펙티브 타입스크립트 item 32~37

JoJobum 2022. 8. 4.

item 32

유니온의 인터페이스보다는 인터페이스의 유니온 사용하기

// 유니온의 인터페이스
interface Layer{
    layout: LineLayout | PointLayout
    paint : LinePaint | PointPaint
}


//인터페이스의 유니온
interface LineLayer{
    layout: LineLayout
    paint : LinePaint
}

interface PointLayer{
    layout: PointLayout
    paint : PointPaint
}

type Layer = LineLayer | PointLayer

 

item 33

string 타입 보다 더 구체적인 타입 쓰기

// string 남발된 모습
interface Album {
    artist: string;
    releaseDate: string; // YYYY-MM-DD
    recordingType: string; // 'live' 또는 'studio' 만 받을 것 
}


// 타입을 좁힌 케이스
type RecordingType = 'studio' | ' live';

interface Album {
    artist: string;
    releaseDate: Date;
    recordingType: RecordingType; // 'Studio' 이런식으로 들어오면 오타 잡아냄
}

 

장점

  1. 타입을 명시적으로 정의함으로써 다른 곳으로 값이 전달되어도 타입 정보가 유지된다.
  2. 타입을 명시적으로 정의하고 해당 타입의 의미를 설명하는 주석을 넣을 수 있음
  3. keyof 연산자로 더욱 세밀하게 객체의 속성 체크 가능

 

item 34

부정확한 타입 보다는 미완성 타입을 사용하기

타입이 없는 것보다 잘못된 것이 더 나쁘기 때문

 

 

item 35

데이터가 아닌 API와 명세를 보고 타입 만들기

 

item 36

해당 분야의 용어로 타입이름 짓기

잘못된 타입 이름은 코드의 의도를 왜곡하고 잘못된 개념 심어줌

 

타입, 속성, 변수에 이름 붙일 때 

  • 자체적인 용어를 만들기 보다 해당 분야에 이미 존재하는 용어 사용할 것
  • 동의어 금지, 즉 의미는 같지만 표현이 다른 단어 금지
  • 모호하고 의미를 정확히 알기 어려운 이름 피하기 ex)  data, entity, info, thing, object 등
  • 포함된 내용이나 수행 방식 보다 데이터 자체가 무엇인지에 집중할 것

 

item 37

공식 명칭에는 상표를 붙이기 ( 구조적 타이핑 == 덕 타이핑 을 사용하기에 값을 세밀하게 구분하지 못하는데 이부분을 해결하기 위해)

// 상표를 사용하지 않은 경우
interface Vector2D{
    x: number;
    y: number;
}

function calculateNorm(p: Vector2D){
    return Math.sqrt(p.x * p.x + p.y * p.y);
}
calculateNorm({x: 3, y: 4}); // 5 나옴
const vec3D = {x: 3, y: 4, z: 1}; 
calculateNorm(vec3D); // 잘못된 입력이 들어갔지만, 5 나옴
//상표를 붙여 실수 방지

interface Vector2D{
    _brand: '2d';
    x: number;
    y: number;
}

function vec2D(x: number, y: number): Vector2D{
    return {x, y, _brand:'2d'}
}

function calculateNorm(p: Vector2D){
    return Math.sqrt(p.x * p.x + p.y * p.y);
}

calculateNorm(vec2D(3, 4); // 5 나옴
const vec3D = {x: 3, y: 4, z: 1}; 
calculateNorm(vec3D); // 에러: _brand 속성이 없음
반응형

댓글