231231 TIL (2)

thisisyjin·2023년 12월 31일

typescript

TIL 📝

목록 보기

109/113

TypeScript

✅ TypeScript Review

이해가 더 필요한 부분 복습 + 정리

참고 문서 1 - TypeScript

참고 문서 2 - React TypeScript Cheatsheet

Generic

입력 값이 출력 값의 타입과 관련이 있거나
두 입력값의 타입이 서로 관련이 있는 형태의 함수

제네릭 문법은 두 값 사이의 상관관계를 표현하기 위해서 사용됨.

function firstElement<Type>(arr: Type[]): Type | undefined {
  return arr[0];
}

-> Type에 무엇이 들어가든 '동일하다' 는 의미로 적용됨.
-> Type에 number을 넣어주면 arr: number[]이고, firstElement함수는 number | undefined을 리턴함.

const s = firstElement(["a", "b", "c"]);

여기서 Type은 number가 되므로, Number를 리턴함.

Inference 예제

function map<Input, Output>(arr: Input[], func: (arg: Input) => Output): Output[] {
  return arr.map(func);
}
 
// 매개변수 'n'의 타입은 'string' 입니다.
// 'parsed'는 number[] 타입을 하고 있습니다.
const parsed = map(["1", "2", "3"], (n) => parseInt(n));

TypeScript with React

Starter Kits

$ npx create-react-app --template typescript

주요 Framework와 함께 사용

Try Online

Prop Types

type AppProps = {
  // Primitive Type
  message: string;
  count: number;
  disabled: boolean;
  // array
  names: string[];
  // string literals
  status: "success" | "failure";
  // object
  obj: {
    id: string;
    title: string;
  };
  objArr: {
    id: string;
    title: string;
  }[];
  obj: object;
  // dict (key-value) 
  dict1: {
    [key: string]: MyType;
  };
  dict2: Record<string, MyType>;
  // Event handler Function
  onClick: () => void;
  onChange: (id: number) => void;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  optional?: SomeType;
  setState: React.Dispatch<React.SetStateAction<number>>;
};

그 외 유용한 Prop Type

interface AppProps {
  children?: React.ReactNode;
  childrenElement: React.JSX.Element;
  style?: React.CSSProperties;
  onChange?: React.FormEventHandler<HTMLInputElement>;
  props: Props & React.ComponentPropsWithoutRef<"button">; // forward X
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // forward
}

Event Hanlder

참고 문서

type UserTextEvent = {
  type: "TextEvent";
  value: string;
  target: HTMLInputElement;
};
type UserMouseEvent = {
  type: "MouseEvent";
  value: [number, number];
  target: HTMLElement;
};
type UserEvent = UserTextEvent | UserMouseEvent;
function handle(event: UserEvent) {
  if (event.type === "TextEvent") {
    event.value; // string
    event.target; // HTMLInputElement
    return;
  }
  event.value; // [number, number]
  event.target; // HTMLElement
}