실무에서 쓰는 유용한 타입스크립트 5가지

Without falsy

배열을 인수로 받아, null, undefined, false와 같은 Falsy 값이 제외된 배열을 반환합니다

function withoutFalsy<T>(arr: T[]) {
  return arr.filter(
    (value): value is Exclude<typeof value, null | undefined | false> =>
      !(value === null || value === undefined || value === false)
  );
}

const items = [1, null, undefined, 3, 0]; // (number | null | undefined)[];

const numbers = withoutFalsy(items); // number[];

---

Merge type

두 개의 타입을 병합하여 새로운 타입을 생성합니다.

type Merge<F, S> = {
  [P in keyof F | keyof S]: P extends keyof S ? S[P] : P extends keyof F ? F[P] : never;
};

type User = {
  name: string;
};

type Content = {
  subject: string;
};

type Profile = Merge<User, Content>; // { name: string; subject: string; }

---

View type

교차 타입의 모든 속성을 확인 할 수 있습니다.

type View<T> = {[P in keyof T]: T[P]};

type A = {
  title: string;
}
type B = {
  content: string;
}

type C = A & B; // A & B
type D = View<A & B> // { title: string; content: string }

---

Args

React에서 사용 할수 있는 유틸리티 타입 함수 입니다.
User 컴포넌트에서 onChange 속성의 파라미터 타입을 추출하고, change 함수의 파라미터로 사용하는 예제를 보여줍니다.

type Props<T extends (...args: any) => any> = Parameters<T>[0];
type PickByType<T, U> = { [P in keyof T as T[P] extends U ? P : never]: T[P] };
type Args<
  T extends (...args: any) => any,
  U extends keyof PickByType<Props<T>, Function>,
> = Parameters<Props<T>[U]>;

type UserProp = {
  name: string;
  onChange: (value: string) => void;
};

function User({ onChange }: UserProp) {
  return {};
}

function change([value]: Args<typeof User, 'onChange'>) {
	// value: string
}

---

Get property

TypeScript에서 자주 사용되는 유틸리티 함수 중 하나 입니다.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "bob", email: "uznam8x@gmail.com" };
const a = getProperty(user, 'name'); // string