JH 개발 블로그

조건부 타입 조건부 타입이 뭐고 왜 굳이 쓰는 걸까? 다음 예시를 보자. function checkName(idOrName: string | number) { return idOrName; } checkName(1); checkName("ji"); 매개변수로 type 이 string 이나 number 가 들어갈 수 있다고 지정해주었다. 이제 checkName(1) 에 마우스를 올려보았을 때, function checkName(idOrName: string | number): string | number 위와 같이 타입이 추론된다. checkName("ji") 도 마찬가지다. 나는 checkName(1) 이면 number 로, checkName("ji") 이면 string 으로 추론되게 하고 싶다. 이럴 ..

제네릭 타입스크립트를 이제 막 배우기 시작한 단계라면 제네릭에 대한 이해가 많이 어려울 것이다. 내 생각엔 타입스크립트를 써보고 익숙해지면서(함수 타입과 interface extends 같은 것에 익숙해진 후) 나중에 제네릭을 배우면 좀 더 이해가 쉽지 않을까 싶다. (개인적인 추천) 제네릭이란 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다. 제네릭이 없다면... 위처럼 generic을 쓰지 않는다면, 1) 타입을 미리 지정하거나 2) any 를 이용하여 구현할 수 있다. 1) 타입을 미리 지정하자면, 확실한 타입체크가 이뤄질 수 있겠지만 항상 number라는 타입을 ..

타입 추론 let bool = true; const arr = [1, 2, 3]; const tuple = [true, 1]; // bool = 1; // Error! 3번째는 배열의 요소가 각각 boolean과 number이기에 최종적으로 추론되는 타입은 boolean과 number의 유니온 타입의 배열, 코드로 나타내면 (boolean | number)[] 이다. 여기에서 배열에서 사용된 요소들의 타입을 각각 추론하여 유니온 타입으로 만들어 내는 방식을 TypeScirpt 에서는 Best common type이라고 부른다. Best common type Best common type 은 말 그대로 가장 일반적인 타입이다. 여러가지 자료형이 배열 내부에서 사용되고 있을 때, 그 여러가지 자료형을 포괄할..

https://stackoverflow.com/questions/68285637/got-type-void-is-not-assignable-to-type-void-in-react-typescript got Type 'void' is not assignable to type '() => void' in react typescript I tried to pass the props like to another component. I write the props like interface AccProps { deleteAcc: () => void; } and call the fu... stackoverflow.com container const handlePage = (page: number): void => {..

체크박스 typescript 참고 useState Type 지정하는 방법 참고하자. (인턴때 헤맸던 부분) 1. DatePicker 기본값: 접속한 날짜를 기준으로 30일간의 데이터를 조회할 수 있도록 설정 - 예외처리 최대 기간: 최대로 조회할 수 있는 날짜의 범위는 1년 날짜 조회: 오늘 이후의 날짜는 조회할 수 없도록 예외처리 시작일과 종료일: 시작일이 종료일을 넘을 수 없도록 예외처리 2. 검색 창 글자 제한: 20글자 이상의 검색어를 입력할 수 없도록 예외처리 3. 검색 초기화 조회 기간 및 검색어, 필터링(성별, 광고 종류, 비고) 초기화 및 데이터 Reload 4. 필터링 기본값: 모든 체크박스들이 체크되도록 기본값 설정 예외처리: 각각의 필터링 조건들에는 최소 하나의 체크 ..

인턴때 했던 페이지네이션 코드. react + material ui + typescript 사용 import * as React from "react"; import { useNavigate } from "react-router-dom"; import Pagination from "@mui/material/Pagination"; import Stack from "@mui/material/Stack"; import styled from "styled-components"; export interface PageType { page: number; setPage: React.Dispatch; totalPage: number; } export default function PaginationRounded(pr..