Dev Diary 💻

이 글은 원글을 참고하여 정리한 내용입니다. Definition TypeScript Generics는 재사용 가능한 구성요소를 생성하는 방법을 제공하는 도구입니다. generics는 프로그램이 장기적으로 확장가능할 뿐만 아니라 유연할 수 있도록 보장해줍니다. Example # Props interface Props { renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; data: T[]; } data: 제네릭 타입 T를 받을 배열 요소 renderItem: 타입 T의 react 요소를 반환하는 함수 keyExtractor: 키를 추출하는 함수 # Component 정의 const GenericList = ({ data,..

이 글은 udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강좌를 바탕으로 정리한 내용입니다 1. 환영 pass 2. TypeScript란 무엇이며 왜 사용해야 하는가? 타입스크립트는 자바스크립트의 superset 입니다. 새로 만들어진 언어가 아닌 자바스크립트 언어를 사용해 새로운 기능과 장점을 추가하는 언어입니다. 코드를 실행하여 타입스크립트 코드를 JS로 컴파일하는 강력한 컴파일러입니다. 타입을 추가하여 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 미리 확인할 수 있습니다. 개발 중 런타임 에러로 발생하는 에러를 초기에 수정할 수 있습니다. 단점) 브라우저와 같은 자바스크립트 환경에서 실행할 수 없습니다. node.js도 마찬가지입니다. 3..

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Error: Redundant double negation. no-extra-boolean-cast {text} Why 위 에러는 ESLint의 no-extra-boolean-cast 규칙으로, 불필요한 불리언 캐스트(불린 값을 강제로 캐스팅하는 것)를 방지하기 위한 규칙입니다. 현재 !!visible와 같은 형태로 불린 값을 강제로 캐스팅하고 하고 있습니다. 이미 불리언 값이 존재하기 때문에 이중 부정 연산자를 사용하여 불리언 값이 될 필요가 없습니다. How to solve 따라서 아래와 같이 이중 부정 연산자를 제거하면 ESLint 에러가 사라집니다. visible 자체를 사용해도 동일한 결과를 얻을 수 있습니다. {text}

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Could not find a declaration file for module Why? 이 오류 메시지는 연결된 declaration file 이 없는 타입스크립트 코드 안에 모듈이나 라이브러리를 사용할 때 발생하는 전형적인 오류입니다. declaration file(.d.ts)는 모듈이나 라이브러리의 types, functions 및 기타 속성을 설명하고 타입스크립트가 코드에서 이들을 사용하는 방법을 이해할 수 있도록 합니다. 따라서 설치된 특정 모듈/라이브러리에 대한 type 정의가 없어 타입스크립트에서 이해할 수 없으므로 다음의 오류가 발생한 것입니다. How to solve the problem 이 오류를 해결하기 위해서는..

Intro 안녕하세요. 타입스크립트를 사용하던 도중 아래와 같은 오류가 발생했습니다. Why? 해당 properties의 값을 읽을 수 없기 때문에 발생하는 오류입니다. How to solve the problem 해당 에러를 해결하는 방법은 여러가지인데요, 저는 그 중에서도 Optional Chaining 연산자 (물음표 연산자)를 사용하여 해당 오류를 해결할 수 있었습니다. 코드 사용 예제는 아래와 같습니다. return ( {item?.name} ) 이렇게 Optional Chaining 연산자 (물음표 연산자)를 사용할 경우 유효한 값이 없을 때는 undefined를 반환하고, 값이 있을 때는 Optional Chaining 연산자 이후 내용을 실행합니다. 따라서 해당 오류를 방지할 수 있습니다.

Intro 안녕하세요. TypeScript 타입스크립트에서 ref를 사용하여 scrollTop 위치를 변경하던 도중 아래와 같은 에러가 발생하였습니다 someRef?.current?.scrollTop = 0; TS2779: The left-hand side of an assignment expression may not be an optional property access Why? 스펙 상에서 옵셔널 체이닝과 할당을 같이 사용할 수 없다고 합니다. The following is not supported, although it has some use cases; see Issue #18 for discussion: optional property assignment: a?.b = c How to solv..

Intro 타입스크립트를 사용하던 도중 아래와 같은 에러가 발생하였습니다. Property 'offsetTop' does not exist on type 'Element'.ts(2339) Why? document.querySelector('.page').offsetTop 다음의 코드가 있다고 가정해봅시다. 이 코드는 맞는 코드이지만, 결과값이 null이 될 수 있으므로 null 체크를 해줘야 합니다. 두번째로는, 현재 리턴 타입은 Element입니다. 하지만 Element는 offsetTop이라는 프로퍼티를 갖고 있지 않습니다. HtmlElement로 반환될 것이라고 예상할 순 있지만, SVGElement가 될 수 있기 때문에 컴파일러에게는 이 정보가 정확하지 않습니다. 따라서 이 부분 역시 type-a..