1

I hava function below:

const fetchList = ({ current = 1, pageSize = 10 } = {}) => {/*...*/}
fetchList() // invoke

In Typescript, I want make it typed, the only way I can do it like this:

const fetchList=({current = 1, pageSize = 10}?: {current?: number; pageSize?: number} = {}) => {/*...*/}
fetchList() // invoke

But I wannt make the function type declaration alone like this so it can be reused, then the function declaration get error::

type FetchListType = ({ current, pageSize }?: { current?: number; pageSize?: number }) => void
const fetchList: FetchListType = ({ current = 1, pageSize = 10 } = {}) => {/*...*/}

TypeScript Error


If I fix this problem, I should trans the function type declaration like this, make the object parameter not optional

type FetchListType = ({ current, pageSize }: { current?: number; pageSize?: number }) => void

This result I should invoke fetchList with empty object:

fetchList({}) // should have a parameter

The question is: How to declare the function type that can make me invoke the function without parameter?

2 Answers 2

1

First of all the original implementation does not compile in TS 3.7.2

const fetchList=({current = 1, pageSize = 10}?: {current?: number; pageSize?: number} = {}) => {/*...*/} 
// Error - Parameter cannot have question mark and initializer

Lets, focus on the problem you want to solve. I was trying to fix your problem on meta level, but I got to the point where I think that its a different level of issue. As if your function can be called without argument, then doing destructuring at this level is wrong, it is tipical code error. We cannot destructure something which can be not passed. So TS is doing a good job here.

FetchListType function type allows on calling the function with no arguments, and this is also what you want. So your first type is correct:

type FetchListType = ({ current, pageSize }?: { current?: number; pageSize?: number }) => void

It defines that or there will be no arguments or will be one with the given structure. Great! Now to the problem:

const fetchList: FetchListType = ({ current = 1, pageSize = 10 } = {}) => {/*...*/}

Above is function has wrong implementation of the FetchListType, the implementation assumes argument to be there, but the type does not guarantee that. Type is correct, it fulfills the need to have a function which has optional argument. Now we need to just add correct implementation, so such which deal with optional nature of the argument:

type FetchListType = ({ current, pageSize }?: { current?: number; pageSize?: number }) => void
const fetchList: FetchListType = (arg) => {
  if (arg) {
    arg // here arg is { current?: number; pageSize?: number }
  } else {
    // here arg is undefined
  }
}

// also correct implementation which has default value of the argument:
const fetchList: FetchListType = (arg = { current: 1, pageSize: 10 }) => {
  console.log(arg); // if arg will not be passed it will be { current: 1, pageSize: 10 }
}


In summary. We cannot write implementation which has stronger assumption then the type has. Type allows on no arguments, implementation needs to deal with that.

Sign up to request clarification or add additional context in comments.

Comments

0

The way I solve the problem is like that:

type FetchListType = (search?: { current?: number; pageSize?: number }) => void
const fetchList: FetchListType = (search = {}) => {
  const {current, pageSize} = {current: 1, pageSize: 10, ...search}
  /*...*/
}
fetchList()

2020/07/06 append another way

type FetchListType = ({ current, pageSize }?: { current?: number; pageSize?: number }) => void
const fetchList: FetchListType = ({ current = 1, pageSize = 10 } = {current: 1, pageSize: 10}) => {/*...*/}

2022/04/10 the problem was fixed in v3.9.7

type FetchListType = ({ current, pageSize }?: { current?: number; pageSize?: number }) => void
const fetchList: FetchListType = ({ current = 1, pageSize = 10 } = {}) => {/*...*/}
fetchList()

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.