TypeScript
TIL | Custom hook with return tuple type array
ISSUE // 단순 예시입니다. import { useState } from "react"; const useToast = () => { const [isOpen, setIsOpen] = useState(false); const handleToast = () => { setIsOpen((prev) => !prev); }; return [isOpen, handleToast]; }; export default useToast; // error // const handleToast: boolean | (() => void) // This expression is not callable. // Not all constituents of type 'boolean | (() => void)' are..
TIL | Type guard
Type guard Type guard?? 특정 범위 안에서 타입을 좁혀가며 런타임 타입 검사를 수행하는 표현식이다. - typescript docs 타입 가드를 사용함으로써, 무분별한 타입 단언(Type Assertion)을 막을 수 있다. Example 원시 타입을 검사할때 type Combinable = number | string; const add = (a: Combinable) => { if (typeof a === "string") { // Type Guard return a.split(""); } return a; }; console.log(add(1)); 원시 타입은 typeof 키워드를 사용하여 타입을 검사할 수 있다. 위 예시에서 typeof 키워드 없이 a.split("")을 적용하..
TIL | Index signature
Index signature 이슈 Nextjs, tailwind를 통해 간단한 클론을 해보던 도중, 아래와 같은 이슈가 발생하였다. 위 사진은 fetch가 속한 getServerSideProps와 데이터를 받아올 쿼리문이 작성된 json 파일을 통해 데이터를 받아온 후 Home컴포넌트에 전달하는 로직이다. 그런데 requests[genre] 부분에서 지속적으로 에러가 발생하였다. 위 사진에는 보이지 않지만, 헤더의 아이템을 클릭했을 때 동적으로 변하는 쿼리값에 따라서 받아오는 데이터도 변했어야 하므로 변수로 접근해야만 해당 기능이 구현 가능하기 때문에 확인해보니 다음과 같은 방법이 필요했다. 해결 위와 같은 에러가 발생한 이유는, 바로 index signature을 지정하지 않았기 때문에다. 즉 Java..
TIL | Interface VS Type
Interface VS Type Alias Interface 인스턴스를 생성하는 class 처럼, 특정한 규칙을 담고 있는 것을 구현할 때 사용하는 것이 적절하다. 1. 기존에 존재하는 인터페이스의 프로퍼티 확장 interface Person { name: string; age: number; } // interface Person { gender: string; } // const yongmin: Person = { name: "yongmin", age: 29, gender: "male", }; 기존 존재하던 인터페이스에 새로운 프로퍼티를 추가할 수 있다. 동일한 이름의 인터페이스에 추가하고자 하는 프로퍼티 값만 적어주면 된다. (공식문서에서는 동일한 인터페이스가 존재할 경우, 해당 필드값들을 merg..
TIL | Generics
Generics(제네릭) 제네릭은 재사용성이 높은 컴포넌트를 만들 때 자주 활용된다. 즉, 특정 타입에 고정되지 않고 여러 타입에서 동작할 수 있는 컴포넌트를 생성하는데 사용된다. 마치 타입을 함수의 변수처럼 유동적으로 지정하여 사용하는 것을 뜻한다. 제네릭은 선언 시점이 아닌, 생성 시점에 타입을 명시하여 다양한 타입의 사용을 가능케 한다. 제네릭을 사용하는 이유 제네릭을 사용하지 않을 경우 const getValue1 = (value: number): number => { return value; }; console.log(getValue1(15)); // 15 // const getValue2 = (value: string): string => { return value; }; console.log..
TIL | Interface
Interface(인터페이스) 인터페이스는 상호간에 정의한 약속 혹은 규칙을 뜻한다. (쉽게 설명하면 사용 설명서같은 느낌도 든다.) 객체의 속성, 함수의 매개변수 및 리턴값, 배열 및 객체의 접근 방식, 클래스에 대해 인터페이스를 지정할 수 있다. (타입의 틀을 정할 수 있다.) 객체에서의 인터페이스 // 객체 interface Person { name: string; age: number; gender?: string; // ?을 통한 옵션 속성 사용(선택적으로 사용 가능) } // const tomas: Person = { name: "tomas", age: 20, }; // const james: Person = { name: "james", age: 30, gender: "male", }; //..