일단 Doit

https://www.typescriptlang.org/ko/docs/handbook/2/generics.html Typescript를 사용할때 가장 어려움을 겪을 수 있는 부분은 바로 재사용 컴포넌트 구현시 입니다. 재사용 컴포넌트란 말은 다양한 Type을 받을 수 있고 다양한 Type을 반환한다는 것인데, 해당 Type에 따라서 각각 다른 컴포넌트를 구현할 수 없으니, Generic을 통해 컴포넌트 사용자가 Type을 설정하게 한다는 것입니다. 예를 들면, 아래와 같이 Number와 String을 받아 해당 Type의 Array를 반환하는 함수가 있다면, 아래와 같이 정의 할수 있습니다. const arrayNumber = (a: number, b: number) => [a, b]; const arr..

Typescript 2024. 1. 12. 19:15

javascript에서 object 요소를 가져올때 for in loop를 많이 사용하는데, typescript에서는 해당 문법에서 eslint type 오류가 발생합니다. key, value 타입 정의가 없어서 그런데요, type을 [key:string]:unkown으로 설정하는 방법도 있겠지만, 그보다는, javascript Object 문법을 사용하면 type정의 필요없이 구현이 가능합니다. Object.entries() Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. Object.assign() Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 ..

Typescript 2023. 2. 18. 11:36

Typescript 에서 props를 전달 받는 함수를 정의할 때 아래와 같이 사용합니다. export interface IAlert { title?: string; content?: string; showAlert(title: string): void; } 이때 아래와 같은 warning 혹은 error가 발생합니다. 해당내용은 title이랑 변수가 사용되지 않았다는 것인데, interface정의라 사용할 이유가 없으므로, 특정 패턴으로 무시하는 eslint rule을 적용하면 해결 됩니다. eslintrc.js rules: { '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], ... }

Typescript 2023. 2. 18. 11:33

Typescript에서 객체 타입을 만드는 방법 중에 type과 interface가 있습니다. 사용방법이나 사용 이유가 거의 비슷한데요. 많은 프로젝트에서 2가지 방법중에 고민하는 경우가 많이 있습니다. 간략하게 비교해보면 아래와 같습니다. type과 interface의 유사한 기능 1. 선언 type BirdType = { wings: 2; }; interface BirdInterface { wings: 2; } const bird1: BirdType = { wings: 2 }; const bird2: BirdInterface = { wings: 2 }; 2. 확장 - type은 & 사용 - interface는 extends를 사용하여 확장 type Robin = { nocturnal: false } ..

Typescript 2023. 1. 26. 16:20