본문 바로가기

IT/typescript34

[Typescript] Complier Options - suppressImplicitAnyIndexErrors 개념 object에 있는 값을 indexing 하는 방식으로 값을 가져올 때 2가지 상황에 대해서 암묵적인 any로 추론되는데, 이 에러 경고를 무시하는 옵션 첫번째 상황 object type에서 없는 키 index signature에 넣었을 때 두번째 상황 keyof typeof object 의 타입과 다른 타입의 키를 index signature에 넣었을 할때 특징 해당 옵션을 사용한다면 (set to 'true') 너무 위험하기에 사용할 때마다 아래처럼 주석을 달아주는걸 권장한다. 5.5에는 deprecation이 될 예정이라 미리 false로 변경 후 에러 경고나는 곳을 수정하는게 바람직하다 테스트 무조건 에러 경고가 뜨는건 아님. 추론된 object 타입의 key가 아닌 다른 key를 index.. 2024. 3. 12.
[typescript] ConstructorParameters<Type> 개념 constructor function의 파라미터의 type을 반환하는 Utility Type class A { constructor(b: number) { } } type T0 = ConstructorParameters; /** * * [b: number] * */ 2024. 3. 11.
[Typescript] Parameters<Type> 개념 함수의 파라마터의 Type을 Type으로 사용하고 싶을 때 function f1(arg: {a:number; b:string}) { } type T1 = Parameters /** * * [arg: { a:number; b:string }] * */ type T2 = Parameters[0] /** * * { a:number; b:string } * */ https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 2024. 3. 11.
[Typescript] Type-Only Imports and Export 개념 타입 표기와 선언에 사용될 선언만 import 한다. 완전히 제거되므로, 런타임에 남아 있는 것은 없다. import type { mapboxgl } from './mapboxgl' export type { mapboxgl } 특징 클래스는 런타임에 값을 가지고, 디자인-타임에 타입을 있으며 사용은 상황에 따라 다를 수 있다. import type을 사용하면, 확장 같은 것은 할 수 없다. import type { Component } from "react"; interface ButtonProps { // ... } class Button extends Component { // ~~~~~~~~~ // error! 'Component' only refers to a type, but is bein.. 2024. 3. 8.
[Typescript] satisfies 배경 개발자들은 딜레마에 빠진다. 개발 하다보면 object의 맴버들이 type에 매칭되길 원할 뿐만 아니라 타입추론으로 인하여 가장 명확한 타입을 유지하기 원한다. 상황 예 const palette = { red: [255, 0, 0], green: '#00ff00', bule: [0,0, 0] //^^^^ typo } const redComponent = palette.red.at(0) const greenNormalized = palette.green.toUpperCase() 기존 시도 object에 type 선언했더니 로직에서 에러 발생 type Colors = 'red' | 'green' | 'blue' type RGB = [red: number, green: number, blue: numbe.. 2024. 2. 22.
[Typescript] 타입 호환성 Typescript의 타입 호환성 > 구조적 서브타이핑 기반 구조적 서브타이핑 > 오직 멤버만으로 타입을 관계시키는 방식 > y가 최소환 x와 동일한 멤버를 가지고 있다면, x와 y는 호환된다. > '덕 타이핑'이라고도 함 '만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를것이다' type Food = { /** 각 영양소에 대한 gram 중량값 */ protein: number; carbohydrates: number; fat: number; } type Burger = Food & { /** 햄버거 브랜드 이름 */ burgerBrand: string; } function calculateCalorie(food: Food) { return food.pro.. 2024. 2. 22.