🏷️Typescript Handbook에서 새로 알게된 점 2

Narrowing

function printAll(strs: string | string[] | null) {
  // BAD 💩
  // Null check를 왜 이렇게 쓰면 안되나? 빈 문자열인 경우를 무시하기 때문 (string ''인 경우)
  if (strs) {
    if (typeof strs === "object") {
      for (const s of strs) {
        console.log(s);
      }
    } else if (typeof strs === "string") {
      console.log(strs);
    }
  }

 // GOOD 👍
 if (strs && typeof strs === "object") {
    for (const s of strs) {
      console.log(s);
    }
  } else if (typeof strs === "string") {
    console.log(strs);
  }
} 

1. == null 은 null과 undefined를 모두 체크한다. (== undefined 도 마찬가지) (=== 와는 구분됨)
2. in 객체 속성이 들어있는지 아닌지 여부로 type narrowing이 가능하다.

type Fish = { swim: () => void };
type Bird = { fly: () => void };
 
function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    return animal.swim();
  }
 
  return animal.fly();
}

1. instanceof도 타입가드로 쓰임 (if (x instanceof Date))
2. never type

type Shape = Circle | Square;
 
function getArea(shape: Shape) {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    default:
			// 이따 shape은 circle와 square에 의한 타입가드가 지정되었기 때문에, 
			// 더 이상 올수 있는 타입이 없어 never 타입이된다.
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

function fail(msg: string): never {
  throw new Error(msg);
}

More on Functions

1. Constraints는 타입 파라미터가 받아들일 수 있는 타입의 종류를 제한시키기위해 사용된다.

function longest<Type extends { length: number }>(a: Type, b: Type) {
  if (a.length >= b.length) {
    return a;
  } else {
    return b;
  }
}
 
// longerArray is of type 'number[]'
const longerArray = longest([1, 2], [1, 2, 3]);
// longerString is of type 'string'
const longerString = longest("alice", "bob");
// Error! Numbers don't have a 'length' property
const notOK = longest(10, 100); // 숫자는 length 속성이 없기 때문에 에러

1. callback 함수에 타이핑을 할 땐, 되도록 optional 파라미터는 사용하지 말아야 한다.
2. unknown: any value를 대표한다. any 타입과 비슷하지만 unknown value로는 아무 동작이나 제약없이 는 못하기 때문에 any보다 더 안전하다.
3. rest 형태로 함수의 파라미터를 넘겨줄수 있다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2); // arr1.push(1,2,3)과 같음

1. void 반환 유형(type vf = () => void)이 있는 컨텍스트 함수 유형은 구현될 때 다른 값을 반환할 수 있지만 무시된다! (따라서, void 타입은 undefined과 같지 않다.)

Object Types

1. type ColorfulCircle = Colorful & Circle; - Intersection Types (&)

   (Colorful과 Circle은 interface. (용어를 몰랐어서 적음))

2. 변경되면 안되는 배열인 경우 ReadonlyArray 제너릭 타입을 사용한다.

Creating Types from Types

1. Generic 예시

// 팩토리 패턴에서 생성자가 create함수로 넘겨지는 것 타이핑
function create<Type>(c: { new (): Type }): Type {
  return new c();
}

1. 앞에 -나 +를 붙여서 readonly를 빼거나 옵셔널(?)을 제거할 수 있다.

type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};

// 모든 속성이 optional하지 않게 됨
type Concrete<Type> = {
  [Property in keyof Type]-?: Type[Property];
};

1. as로 key를 다시 맵핑 할 수 도 있다.

type Getters<Type> = {
    [Property in keyof Type as `get${Capitalize<string & Property>}`]: () => Type[Property]
};
// Type의 key가 name, age, location이라면
// Getters 타입의 key들은 getName, getAge, getLocation이 된다.

1. Template Literal Types
   • Uppercase : 문자열 타입을 모두 대문자로 변경한 문자열 타입으로 바꿔준다.
   • Lowercase : 얘는 소문자로
   • Capitalize : 첫글자만 대문자로
   • Uncapitalize : 첫글자만 소문자로

• any 대신 unknown을 사용하거나, generics 타입으로 대체할 방법 생각해보기