타입스크립트
[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 문으로 타입 단언을(변수에 원하는 타..
[TS] 타입스크립트 - 타입 추론 / 단언 / 가드
[TS] 타입스크립트 - 타입 추론 / 단언 / 가드
2024.04.24타입 추론기본💡 타입추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미한다. 아래처럼 x 에 대한 타입을 따로 지정하지 않더라도 변수 x에 숫자 3을 할당했으므로 number 타입으로 간주한다. 이처럼 변수를 선언하거나 초기화할 때 타입이 추론된다. 변수, 속성, 함수 인자의 기본 값, 함수 반환 값 등을 설정할 때도 타입 추론이 일어난다.let x = 3; // 변수를 선언하고 할당함으로서 x는 number 타입이라는 추론이 일어났다. 아래 코드에서 DetailedDropdown 인터페이스는 extends 키워드를 이용했으므로 Dropdown 인터페이스의 속성도 가진다. DetailedDropdown의 타입은 DetailedDropdown에 있는 로 넘어간 후, 다시 Dropdown 인터페..
[TS] 타입스크립트 - 제네릭, 프로미스
[TS] 타입스크립트 - 제네릭, 프로미스
2024.04.24제네릭 소개제네릭은 타입을 함수의 파라미터처럼 사용하는 것을 의미한다. 제네릭은 재사용성이 높은 컴포넌트를 만들 때 자주 사용한다. 한 가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성할 때 유용하다. 제네릭 기본 문법💡 T는 Type parameter의 약자로 관용적으로 사용한다. 꼭 T를 사용해야하는건 아니다. 아래 함수의 text파라미터엔 hi 10 true 등 어떤 타입의 값이 들어가더라도 그대로 반환한다. 이렇게 모든 타입을 받을 수 있는 이유는 타입을 따로 지정하지 않았기 때문에 암묵적으로 any 타입이 돼서 그런 것이다.function getText(text) { return text;} 아래 함수는 제네릭 기본 문법이 적용된 형태다. 위 함수와 비슷하게 어떤 타입이든 파라미터로..
[TS] 타입스크립트 - 기초 내용 정리
[TS] 타입스크립트 - 기초 내용 정리
2024.04.24타입스크립트란?타입스크립트는 자바스크립트에 타입을 부여한 언어다. 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트를 브라우저에서 실행하려면 파일을 한 번 변환해줘야 한다. 이 변환 과정을 컴파일(정확히는 트랜스파일링)이라고 부른다.참고로 Babel은 자바스크립트의 최신 문법을 최대한 많은 브라우저에서 호환할 수 있도록 변환해주는 도구다. 왜 써야 할까?아래 2가지 관점에서 JS 코드 품질과 개발 생산성을 높일 수 있다.에러 사전 방지코드 가이드 및 자동 완성(생산성 향상) 에러 사전 방지아래 두 코드 모두 두 숫자의 합을 구하는 함수다. 위는 자바스크립트, 아래는 타입스크립트로 작성했다. 함수 호출 시 숫자가 아닌 문자열을 넣으면 자바스크립트는 문자열을 결합해서 전혀 다른 결과를 반환한다. 아래..