Dev갱이 Dev갱이

// repository{ ... ... 중략... .then((data) => { const [schedule, number] = data; const newSchedule = schedule.map((value) => { return this.transformSharedMembers(value); }); // 튜플 데이터의 리턴타입을 어떻게 지정 해주어야할것인가? return [newSchedule, number]; }); private transformSharedMembers(data: ScheduleEntity) {..

map 같은 루프문을 이용하여 Promise.allSettled를 사용하여 Promise 결과값들을 받게 되었을때 상태가 fulfilled 일때와 rejected일때의 결과값을 가공해야될 경우가 있다. 해당 결과값을 특정 repository에 저장 하거나 할때 각각의 Promise의 결과값에 해당하는 프로퍼티들을 추가 하여 리턴 해주어야 한다. // es2020.promise.d.ts interface PromiseFulfilledResult { status: "fulfilled"; value: T;}interface PromiseRejectedResult { status: "rejected"; reason: any;}type PromiseSettledResult = PromiseF..

{ page: number; take: number;} 꽤 많이 사용하는 page와 take 타입이 있다고 가정 했을때 page는 backend에서 요청에 따라 유동적으로 달라지겠지만 take는 보통 상수 타입을 사용하여 동일한 갯수를 가져오는데 그범위는 number타입이기 때문에 상수의 값을 1000이든 10000이든 바꿀 수 있다. 여기서 Typescript의 강점이 나타난다. 바로 Typescript를 이용하여 number의 범위를 지정 해줄 수 있는 타입을 만든다면 런타임 환경에서 범위를 체크해주는 validation 코드 없이 해당하는 범위의 number 리터럴 타입만 올 수 있게 만들 수 있다.

const obj = { foo: 'hello'}let propertyName = 'foo';console.log(obj[propertyName]); TypeScript는 기본적으로 객체의 프로퍼티를 읽을 때, string 타입의 key 사용을 허용하지 않는다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ foo: string; }'. No index signature with a parameter of type 'string' was found on type '{ foo: string; }'.(7053) 에러가 발생한다. key값으로 올 수 있는 것은 str..

제네릭으로 파라미터 defaultValue값을 설정 했을때 발생하는 에러 import { useState } from 'react'; import { EditMode, Union } from 'types'; export const useEditMode = ( defaultEditMode: T, ) => { const [isMode, setMode] = useState(defaultEditMode); const handleEdit = (mode: T) => { setMode(mode); }; return { isMode, handleEdit, }; }; // Union 타입 추론 결과 "information" | "visitMessage" | "reset" - 해당 useEditMode에서 제네릭 T를 이..

https://www.npmjs.com/package/inversify?activeTab=readme inversify A powerful and lightweight inversion of control container for JavaScript and Node.js apps powered by TypeScript.. Latest version: 6.0.2, last published: 3 months ago. Start using inversify in your project by running `npm i inversify`. There are 2795 other www.npmjs.com

React Typescript 사용중에 SelectBox 같은 재사용 가능한 토글 메뉴 컴포넌트를 만들고 있는 와중에 export const orderSelectOptions = { orderSubject: '제목순', orderUpdated: '수정일순', orderCreated: '생성일순', } as const; 이런식으로 리터럴 객체에 as const를 이용하여 상수로 만들었다. - 해당 리터럴 객체의 추론 const orderSelectOptions: { readonly orderSubject: "제목순"; readonly orderUpdated: "수정일순"; readonly orderCreated: "생성일순"; } {Object.entries(orderSelectOptions).map(([..