TS 5.5 버전의 변경점?
공식문서 ref) https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-5.html
Inferred Type Predicates(타입가드추론)
- 타입스크립트에서는 타입가드를 통해 타입을 좁힌다. 예를들어, 하나의 코드 컨텍스트에서 아래와 같은 코드가 있을 때 타입가드를 하는방법은 다음과 같다.
const a:string|number;
if(typeof a === 'string'){
....
} // 이때는 a가 string type
if(typeof a === 'number'){
....
} // 이때는 a가 number type..
- 하지만 문제가 발생한다. 이를 다른 함수로 만들어서 타입가드를 하게 된다면? TS는 이를 인식하지 못한다.
function isString(value: unknown) {
return typeof value === 'string'
}
if (isString(a)) {
console.log(a) // string | number
}- 이를 위해 Inferred type predicate 기능이 추가되었다. (타입가드 추론)
Type assertion vs Type Predicates?
-
ref) https://www.typescriptlang.org/docs/handbook/2/narrowing.html#typeof-type-guards
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions -
먼저 공식문서를 통해 type을 narrowing 하는 개념을 remind 해보고 가자.
Type Guards
-
타입가드는 js 문법을 통해 type을 좁히는 방법이다.
-
js의 if문, typeof, in, instanceof.. 등 Javascript 문법을 이용해 타입을 좁히는 것이 핵심
-
typeof 예시
function printAll(strs: string | string[] | null) {
if (strs && typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
}
}- in 연산자 예시 => 객체의 특정 프로퍼티가 있는지 확인하는 것을 통해 type Guard
type Fish = { swim: () => void };
type Bird = { fly: () => void };
function move(animal: Fish | Bird) {
if ("swim" in animal) {
return animal.swim();
}
return animal.fly();
}- instanceOf 예시
function logValue(x: Date | string) {
if (x instanceof Date) {
console.log(x.toUTCString());
(parameter) x: Date
} else {
console.log(x.toUpperCase());
(parameter) x: string
}
}Type predicate
-
JS 문법으로 Type을 Narrowing 하는 것이 아니라, TS 문법으로 direct로 control 하는 방식이다.
-
[parameterName is Type] 형식으로 사용하고, 여기서 오는 parameterName은 함수가 인자로 받는 parameter 중에 하나의 name과 동일해야 한다.
type Fish = { swim: () => void };
type Bird = { fly: () => void };
function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined;
}
const zoo: (Fish | Bird)[] = [getSmallPet(), getSmallPet(), getSmallPet()];
const underWater1: Fish[] = zoo.filter(isFish);
// or, equivalently
const underWater2: Fish[] = zoo.filter(isFish) as Fish[];
// The predicate may need repeating for more complex examples
const underWater3: Fish[] = zoo.filter((pet): pet is Fish => {
if (pet.name === "sharkey") return false;
return isFish(pet);
});Type assertion
-
Type 단언은 type에 대한 정보를 알고는 있지만, TS가 알 수 없을때 사용한다. (타입을 좁히는 것은 아니다)
-
아래와 같은 코드에서, document.getElementById("main_canvas")의 결과로 HTMLCanvasElement를 return할 것이라는 결과를 개발자는 알고 있지만, TS는 이를 추론할 수 없다.
-
이럴때 assertion을 통해 => HTMLCanvasElement를 명시적으로 return한다고 TS에게 알려주는 것.
-
Type Narrowing이 필요할 때 Type assertion을 사용하지 않도록 사용을 주의 할 필요가 있다.
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;배열에서 null, undefined type의 제거?
- 또 하나의 예시를 보자.
-
아래와 같은 코드가 있다 => 여기서 먼저 list는 (string | null | undefind)[] 타입으로 추론된다.
-
filterNullAndUndefinedList는 filter 함수를 통해 null과 undefined를 제거한 배열이다.
-
하지만, 5.5 이전의 버전에서는 type predicate 기능이 없었기 때문에, 5.4.5 버전으로 컴파일 한 결과는 여전히 동일한 타입을 추론된다.
const list = ['1', '2' , null, undefined];
const filterNullAndUndefinedList = list.filter(val => val !== undefined && val !== null);
console.log(filterNullAndUndefinedList); // ['1', '2'] but (string | null | undefind)[] 로 추론
- 이를 해결하려면, filter함수에 인자로 넘겨주는 fn에 type을 predicate해서 넘겨주는 작업을 해야한다.
function filterNullFn<T>(value : T | null | undefined):value is T{
return value !== undefined && value !== null;
}
const filterNullAndUndefinedListByFn = list.filter(filterNullFn);
console.log(filterNullAndUndefinedListByFn)
- 이런 과정이 5.5 이상 버전부터는 Inferred Type Predicates으로 자동으로 추론된다.
Control Flow Narrowing for Constant Indexed Accesses
-
5.5이상 버전부터는 obj[key]의 type을 narrowing 하는것이 가능해졌다.
-
obj[key]의 결과값을 곧바로 narrowing하면 TS는 인식하지 못하는 문제가 있었기 때문.(타입가드가 안되어서 unknown으로 추론됨)
//5.5이전버전
function f1(obj: Record<string, unknown>, key: string) {
const value = obj[key];
if (typeof value === "string") {
value.toUpperCase();
}
}
//5.5 버전
function f1(obj: Record<string, unknown>, key: string) {
if (typeof obj[key] === "string") {
// Now okay, previously was error
obj[key].toUpperCase();
}
}그 외 TS 끄적임
IndexSignature의 활용
-
보통 IndexSignature은 객체에 key를 통해 동적으로 아이템을 추가할 때 사용한다.
-
하지만 동적으로 추가하는 것이기 때문에 key값을 제한하고 싶은 경우가 있다.
type TIndexSignature = {
[key: string]: string;
};- 아래와 같이 string이 아니라, literal type을 사용해서 key값을 제한 할 수 있다.
type TItemNameKey = `itemName${number}`;
type TIndexSignature = {
[key: TItemNameKey]: string;
};- Prefix를 key가 string일때 제한한 후 리터럴 타입을 만드는 타입을 추가해서 사용 할 수 있다.
type addPrefix<TKey, TPrefix extends string> = TKey extends string
? `${TPrefix}${TKey}`
: never;
type TKey = string
const a : addPrefix<TKey, 'itemName'> = 'itemName231'- 아래와 같이 Prefix를 추가한 key를 만드는 Utility type도 만들 수 있다.
ref) Utility Type :https://dev.to/teamradhq/utility-type-withprefix-eje
export type WithPrefix<Prefix extends string, T, Separator extends string = '/'> = {
[K in keyof T as `${Prefix}${Separator}${string & K}`]: T[K];
};
// T를 받아서 => K 는 keyof T => 이를 Prefix, Sepeartor가 붙은 값으로 제한
type UserApi = {
get: string;
set: string;
all: string;
};
const api: WithPrefix<'/api', UserApi> = {
'/api/get': '',
'/api/set': '',
'/api/all': '',
};Prettify Helper
-
ref) https://www.totaltypescript.com/concepts/the-prettify-helper
-
Union Type을 보기 편하게 해주는 Utility Type. Global Utility Type이 아니므로 직접 정의해서 사용해야함.
type Prettify<T> = {
[K in keyof T]: T[K];
} & unknown;type Intersected = {
a: string;
} & {
b: number;
} & {
c: boolean;
};
/**
* { a: string; } & { b: number; } & { c: boolean; }
*/ //이렇게 보임
type Intersected = Prettify<
{
a: string;
} & {
b: number;
} & {
c: boolean;
}
>;
/**
* {
* a: string;
* b: number;
* c: boolean;
* }
*/ //묶여서 보임Reduce 함수를 사용할 때 3가지 type 정의방법
-
ref) https://www.totaltypescript.com/how-to-type-array-reduce
-
주로 3번을 사용하지만, 3가지 방법모두 한번 봐두면 나쁠건 없다.
- initial Value를 as로 선언
const grouped = array.reduce((obj, item) => {
obj[item.key] = item.value;
return obj;
}, {} as Record<string, string>);- 파라미터 자체의 TYPE ANNOTATION 선언
const grouped = array.reduce(
(obj: Record<string, string>, item) => {
obj[item.key] = item.value;
return obj;
},
{}
);- 제너릭 TYPE 넘겨주기
const grouped = array.reduce<Record<string, string>>(
(obj, item) => {
obj[item.key] = item.value;
return obj;
},
{}
);
0개의 댓글
