[typescript] 인덱스 시그니처 (index signature) 타입을 정의할 때, 키(key)에 커스텀 타입 (custom type, literal, generic)을 매핑하는 방법 (Record)
type 회원구분 = '정회원' | '준회원'; export const 숨길메뉴들: Record<회원구분, string[]> = { 정회원: [ '0001', ], 준회원: [], };
Category Archives: Typescript
[typescript] object 내에 있는 key를 기준으로 object 내부를 정렬하기 (sort, order by…)
소스 /** * 인자로 받은 object를 key 기준으로 내부 정렬하여 리턴한다. * * – 한계점 * – 1depth 만 되는 것처럼 보인다. */ export const sortByKey = (unordered: any = {}) => { return Object.keys(unordered) .sort() .reduce((obj: any = {}, key: any) => { obj[key] = unordered[key]; return obj; }, {}); }; 참고 https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key
[typescript] 스프레드 연산자 (전개구문, 펼침, spread operator) 를 사용한 배열을 함수의 인자(인수, 매개변수, arguments)로 넘기고 싶을 경우
javascript 라면 그냥 사용하면 되는데, typescript 일 경우 아무 생각 없이 사용하면 다음과 같은 에러가 발생한다. A spread argument must either have a tuple type or be passed to a rest parameter function getObj(name: string, age: number) { return { name, age, }; } // 해결방안 1) as const를 사용하여 배열을 튜플(tuple)로 만든다. const result… Read More »
[yarn berry] tsc (typescript compile) 명령시 로컬에서는 정상인데 서버에서만 컴파일 오류가 났던 경험 (ts error only server / aws codebuild)
로컬 환경 yarn 3.2.3 을 사용하여 라이브러리 설치, build 모두 수행 서버 환경 node 16 (aws codebuild) 항상 아무것도 없는 바닥에서 npm install 부터 시작함. install 시에는 yarn을 사용하지 않고 npm i –force 명령을 사용 (항상 새로 다운로드) build시에는 yarn 1.x 를 사용 이슈 서버 빌드시에만 타입스크립트 오류 발생 정확히 말하면 build 전 수행하는 tsc… Read More »
[javascript] 한글 조사 ‘은(는)’, ‘이(가)’ (은는, 이가) 구분해서 붙이는 샘플코드
/** * 인자로 받은 한글의 종성여부를 판단하여 적합한 조사를 리턴한다. */ const getKoreanAffix = (str: string, type: '은는' | '이가' | '과와') => { const lastChar = str.charCodeAt(str.length – 1); const hasLast = (lastChar – 0xac00) % 28; switch (type) { case '은는': return hasLast ? '은' : '는'; case '이가': return hasLast ? '이'… Read More »
[react/typescript] FC의 Props type을 조건부(conditionally) 필수(required) 처리 하는 샘플코드
react로 select box를 구현하던 중 작성한 코드 type SELECT_기본선택지 = '선택' | '전체'; type Props = { data: any[]; // select box를 구성할 리스트 데이터 labelKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 label로 사용하고 싶을 경우 기재 valueKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 value로 사용하고 싶을 경우 기재 style?: CSSProperties; } &… Read More »
[typescript] *.d.ts 파일에 정의된 타입을 import 없이 인식하지 못하는 경우 (typescript access type without import not work)
*.d.ts 파일에 type이 아닌 다른 것들을 기재해서 (e.g. 변수/상수 등..) 인식하지 못했던 것이었다. 해당 파일에는 오직 type만 존재해야 하는 듯 하다.
[링크] 타입스크립트 열거형 (typescript enum) 관련 이슈/문제점
TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
[링크] 타입스크립트 제네릭 (typescript generic) 관련
https://www.typescriptlang.org/docs/handbook/2/generics.html
[펌글/typescript] 함수(function)의 인수(인자,매개변수,arguments)의 형식을 타입(type)으로 선언하기.
예시 type TestParams = Parameters<(a: string, b: number) => void> // [string, number] type SecondParam = TestParams[1] // number 출처 https://stackoverflow.com/questions/51851677/how-to-get-argument-types-from-function-in-typescript
[링크] [typescript] type/interface 에서 일부 필드의 타입을 변경(override) 하기 (Omit 과 & 사용)
https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file
[링크] Typescript에서 window 객체에 property 추가하기
https://velog.io/@kineo2k/Typescript%EC%97%90%EC%84%9C-window-%EA%B0%9D%EC%B2%B4%EC%97%90-property-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 참고 위 내용을 찾아봤던 이유는, header/footer.tsx 에 속한 함수를 어떻게 호출할 방법이 없을까 찾아보다가 window객체의 프로퍼티로 함수를 편입시키는 방법을 알게 되었기 때문이었음.
moment.js 에서 timezone 을 적용한 date 객체 다루는 샘플
환경 react 17.0.2 moment-timezone 0.5.34 소스 import moment from 'moment-timezone'; // tz 를 사용하려면 이걸로 import 해야 함. // 기본 timezone 지정 const DEFAULT_TIMEZONE = 'Asia/Seoul'; // const DEFAULT_TIMEZONE = 'America/New_York'; // 날짜 기간 검색시 기본 기간 export const DEFAULT_SEARCH_PERIOD_DAYS = 7; const cur = moment.tz(new Date(), DEFAULT_TIMEZONE); const start = cur.clone().add((-1 * DEFAULT_SEARCH_PERIOD_DAYS), 'days');… Read More »
[링크] typescript (*.ts) 파일 작업시 window 객체를 사용하는데 ‘window is not defined’ 오류가 발생하는 경우 해결방법
가장 쉬운 결론 if (window !== undefined) { // browser code } 출처 https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97
[링크/typescript] catch 절 인수 error가 unknown 인 것 때문에 발생하는 문제 해결
[typescript] Object is of type ‘unknown’.ts(2571) (error object)