[Typescript] Use Function Overloads to Avoid Returning undefined
typescript to Function use undefined avoid
2023-09-14 08:59:11 时间
// You'll need to use function overloads to figure this out!
function useData<T>(params: { fetchData: () => Promise<T>; initialData?: T }): {
getData: () => T | undefined;
} {
let data = params.initialData;
params.fetchData().then((d) => {
data = d;
});
return {
getData: () => data,
};
}
When we calling the function like this:
const numData = useData({
fetchData: () => Promise.resolve(1),
});
const data = numData.getData();
// ^? number | undefined
And:
const numData = useData({
fetchData: () => Promise.resolve(1),
initialData: 2,
});
const data = numData.getData();
// ^? number | undefined
In fact, in second code example, the return data won't be undefined, because we pass in initialData
. We need to find a way to make type better
Solution:
Two cases:
1. Without initialData
, should return T | undefined
2. With initialData
, should return T
function useData<T>(params: { fetchData: () => Promise<T>;}): {
getData: () => T | undefined;
};
function useData<T>(params: { fetchData: () => Promise<T>; initialData: T }): {
getData: () => T;
};
function useData<T>(params: { fetchData: () => Promise<T>; initialData?: T }): {
getData: () => T | undefined;
} {
let data = params.initialData;
params.fetchData().then((d) => {
data = d;
});
return {
getData: () => data,
};
}
相关文章
- [Typescript] Using Generic Context to Avoid Distributivity in Conditional Types
- [Typescript] 124. Binary to Decimal
- [Typescript] noImplicitOverride
- [Typescript] 108. Easy - Nullable
- [Typescript] 91. Hard - Union to Intersection
- [Typescript + React] Tips: Write your own 'PropsFrom' helper to extract props from any React component
- [Typescript] 34. Medium - String to Union
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [Typescript] Prevent Type Widening of Object Literals with TypeScript's const Assertions
- [Typescript] Extend Functionality of a TypeScript Class with Decorators
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers
- [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [TypeScript] Understand lookup types in TypeScript
- [TypeScript ] What Happens to Compiled Interfaces
- [Typescript] Write clean Type 3 - make a wrapper to cleanup generic usages
- [Typescript] Identity function pattern - Using Identity function to enforce the type 01
- [Typescript] Use Function Overloads to Avoid Returning undefined
- [Typescript] 139. Extreme - Slice
- [Typescript] 136. Medium - Object to Union
- [Typescript] 72. Medium - IndexOf
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [Typescript] Extend Functionality of a TypeScript Class with Decorators
- [TypeScript] Use the TypeScript "unknown" type to avoid runtime errors
- [TypeScript] Using Assertion to Convert Types in TypeScript
- [TypeScript] Using Interfaces to Describe Types in TypeScript
- ng serve出错,关于TypeScript的版本问题