Type definition for functions in Typescript

Question

In a recent coding situation, I found out that (A)onPress?(): void is a valid alternative for (B) onPress?: () => void. I do prefer B over A, because it looks like it's more common in the TypeScript community and because of the consistency of defining your prop name, ? if necessary for optional props, separated by a : and then your type.

My question is: is there any documentation why A is also correct, or in which way it's different from B? Or is it just the same? Or is one of both more preferred?

Thanks in advance!

type Props = {
   onPress?(): void
}

type OtherProps = {
   onPress?: () => void
}

const instanceOfProps: Props = {
    onPress: () => {}
}

const instanceOfOtherProps: OtherProps = {
    onPress: () => {}
}

Nicky McCurdy · Accepted Answer · 2022-07-13 15:15:57Z

1

A is just syntax sugar for B in this case. I believe it's based on ES6 object initializers, which support using onPress() {...} for a function value. However since you're creating a type, TypeScript is only concerned with types and not implementations, so {...} is replaced with : type.

Personally I prefer A, as it's shorter, more consistent with ES6, and looks more like a property type in TypeScript.

answered Jul 13, 2022 at 15:15

Nicky McCurdy

19.8k5 gold badges63 silver badges91 bronze badges

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

Collectives™ on Stack Overflow

Type definition for functions in Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related