[Typescript] Generics in Function Overloads
typescript in Function generics
2023-09-14 08:59:11 时间
Here's a function called returnWhatIPassInExceptFor1
:
function returnWhatIPassInExceptFor1(t: unknown): unknown {
if (t === 1) {
return 2;
}
return t;
}
When I pass in anything other than 1
, the function should return what I pass in (as the name suggests).
For example, if I pass in a
, b
, or c
, the function should return a
, b
, or c
respectively.
However, when I pass in 1
, the result should be of type 2
.
Solution:
function returnWhatIPassInExceptFor1(t: 1): 2;
function returnWhatIPassInExceptFor1<T>(t: T): T;
function returnWhatIPassInExceptFor1<T1, T2>(t: T1): T2;
function returnWhatIPassInExceptFor1(t: unknown): unknown {
if (t === 1) {
return 2;
}
return t;
}
So for the frist one:
function returnWhatIPassInExceptFor1(t: 1): 2;
it('Should return the type 2 when you pass in 1', () => {
const result = returnWhatIPassInExceptFor1(1);
type test1 = Expect<Equal<typeof result, 2>>;
});
For the second one:
function returnWhatIPassInExceptFor1<T>(t: T): T;
it('Otherwise, should return what you pass in', () => {
const a = returnWhatIPassInExceptFor1('a');
const b = returnWhatIPassInExceptFor1('b');
const c = returnWhatIPassInExceptFor1('c');
type tests = [
Expect<Equal<typeof a, 'a'>>,
Expect<Equal<typeof b, 'b'>>,
Expect<Equal<typeof c, 'c'>>
];
});
For the third one:
function returnWhatIPassInExceptFor1<T1, T2>(t: T1): T2;
it('Should accepts two generic slot, pass T1 return T2', () => {
const d = returnWhatIPassInExceptFor1<'a', 'd'>('a');
type tests = [Expect<Equal<typeof d, 'd'>>];
});
So function overload, it able to tell which overload to use when you give generic type returnWhatIPassInExceptFor1<'a', 'd'>
相关文章
- [Typescript] Write clean Type 1 - Generic slots, using built-in types as much as possible
- [Typescript] Generics in Type Arguments
- [Typescript] @typescript-eslint/unbound-method
- [Typescript] Zod in action
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [Typescript] Simplify iteration of custom data structures in TypeScript with iterators (backwards iteration with for ... of.. loop)
- [Typescript] Make your optional fields required in TypeScript
- [TypeScript] Type Definitions and Modules
- [TypeScript] Use the JavaScript “in” operator for automatic type inference in TypeScript
- [TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- [TypeScript] Distinguishing between types of Strings in TypeScript
- [TypeScript] Function Overloads in Typescript
- [Typescript] Prevent Type Widening of Object Literals with TypeScript's const Assertions
- [Typescript] Dynamic types: Use TypeScript's Mapped Types and Template Literal Types Together
- [Typescript] Configuration Inheritance with Extends
- [Typescript] Make your optional fields required in TypeScript
- [TypeScript] Deeply mark all the properties of a type as read-only in TypeScript
- [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS
- [TypeScript] Model Alternatives with Discriminated Union Types in TypeScript
- [TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript
- [TS] Implement a doubly linked list in TypeScript
- [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript
- [Typescript] Introduction to Generics in Typescript
- SAP Spartacus TypeScript和编译后的JavaScript命名规范
- 已解决FutureWarning: The default value of regex will change from True to False in a future version. In