TypeScript

RequireAtLeastOne 타입의 필요성 아래와 같은 인터페이스가 있다고 가정 해 봅시다. 아래의 인터페이스는 targetIdentifier를 통해 DOM의 특정 요소를 가져와서 extraClass 혹은 extraId를 추가할 수 있는 옵션을 정의합니다. interface DOMElementIdentifierOptions { targetIdentifier: ValidTargetIdentifier extraClass?: string[] extraId?: string } extraClass 혹은 extarId라는 값은 Optional 하긴 하지만, 반드시 둘 중 하나 이상은 필수인 인자가 됩니다. 이럴 때 필요한 것이 바로 아래에서 만들어 볼 RequireAtLeastOne Type 입니다. Gener..

제네릭(Generic) 제네릭은 Java, TypeScript 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭의 사전적 정의는 위와 같고, 실질적으로 어떻게 사용 할 수 있는지 바로 아래에서 알아보도록 합시다. 아래 포스트에서는 java, typeScript 두개의 언어로 예시를 들고, 각각 무엇을 의미하는지 정리해보고자 합니다. 제네릭 함수 제네릭(Generic) 함수는 제네릭 형식의 매개변수를 사용하여 선언된 함수입니다. 제네릭 함수를 호출하면, 실제로 넘겨진 argument의 형식이 사용되게 됩니다. 참고로, 제네릭타입으로 T, E, K 등 여러가지 대문자를 사용하는데, 이는 특..

타입스크립트로 d3 라인차트를 구현할 때, 시간 축에 tickFormat을 쓰려다가 아래와 같은 에러를 만났다. function timeFormat(specifier: string): (date: Date) => string Returns a new formatter for the given string specifier. The returned function formats a specified date, returning the corresponding string. An alias for locale.format (TimeLocaleObject.format) on the default locale. @param specifier — A specifier string for the date forma..

for문을 돌렸을 때와 map을 이용했을 때 성능차이를 측정하기 위해, 아래처럼 코드를 짰지만 에러가 발생하는 것을 볼 수 있었다. JS에서는 이렇게 날짜간에 차이를 - 를 이용해 연산이 가능하지만, TS에서는 에러를 표출한다. 이럴 때에는 getTime 메소드를 이용해주면 된다. 바로 예시를 통해 알아보자. 참고로, 결과는 ms 단위로 나오게 된다. 결론적으로 저 방식은 3초가 넘게 걸린다는 것... 개선하러 가야겠다

bigint Type을 써야 해서 type에 bigint라고 명시하고, 해당 키값에 숫자를 넣었더니 위와 같은 에러메시지가 출력됐다. type someMockData = { idx: bigint; ... }; const mockDataForSome: someMockData = { idx: 586582677356690, ... }; //ERROR: Type 'number' is not assignable to type 'bigint' 알고보니, bigint 타입은 생성자를 이용해서 값을 넣어줘야 했다. 따라서 아래처럼 작성을 하니 정상적으로 작동했다.( 참고 링크 ) const mockDataForSome: someMockData = { idx: Bigint(586582677356690), ... };

타입스크립트를 사용하면서, event target에 접근하다 위와 같은 에러를 만나게 되었고, 어떻게 해결할 수 있었는지 기록하고자 한다. Error 내가 만나게 됐던 에러는 Property 'classList' does not exist on type 'EventTarget'. 이었다. Drag Drop 이벤트를 혼자 구현해보다가 아래처럼 작성했었다. 드래깅 되는 타겟에 내가 원하는 CSS효과를 주려고 아래처럼 접근하니, classList라는 property가 없다는 에러를 만나게 됐다. //Drag Event const onDragStartHandler = ( e: React.DragEvent, idx: number ) => { const target = e.target; target.classLis..