타입스크립트
[TS] 타입스크립트의 공변성 / 반공변성 / 이변성
[TS] 타입스크립트의 공변성 / 반공변성 / 이변성
2024.05.17TL;DR 엄격 모드비엄격 모드함수 리턴 타입공변적공변적함수 파라미터 타입반공변적이변적그 외공변적공변적공변성 : 슈퍼 타입(넓은 타입)이 서브 타입(좁은 타입)을 커버하는 관계서브 타입을 슈퍼 타입에 대입할 수 있음 e.g. superType = subType타입스크립트 기본 동작반공변성 : 서브 타입(좁은 타입)이 슈퍼 타입(넓은 타입)을 커버하는 관계슈퍼 타입을 서브 타입에 대입할 수 있음 e.g. subType = superType함수 파라미터 동작이변성 : 공변성과 반공변성을 모두 포함하는 관계슈퍼 타입과 서브 타입을 모두 대입할 수 있음strictFunctionTypes 옵션을 껐을 때 함수 파라미터 동작 공변성 | Covariance공변성 : A가 B의 서브 타입이면, T는 T의 서브 타입 아..
[TS] TypeScript 타입스크립트 satisfies 연산자
[TS] TypeScript 타입스크립트 satisfies 연산자
2024.05.16타입스크립트 4.9 버전부터 안전한 *업캐스팅을 지원하는 satisfies 연산자를 사용할 수 있다. satisfies 연산자를 활용하면 타입을 변경하지 않고도 변수에 *제약 조건(constraint)을 적용할 수 있다. 즉, 객체 프로퍼티에 제약 조건을 적용하면서 각 프로퍼티의 타입을 올바르게 추론할 수 있다. 💡 용어 설명캐스팅 : 타입 변환업캐스팅 : 자식 클래스를 부모 클래스 타입으로 캐스팅 (상위 타입으로 변환)다운캐스팅 : 부모 클래스를 자식 클래스 타입으로 캐스팅 (하위 타입으로 변환)제약 조건 : 특정 타입이나 구조를 강제하여 코드의 안정성과 일관성을 보장하는 방법 문제아래 참가자 정보를 나타내는 attendee 객체가 있다. 객체를 선언하면 타입스크립트는 객체의 각 프로퍼티 타입을 자동..
[TS] 엘리먼트의 기본 어트리뷰트 인터페이스/타입 사용하기
[TS] 엘리먼트의 기본 어트리뷰트 인터페이스/타입 사용하기
2024.05.12HTMLAttributescheckbox 타입의 엘리먼트를 사용하는 Toggle 컴포넌트를 만든다고 가정해보자. 엘리먼트는 autoFocus, required, readOnly 등의 기본 어트리뷰트 가진다. 만약 엘리먼트가 기본적으로 받을 수 있는 어트리뷰트를 Toggle 컴포넌트의 props로 넘기고 싶다면? 모든 어트리뷰트에 대한 인터페이스를 정의해야 할까? 이땐 InputHTMLAttributes 타입을 사용하면 된다. 그럼 각 어트리뷰트의 prop 타입을 일일이 정의하지 않아도 된다. 제네릭 T는 onChange 이벤트 핸들러의 엘리먼트 타입이 들어가므로 HTMLInputElement 같은 타입을 넘기면 된다.// InputHTMLAttributes 구조 | node_modules/@types/r..
[TS] useQuery, useMutation의 제네릭 타입 살펴보기 / Base Query 훅 만들기
[TS] useQuery, useMutation의 제네릭 타입 살펴보기 / Base Query 훅 만들기
2024.05.12React Query에서 제공하는 useQuery, useMutation을 그대로 사용하면 항상 쿼리키와 쿼리 함수를 지정해야 하는 번거로움이 있다. API 유형에 따라 Base Query|Mutation 커스텀 훅을 만들어 두고 사용하면 쿼리키와 쿼리 함수를 일일이 지정하지 않고 여러 곳에서 재사용하기 좋다. 하지만 커스텀 훅을 만들 때 쿼리 타입을 지정하지 않으면 데이터가 unknown, any인 경우가 많아서 어떤 데이터를 다루는지 알기 어렵다. 쿼리 타입은 대부분 제네릭으로 되어 있는데 이를 잘 사용하면 타입을 보장 받으면서 데이터를 편리하게 다룰 수 있다. useQuery제네릭 타입 톺아보기 ⚡️export declare function useQuery ❶ TQueryFnData : 쿼리 함수 ..
[TS] 타입스크립트에서 CSS Module 사용하기
[TS] 타입스크립트에서 CSS Module 사용하기
2024.05.11타입스크립트 CSS Module 오류 해결타입스크립트에서 CSS Module을 사용하면 모듈/선언을 찾을 수 없다는 타입 에러가 나온다. src 혹은 컴포넌트 폴더에 아래 내용이 담긴 typings.d.ts 파일을 추가하면 해결할 수 있다. via StackOverFlow// Toggle/typings.d.tsdeclare module '*.module.css' { const classes: { [key: string]: string }; export default classes;} CSS Module 사용법❶ [name].module.css 형태로 CSS 모듈 파일을 작성하고/* Toggle/Toggle.module.css */.toggle-bg:after { /* ... */} ❷ 컴포넌트에서 ..
[TS] 타입스크립트 타입 가드 is / asserts 키워드 차이점
[TS] 타입스크립트 타입 가드 is / asserts 키워드 차이점
2024.05.10TL;DRparameterName is Type : 조건문에서 사용 (if문으로 타입을 분기 처리할 때 사용)asserts parameterName is Type : 예외를 발생시킴 (스코프 내에서 유효한 타입인지 판단할 때 사용) is 키워드타입스크립트에서 타입 범위를 좁혀나가는 작업(기능)을 타입가드라고 부른다. 간단한 타입은 in, typeof 키워드 등을 사용할 수 있지만 ➊타입이 복잡하거나 ➋타입 체크 로직을 재사용하고 싶을 땐 사용자 정의 타입 가드 함수를 만들어서 사용한다. 타입 가드 함수는 리턴문에 is 키워드를 이용해서 “어떤 인자는 어떤 타입이다” 라는 값(타입 명제/술부; Predicate)을 리턴하는 함수라고 볼 수 있다. 💡 술부(Predicate; 谓词)란? 주어의 상태, 성질..
[TS] 타입스크립트 두 종류의 키(key) 타입을 받을 때 객체 접근하기
[TS] 타입스크립트 두 종류의 키(key) 타입을 받을 때 객체 접근하기
2024.05.08문제 상황아래와 같은 타입이 있다고 가정해보자.export type OrderStatus = 'pending' | 'new' | '...생략';export type Client = { user_id: number; company_name: string };export type OrderFilterParams = { status: Array; client: Array; // ...생략}; ClientAndOrderFilter 컴포넌트에선 "status" | "client" 두 종류의 타입을 받아 params[type] 형태로 OrderFilterParams 객체에 접근해서 값을 변경해야 하는 상황이다. interface ClientAndOrderFilterProps { setParams: Dispa..
[TS] @ts-ignore, @ts-expect-error 타입스크립트 주석 차이점
[TS] @ts-ignore, @ts-expect-error 타입스크립트 주석 차이점
2024.05.08@ts-ignore, @ts-expect-error 두 주석 모두 타입스크립트의 타입 오류를 처리하는 방법을 제공하지만 @ts-expect-error는 개발자가 오류를 인식하고 있으며, 추후 수정할 의도가 있음을 명시적으로 나타낸다. 반면, @ts-ignore 주석은 단순히 오류를 무시한다. 코드 유지보수를 위해 가능한 @ts-expect-error 주석을 사용하는게 좋다. @ts-ignore특정 코드 라인에 타입 오류가 있더라도 컴파일러가 이를 무시하도록 지시해결 방법을 찾지 못했거나 일시적으로 오류를 무시하고 싶을 때 사용 @ts-expect-error코드에서 타입 오류가 예상되는 경우, 이를 명시적으로 선언하면서 오류를 무시할 때 사용예상한 오류가 실제로 발생하지 않으면 해당 주석이 더이상 필요하지..
[TS] 타입스크립트 제약 조건과 조건부 타입
[TS] 타입스크립트 제약 조건과 조건부 타입
2024.05.05식별자 영역 / 타입 구현 영역type, interface 키워드를 사용한 타입 선언은 = 등호와 {} 중괄호를 기준으로 식별자(좌), 타입 구현(우) 영역으로 구분할 수 있다.// type 식별자 = 타입 구현type MyType = string | number;// interface 식별자 { 타입 구현 }interface User { name: string; age: number;} 제약 조건 | Constraints식별자 영역에서 사용하는 extends는 제약 조건을 추가할 수 있다. 기본적으로 제네릭엔 모든 타입이 올 수 있지만 제약 조건을 이용해 특정 타입으로 제한할 수 있다.기본 문법 : T extends U — T는 U의 부분 집합(T ⊆ U)으로 볼 수 있음ex) 64 extends ..
[TS] 타입스크립트 맵드 타입 / 유틸리티 타입 / Enum
[TS] 타입스크립트 맵드 타입 / 유틸리티 타입 / Enum
2024.05.05타입스크립트의 맵드 타입(Mapped Types)은 기존 타입을 새로운 타입으로 변환해주는 문법이다. 자바스크립트의 map 배열 메서드를 타입에 적용한 것과 비슷하다(그래서 이름이 Mapped Types다). 맵드 타입 개념 톺아보기아래 디바이스 브랜드를 나타내는 유니온 타입 Devices가 있다. 여기에 각 디바이스 브랜드의 가격 정보가 포함된 객체를 만들고 싶을 때 맵드 타입을 활용할 수 있다.type Devices = 'APPLE' | 'OPPO' | 'XIAOMI'; // 디바이스 브랜드를 나타내는 유니온 타입type DevicePrices = { [P in Devices]: number }; // 디바이스 브랜드 타입을 순회해서 key로 정의되는 맵드 타입const deviceInfo: Devi..
[TS] 타입스크립트 - 타입 호환
[TS] 타입스크립트 - 타입 호환
2024.05.04타입 호환 Type Compatibility💡 자바스크립트는 객체 리터럴이나 익명 함수 등을 사용하기 때문에 명시적으로 타입을 지정하는 것보다 코드의 구조 관점에서 타입을 지정하는게 더 잘 어울릴 수도 있다. 타입스크립트에서 다른 타입 간에 호환 여부를 점검하는 것을 타입 호환이라고 한다. 아래 Avengers 클래스는 Ironman 인터페이스를 상속받아 구현한 게 아닌데도 에러가 발생하지 않는다. 타입스크립트에선 타입에 정의되어 있는 속성의 타입을 가지고 코드가 호환되는지 확인하기 때문이다.interface Ironman { name: string;}class Avengers { name: string;}let ironMan: Ironman;ironMan = new Avengers(); // ok..
[TS] 타입스크립트 - 느낌표 연산자
[TS] 타입스크립트 - 느낌표 연산자
2024.05.02자바스크립트에서 NOT ! 연산자는 false를 의미한다. 반면 타입스크립트에선 이 느낌표 ! 연산자가 변수 뒤에 올 수 있다. if문 등을 사용하지 않고 항상 유효한 값이 있다고 단언 할 때 사용한다. Non-null assertion operator (느낌표)💡 ESLint 규칙에선 느낌표 연산자를 사용하면 null-checking mode의 혜택을 받지 못하기 때문에 권장하지 않는다. 대신 foo.bar && foo.bar... AND 연산자 혹은 옵셔널 체이닝 사용을 권장한다. 느낌표 연산자를 꼭 사용해야 한다면 항상 유효한 값을 보장하는 변수에만 사용한다. 변수 내부 값에 접근할 때 TS 컴파일러는 항상 null undefined 인지 체크한다. 이때 if 문으로 타입 단언을(변수에 원하는 타..