[Typescript 5.0] const Type Parameters with readonly
typescript with type const 5.0 parameters readonly
2023-09-14 08:59:11 时间
In the example code:
type HasNames = { names: readonly string[] };
function getNamesExactly<T extends HasNames>(arg: T): T["names"] {
return arg.names;
}
// Inferred type: string[]
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"]}) ;
Before TS 5.0, names
is string[].
There was a way to handle in this case as const
// Correctly gets what we wanted:
// readonly ["Alice", "Bob", "Eve"]
const names2 = getNamesExactly({ names: ["Alice", "Bob", "Eve"]} as const);
with as const
, we need to make sure it is {names: readonly string[]}
instead of {readonly names: string[]}
, the string[]
has to ben readonly
, in order to infer the string literl type.
Typescript 5.0
We can use const
in generic type, to acheive the effect as as const
.
<const T extends HasNames>
type HasNames = { names: readonly string[] }; //readonly here is important
function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
return arg.names;
}
// Correctly gets what we wanted:
// readonly ["Alice", "Bob", "Eve"]
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"]}) ;
const Type parameters has to be used within the function call
Works
declare function fnGood<const T extends readonly string[]>(args: T): void;
// T is readonly ["a", "b", "c"]
fnGood(["a", "b" ,"c"]);
Not working
declare function fnGood<const T extends readonly string[]>(args: T): void;
const arr = ["a", "b" ,"c"]
// T is string[]
fnGood(arr);
---
Another example;
const routes = <const T extends string>(routes: T[]) => {
const addRedirect = (from: T, to: T) => {}
return {
addRedirect
}
}
const router = routes(["/users", "/posts", "/admin/users"])
router.addRedirect("/admin/users", "wef") // error: Argument of type '"wef"' is not assignable to parameter of type '"/users" | "/posts" | "/admin/users"'.
相关文章
- [Typescript] Get full type safe for discriminatedUnion type with 'type' & 'subtype' (2 levels)
- [Typescript] Making TypeScript Stick - 6 - infer, build a ConstructorArg Type
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [Typescript] Prevent Type Widening of Object Literals with TypeScript's const Assertions
- [Typescript] Statically Type Unknown Values with TypeScript's unknown Type
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [TypeScript] Increase TypeScript's type safety with noImplicitAny
- [Typescript] Creating a Dynamic Function with Variable Arguments
- [Typescript] Typing Class method with this keyword
- [Typescript 5.0] const Type Parameters with readonly
- [Typescript] Prevent Type Widening of Object Literals with TypeScript's const Assertions
- [Typescript] Narrow the unknown Type with TypeScript's Assertion Functions
- [Typescript] Make your optional fields required in TypeScript
- [TypeScript ] Using the Null Coalescing operator with TypeScript 3.7
- [Tools] Unlock TypeScript's Features in Vanilla JS with @ts-check and JSDoc
- [Typescript] Make TypeScript Class Usage Safer with Strict Property Initialization
- [Typescript] Improve Readability with TypeScript Numeric Separators when working with Large Numbers
- [Vue + TS] Create your own Decorators in Vue with TypeScript
- [TypeScript] Use the never type to avoid code with dead ends using TypeScript
- reactjs typescript数据传递