FrontEnd/TypeScript6 zod에 Data 형식 맞춰보기(feat. time) zod 의 날짜를 지정하는 타입은 두가지 방식이 있다. zod.date()zod.string().date()1번의 zod.date() 형식은 바로 Date 형식을 넣어주면 호환이 잘 됨. 2번의 string이라는 단어에 맞춰 zod.string().date() 는 문자열로 지정 됨. 해당 문자열은 yyyy-MM-dd 따라서 Date 형식을 바로 넣는다면 parse시 invalid 라는 에러 메시지가 뜸. 떄문에 Date 형식을 yyyy-MM-dd 으로 포맷할 필요가 있음.해당 포맷은 date-fns/format 으로 진행했음// start,end Date가 zod.string().date() 일 경우const { from, to } = selectedDate;if (from) setValue("start.. 2024. 9. 5. [TS] 타입스크립트 Utility types - Exclude, Omit Exclude, Omit - TS에서 제공하는 type 변형을 유연하게 도와주는 타입들 Exclude Exclude from T those types that are assignable to U. (typescript 2.8 릴리즈) Exclude => union type에서 제외된 타입들에 대한 새로운 타입을 정의함 type MyUnion = string | number | boolean; type ExcludeNumber = Exclude; const value: ExcludeNumber = 'hello'; // value can only be of type string or boolean Omit TypeScript 3.5 introduces the new Omit helper type, which.. 2023. 7. 17. [TS] Cannot find module '' or its corresponding type declarations.ts(2307) TS에서 특정 라이브러리를 사용할 때, dependencies에 설치해도 제목과 같은 에러가 나는 경우가 있다. TS는 라이브러리 타입을 읽을 때, index.d.ts를 먼저 찾는다. 이 파일은 라이브러리마다 있을 수도, 없을 수도 있다. 대표적으로 axios 같은 경우 node_module 내부에 index.d.ts가 미리 정의되어 있어서 TS에서 자동으로 타입 추론 가능 그러나 없을 경우 개발자가 추가로 처리해줘야 함. @types/xxx 설치 외부 라이브러리 type 만들기 1. @types/xxx 설치 node_module 내부에 index.d.ts를 정의하지 않은 라이브러리는 @types/xxx 에서 따로 정의한 경우가 있다. 예를 들어 chart.js를 install 했다고 가정했을 시, 아래.. 2023. 2. 26. [TypeScript] 제네릭(Generics) 정리 제네릭이란? 제네릭은 C#,Java 등의 언에서 재사용성이 높은 컴포넌트를 만들때 자주 활용된다. 한가지 타입보다 여러 가집 타입에서 동작하는 컴포넌트를 생성하는데 사용됨. 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. function getText(text) { return text; } JS로 이러한 코드가 있을 때 인자로 'hi', 10, true를 각각 넣어준다면 함수는 그 값을 그대로 리턴해준다. 이를 TS의 제네릭 문법을 적용해본다면 아래처럼 정의한 후 재활용이 가능해진다. // const getText = (text:T):T =>{} // const getText = (text:T):T =>{} // 위처럼 제네릭에 기본 타입도 줄 수 있다. function getTex.. 2022. 12. 9. [TypeScript] TS에서의 함수 ( 파라미터, 리턴 타입 지정 ) 기본 틀 파라미터의 타입은 해당 파라미터 옆, 리턴 타입은 파라미터 선언 오른쪽 아래와 같이 선언해주면 타입 실드가 장착돼서 TS가 알아서 이후 논리 어긋난것들에 대해 알려줌 파라미터의 타입을 지정해주면 필수 파라미터가 됨 ( 선택적으로 줄려면 파라미터명 옆에 '?' 붙여주면 됨) function 함수이름(변수:타입):타입 { return 리턴할 값 } const 함수이름 = (변수:타입):리턴타입 =>{.../} 리턴 할 게 없을때는 void(공허한) 를 써준다. function fn():void { console.log('리턴값 없음') } 선택적인 파라미터라면 '?'를 붙여주는데 이것은 곧 그 파라미터는 type | undefined 를 의미함 function 함수이름(x?:number) { con.. 2022. 12. 9. [TypeScript] declare module 에 대해 (feat. import, export ) 모듈(module) 이란? import | export 가 있는 파일을 모듈이라고 한다. 외부에서 직접적으로 모듈을 불러오지 않으면 그 모듈의 데이터는 사용X import : 모듈에서 데이터를 불러올 때 사용 export: 모듈에서 데이터를 내보낼 때 사용 [TypeScript] 컴파일 될 때 import, export 데이터의 행방 변수, 상수, 함수, 클래스: JS 모듈 로더 코드로 컴파일 된다. 타입: JS 코드로는 컴파일 되지 않음. ( JS 코드에서는 삭제 ) 네임스페이스: JS 일반 객체로 컴파일 된다. 등장 배경 사용 빈도가 높은 라이브러리의 타입들은 @types/라이브러리를 통해 알 수 있다. 하지만 기능이 약한 라이브러리는 모듈 정의가 안되어 있는 경우가 많음 또한, 여러 문서에서 반복적.. 2022. 12. 9. 이전 1 다음
