DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-05-17
작성자: dusunax

아이템 8 이어서

중간 저장~!~!
17일 목표: ~12장까지
총 학습시간: 현재 1시간 50분

속성 접근자 [], property accessor

• obj['field']와 obj.field는 값이 동일하더라도 타입은 다를 수 있다.

const jane: Person = { first: "Jane", last: "Jacobs" };
const first: Person["first"] = jane["first"]; // Or jane.first
//    ―――――                    ――――――――――――― Values. "Jane"
//           ―――――― ―――――――                  Types, 타입 맥락에서 쓰였기 때문에 타입

• 타입의 속성을 얻을 때는, []를 사용한다.

  • type.field로 접근할 수 없음

    Cannot access 'Person.first' because 'Person' is a type, but not a namespace. Did you mean to retrieve the type of the property 'first' in 'Person' with 'Person["first"]'?

  • Person 클래스를 타입(type)으로 사용할 것이기 때문에, 네임스페이스처럼 속성에 직접 접근할 수 없다.

    • 클래스: 특정 객체를 생성하기 위한 blueprint
    • 네임스페이스: 코드를 논리적으로 그룹화하고, 전역 스코프의 오염을 방지 (네임스페이스를 통해 함수, 클래스, 변수 등에 접근)

• 인덱스에는 union, 기본형 (js 타입)을 포함해 어떤 타입이든 사용할 수 있다.

type PersonEl = Person["first" | "last"]; // union!
//   ^? type PersonEl = string
type Tuple = [string, number, Date]; // 기본형
type TupleEl = Tuple[number];
//   ^? type TupleEl = string | number | Date

Value vs Type 🤔

📌 this

| | this | | --------- | ------------------- | | 값 value | 자바스크립트의 this | | 타입 type | 다형성 this |

• value로 쓰이는 this는? JS의 this다.
• type으로 쓰이는 this는? 다형성 this(polymorphic this)다.

  polymorphic this는? 자바스크립트와 마찬가지로 현재 실행 컨텍스트를 참조합니다.
  여러 클래스나 객체에서 공통된 메서드를 정의하면서도 각기 다른 동작을 구현할 수 있는데,
  주로 상속과 인터페이스를 통해 구현됩니다. 유연성을 활용!

📌 polymorphic this

• 클래스와 상속, 오버라이딩

class Animal {
  move(distance: number) {
    console.log(`${this.constructor.name} moved ${distance} meters.`);
    // this는 메서드를 호출한 객체이다
  }
}

class Dog extends Animal {
  move(distance: number) {
    console.log("Dog is running...");
    super.move(distance);
  }
}

class Bird extends Animal {
  move(distance: number) {
    console.log("Bird is flying...");
    super.move(distance);
  }
}

const dog = new Dog();
dog.move(10); // Dog is running... Dog moved 10 meters.

const bird = new Bird();
bird.move(20); // Bird is flying... Bird moved 20 meters.

• 인터페이스, 메서드 체이닝

interface Movable {
  move(distance: number): this;
}

class Car implements Movable {
  move(distance: number): this {
    console.log(`Car drove ${distance} kilometers.`);
    return this;
  }

  refuel(amount: number): this {
    console.log(`Car refueled with ${amount} liters.`);
    return this;
  }
}

class Plane implements Movable {
  move(distance: number): this {
    console.log(`Plane flew ${distance} miles.`);
    return this;
  }

  maintain(): this {
    console.log("Plane underwent maintenance.");
    return this;
  }
}

const car = new Car();
const plane = new Plane();

car.move(100).refuel(50);
// Output:
// Car drove 100 kilometers.
// Car refueled with 50 liters.

plane.move(1000).maintain();
// Output:
// Plane flew 1000 miles.
// Plane underwent maintenance.

📌 &와 |

| | & | | | | --------- | ------------ | ------ | | 값 value | AND | OR | | 타입 type | intersection | union |

📌 const

| | const | | --------- | ------------------------------------------- | | 값 value | const 새 변수 선언 | | 타입 type | as const 리터럴 표현식의 추론된 타입을 바꿈 |

📌 extends

• 서브클래스 또는 서브타입, 제네릭 타입의 한정자를 정의할 수 있다.
• 서브클래스

class Animal {
  move() {
    console.log("Moving along!");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof! Woof!");
  }
}

• 서브타입

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "John",
  age: 30,
  employeeId: 1234,
};

• 제네릭의 한정자

function logLength<T extends { length: number }>(item: T): void {
  console.log(item.length);
}

logLength("Hello, TypeScript!"); // 18
logLength([1, 2, 3, 4, 5]); // 5

logLength(123); // Error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.

📌 in

• loop 또는 mapped 타입에 등장

loop

• 반복문에서 객체의 속성을 순회할 때 사용됩니다. 주로 for...in 루프와 함께 사용되며, 객체의 각 속성을 반복하면서 작업을 수행합니다.

  const obj = { a: 1, b: 2, c: 3 };
  
  for (const key in obj) {
    console.log(`${key}: ${obj[key]}`);
  }
  // 출력:
  // a: 1
  // b: 2
  // c: 3
  

mapped

• Mapped 타입에서 in 연산자는 조건부 타입과 함께 사용될 때 타입 변환을 수행하는 데 사용됩니다 (객체의 모든 속성을 반복하면서 새로운 타입을 만들거나 수정하는 데 사용)

  type Optional<T> = {
    [K in keyof T]?: T[K];
    // in 연산자는 keyof T를 통해 Person의 모든 속성을 반복
    // 각 속성에 대해 ?:를 사용하여 옵셔널
  };
  
  interface Person {
    name: string;
    age: number;
  }
  
  type OptionalPerson = Optional<Person>;
  // { name?: string; age?: number; }
  

타입스크립트가 잘 동작하지 않는다면?

• type space 타입 공간과 value space를 혼동해서 잘못 작성했을 가능성이 크다.

function email({
  to: Person; // 값의 관점에 해석되었기 때문에 에러!
  subject: string;
  body: string;
}) {
  // ...
}

// 값과 타입을 구분하는 이유
function email(
  {to, subject, body}: // 값
  {to: Person, subject: string, body: string} // 타입
) {
  // ...
}

Things to Remember

• Know how to tell whether you're in type space or value space while reading a TypeScript expression. Use the TypeScript playground to build an intuition for this.
  • 타입 공간과 값 공간을 구분하는 방법을 터득해야함
  • 타입스크립트 플레이그라운드 https://www.typescriptlang.org/play/?#code/
• Every value has a static type, but this is only accessible in type space. Type space constructs such as type and interface are erased and are not accessible in value space.
  • 모든 값은 타입을 가지지만, 이 타입은 타입 공간에서만 접근할 수 있다.
  • 타입 공간에서 만든 타입, 인터페이스는 값 공간에서는 삭제된다.
    • type과 interface는 type space에 존재
• Some constructs, such as class or enum, introduce both a type and a value.
  • class와 enum은 타입과 값으로 둘 다 사용될 수 있다
• typeof, this, and many other operators and keywords have different meanings in type space and value space.
  • typeof, this 등의 많은 연산자와 키워드는 => type space와 value space에서 다른 목적으로 사용될 수 있다

아이템 9 타입 단언보다는 타입 선언을 사용하기 Prefer Type Annotations to Type Assertions

• 왜? 타입 단언은 타입 체커에게 오류를 무시하라고 하는 것이기 때문이다

interface Person {
  name: string;
}

// Type Annotations은 할당된 값이 해당 인터페이스를 만족하는지
const alice: Person = { name: "Alice" };
//    ^? const alice: Person

// Type Assertions는 추론한 타입이 있더라도, 해당 타입으로 간주한다
const bob = { name: "Bob" } as Person; // Type Assertions
//    ^? const bob: Person

잉여 속성 체크 excess property checking도 적용되지 않음

const alice: Person = {
  name: "Alice",
  occupation: "TypeScript developer",
  // ~~~~~~~~~ Object literal may only specify known properties,
  //           and 'occupation' does not exist in type 'Person'
};
const bob = {
  name: "Bob",
  occupation: "JavaScript developer",
} as Person; // 에러가 없음!

이전에 타입 단언을 사용하던 코드 형태

const bob = <Person>{};

• 현재는 tsx의 컴포넌트 태그로 인식되기 때문에 쓰이지 않는다.

화살표 함수

• 최종적으로 원하는 타입을 직접 명시하고, 타입스크립트가 할당문의 유효성을 검사하도록 함
• 단, 함수 호출 체이닝이 연속되는 곳은, 체이닝 시작부터 명명된 타입을 가져야 한다 (정확한 곳에 오류 표기하기 위함)

interface Person {
  name: string;
}
// 타입 단언
const people = ["alice", "bob", "jan"].map((name) => ({ name } as Person)); // Type is Person[]

// 단언 시 런타임 오류 발생
const wrongPeople = ["alice", "bob", "jan"].map((name) => ({} as Person)); // Type is Person[]

// 최종적으로 원하는 타입을 직접 명시하고, 타입스크립트가 할당문의 유효성을 검사하도록 함
const goodPeople: Person[] = ["alice", "bob", "jan"].map((name) => ({ name })); // OK

Type Assertion이 필요한 경우

• 타입 체커가 추론한 타입보다, 개발자가 판단한 타입이 더 정확할 때
  • ex) DOM element

document.querySelector("#myButton")?.addEventListener("click", (e) => {
  e.currentTarget;
  // ^? (property) Event.currentTarget: EventTarget | null
  // currentTarget is #myButton is a button element: 타입스크립트가 알지 못하는 정보, why? DOM에 접근할 수 없기 때문에
  const button = e.currentTarget as HTMLButtonElement;
  //    ^? const button: HTMLButtonElement
});

nonNullAssertion: !

• 변수의 접두사로 쓰인 !는? boolean의 부정문
• 접미사로 쓰인 !는? 그 값이 Null이 아니라는 단언문으로 해석된다.
• 주의
  • 단언문은 컴파일 과정에서 제거된다.
  • 타입 체커는 알지 못하지만, 값이 null이 아님을 확신할 수 있을 때 사용한다
    • 확신할 수 없다면 조건문으로 null 체크 해야한다.

타입 단언을 사용한 타입 변환과 unknown

interface Person {
  name: string;
}
const body = document.body;
const el = body as Person;
//         ~~~~~~~~~~~~~~
// Conversion of type 'HTMLElement' to type 'Person' may be a mistake because
// neither type sufficiently overlaps with the other. If this was intentional,
// convert the expression to 'unknown' first.

• 서로의 서브 타입이 아니기 때문에 변환이 불가능하다.

  • 만약 unknown 타입을 사용해 임의의 타입 간의 변환이 가능한, 항상 동작하는 단언을 사용하는 경우? 무언가 위험한 동작을 하고 있음을 알 수 있음

  • 모든 타입은 unknown의 서브타입이기 때문에, unknown 단언은 항상 동작한다

    const el = document.body as unknown as Person; // OK
    

Things to Remember

• Prefer type annotations (: Type) to type assertions (as Type).
  • 단언보다 선언을 사용하자
• Know how to annotate the return type of an arrow function.
  • 화살표 함수의 반환 타입 명시하는 법 알기
• Use type assertions and non-null assertions only when you know something about types that TypeScript does not.
  • 타입스크립트보다 더 잘 알고 있는 게 확실한 상황에서만 타입 단언과 non-null 단언을 쓰자.
• When you use a type assertion, include a comment explaining why it's valid. // 좋은 협업 습관

---

// English
mnemonic [mne·mon·ic] 연상 기호
intuition [in·tu·i·tion] the ability to understand something immediately, without the need for conscious reasoning.
exclamation mark [ex·cla·ma·tion mark] !