실전 연습으로 익히는 고급 타입스크립트 기술대시보드

안녕하세요해당 수업 마지막에 말씀해주신 매개변수 추론관련해서, 일반함수와 매개변수 간의 다르게 추론된다고 말씀해주셨는데요.→ 일반함수 : 인자값 이름 없이 추론 / 화살표함수 : 인자값 이름 함께 추론현재 vscode에서는 둘 다 차이없이 추론되는 것을 확인할 수 있는데요. 이 부분이 업데이트를 통해서 변경된 부분일까요??감사합니다.

import { Equal, Expect } from "../helper"; import { expect, it } from "vitest"; const fetchData = async <T>(url: string): Promise<T> => { const data = await fetch(url).then((response) => response.json()); return data; }; it("Should fetch data from an API", async () => { const data = await fetchData<{ name: string }>( "https://swapi.dev/api/people/1" ); expect(data.name).toEqual("Luke Skywalker"); type tests = [Expect<Equal<typeof data, { name: string }>>]; }); 감사합니다. 정답을 확인 해보니까data에 제네릭 T를 줘야 하군요. 저처럼 하게 되면 data는 any로 추론 되네요!

둘의 차이가 궁금합니다.clone: <U>(transform: (elem: T) => U) => Cache< ReturnType<typeof transform> >; clone: (transform: <U>(elem: T) => U) => Cache< ReturnType<typeof transform> >;왜 명시적으로 제네릭을 지정하면 오류가 날까요const stringCache = numberCache.clone(<string>(elem) => { return String(elem); });

Record에서 TKey를 추론할때, “a” 따로 “b” 따로 추론하는게 신기합니다. const typedObjectKeys = <T extends string>(obj: Record<T,any>):Array<T> => { return Object.keys(obj) as Array<T>; };저는는 당연히 하나안에 있어서(반복문이나 그런거 없어서) TKey는 단일한 타입일거라고 생각했다.

export type Maybe<T extends string | boolean | number> = T; type tests = [ // @ts-expect-error Maybe<null>, // @ts-expect-error Maybe<undefined>, Maybe<string>, Maybe<false>, Maybe<0>, Maybe<""> ]; export type Maybe<T = string | boolean | number> = T; type tests = [ // @ts-expect-error Maybe<null>, // @ts-expect-error Maybe<undefined>, Maybe<string>, Maybe<false>, Maybe<0>, Maybe<""> ]; 뭔가 extends와 = 가 같은것 같으면서도 다른가 봅니다. extends는 에러가 안나는데 =는 에러가 나네요

type GetParametersAndReturnType<T extends (...rest: T) => U> = { params: Parameters<T>; returnValue: ReturnType<T>; }; type tests = [ Expect< Equal< GetParametersAndReturnType<() => string>, { params: []; returnValue: string } > >, Expect< Equal< GetParametersAndReturnType<(s: string) => void>, { params: [string]; returnValue: void } > >, Expect< Equal< GetParametersAndReturnType<(n: number, b: boolean) => number>, { params: [number, boolean]; returnValue: number } > > ];이거 저거 엄청 했는데, 못풀었는데 any를 주는 방법밖에 없군요!

const returnWhatIPassIn = <T = number | string>(t: T) => { return t; }; const one = returnWhatIPassIn(1); const matt = returnWhatIPassIn("matt"); type tests = [Expect<Equal<typeof one, 1>>, Expect<Equal<typeof matt, "matt">>];감사합니다.

type Fruit = | { name: "apple"; color: "red"; } | { name: "banana"; color: "yellow"; } | { name: "orange"; color: "orange"; }; type TransformedFruit = { [key in Fruit as `${key["name"]}:${key['color']}`]: `${key["name"]}`; }; type tests = [ Expect< Equal<TransformedFruit, { "apple:red": "apple"; "banana:yellow": "banana"; "orange:orange": "orange"; }> >, ];

type Fruit = | { name: "apple"; color: "red"; } | { name: "banana"; color: "yellow"; } | { name: "orange"; color: "orange"; }; type TransformedFruit = { [key in Fruit as key["name"]]: `${key["name"]}:${key["color"]}`; }[Fruit["name"]]; type tests = [ Expect< Equal<TransformedFruit, "apple:red" | "banana:yellow" | "orange:orange"> > ];감사합니다

interface FruitMap { apple: "red"; banana: "yellow"; orange: "orange"; } type TransformedFruit = { [key in keyof FruitMap]: `${key}:${FruitMap[key]}`; }[keyof FruitMap]; type tests = [ Expect< Equal<TransformedFruit, "apple:red" | "banana:yellow" | "orange:orange"> > ];덕분에 typescript 재밋습니다 :)

const fetchData = async <T>(url: string):Promise<T> => { const data = await fetch(url).then((response) => response.json()); return data; }; Fetch 함수 강의에서 const data의 타입을 T로 지정해주셨는데, 저는 함수의 리턴타입을 프로미스 T로 명시해주었습니다.어떤 방법이 더 좋은걸까요?장단점이 궁금합니다.

확실히 어렵네요.type RoutesObject = { [K in Route as `${K["route"]}`]: Route["search"]; };이렇게까지 고민하여 풀었지만 key값은 나오게되었는데 value값을 자꾸 union으로 나와서 결국 못풀었는데, 영상을 보니까 Route를 in으로 반복한R을 가지고 array key인 search로 접근하면 해결 되는 문제 였네요. 잘 배웠습니다!type RoutesObject = { [K in Route as `${K["route"]}`]: K["search"]; };

interface Attributes { firstName: string; lastName: string; age: number; } type AttributeGetters = { [key in `get${Capitalize<keyof Attributes>}`]: () => Attributes[key]; }; type tests = [ Expect< Equal< AttributeGetters, { getFirstName: () => string; getLastName: () => string; getAge: () => number; } > > ]; key는 어찌저찌 나오게 했는데 value값을 어떻게 해야할지 감이 안오네요.영상 해답을 보고나니 꼭 기억해야 될 방법인것 같습니다!

강사님 덕분에 처음에 문제보고 여러울것 같았는데,생각보다 쉽게 금방 풀었습니다. 감사합니다!!interface Attributes { firstName: string; lastName: string; age: number; } type AttributeGetters = { [key in keyof Attributes]: () => Attributes[key]; }; type tests = [ Expect< Equal< AttributeGetters, { firstName: () => string; lastName: () => string; age: () => number; } > > ];

감사합니다.type Route = "/" | "/about" | "/admin" | "/admin/users"; type RoutesObject = { [key in Route]: key; }; type tests = [ Expect< Equal< RoutesObject, { "/": "/"; "/about": "/about"; "/admin": "/admin"; "/admin/users": "/admin/users"; } > > ];

강의 제목을 보고 찾아보니 Uppercase 유틸 타입이 있네요그걸 활용해서 풀었습니다type Event = `log_in` | "log_out" | "sign_up"; type ObjectOfKeys = Record<Uppercase<Event>,string>; type tests = [ Expect< Equal< ObjectOfKeys, { LOG_IN: string; LOG_OUT: string; SIGN_UP: string; } > >, ];

type ObjectOfKeys = { [`${string}`]:string; }뭔가 이런 안되는 방법들로 계속 시도 했지만, 못풀었네요 해설을 보니 Record와 프로퍼티의 규칙적인 단어들을 캐치 했어야 했네요!

import { Equal, Expect } from "./helper"; type Top = "t-shirt" | "shirts" | "jacket"; type Bottom = "jeans" | "skirt" | "slacks"; type Outfit = `${Top} with ${Bottom}`;type tests = [ Expect< Equal< Outfit, | "t-shirt with jeans" | "t-shirt with skirt" | "t-shirt with slacks" | "shirts with jeans" | "shirts with skirt" | "shirts with slacks" | "jacket with jeans" | "jacket with skirt" | "jacket with slacks" > > ];typescript 특징인건지 신기하게 문자열 리터럴 타입들이 마치 수학 분배법칙처럼 되는 이유가 무엇일까요?

type Routes = "/users" | "/users/:id" | "/products" | "/products/:id"; type DynamicRoutes = Extract<Routes, `/${string}/:id`>; type tests = [Expect<Equal<DynamicRoutes, "/users/:id" | "/products/:id">>];먼저 풀어보고 이렇게 정답을 확인하니 이해가 잘되네요!

정답은 맞췄지만, 좋은 방법인지는 모르겠습니다import { Equal, Expect } from "./helper"; type Routes = "/users" | "/users/:id" | "/products" | "/products/:id"; type DynamicRoutes = `${Extract<Routes, "/users/:id"> | "/products/:id"}`; type tests = [Expect<Equal<DynamicRoutes, "/users/:id" | "/products/:id">>]; 다음 영상을 보면 알게 되겠지요!