2024-12-11(타입스크립트)

제네릭 extends

// 제네릭 T에 들어올 수 있는 타입에 제약 조건이 없을 때
type UserData<T> = {
    name: string;
    userKey: T;
};

// 제네릭 T 에는 문자열이나 숫자만 들어올 수 있다는 제약조건을 줬을 때
type UserData<T extends string | number> = {
    name: string;
    userKey: T;
}

 

래퍼객체 : 임시로 객체로 인식

type HasLength = {
  length: number;
}

// 제네릭 T는 length: number를 속성으로 갖는 객체 타입만 들어올 수 있다는 제약조건 부여
function logLength<T extends HasLength>(item: T): void {
  console.log(item.length);
}

 

그러면 래퍼객체를 포함하고 싶지 않으면🤔

& object : Intersection Types

type HasLength = {
  length: number;
} & object

 

🌟keyof : 객체타입을 유니언 타입으로 반환

type Person = {
  name: string;
  age: number;
  location: string;
};

type PersonKeys = keyof Person; // "name" | "age" | "location"

 

typeof : 변수의 타입을 추론

 

처음엔 밑에처럼 쓰다가 리펙토링하면서 제네릭 써보긔!

//리팩토링 전
const getProperty = (
    obj: PersonType,
    key: PersonKeys,
  ): PersonType[PersonKeys] => {
    return obj[key];
  };
  

//리팩토링 후 (제네릭 사용)
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

 

에러핸들링시 instanceof 사용

async function fetchData(url: string) {
    try {
        const response = await axios.get(url);
        console.log('Data:', response.data);
    } catch (error) {
        if (error instanceof AxiosError) {
            // AxiosError인 경우
            console.log('Axios error occurred')
        } else {
            // 일반 Error인 경우
            console.log('General error occurred');
        }
    }
}

 

 

// 방법1
type PartialUser = {
   [K in keyof User]?: User[K];
}

// 방법2
type PartialUser = Partial<User>

 

🌟Record타입🌟

type UserRecord = Record<'admin' | 'user' | 'guest', User>;

 

querykey 인자값은 QueryFunctionContext

export const getDetail = async ({ queryKey }: QueryFunctionContext) => {
  const [_, id] = queryKey;

  const response = await fetch(`http://localhost:4000/todos/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch a detail todo ${id}`);
  }
  return await response.json();
};