Parameter cannot have question mark and initializer in TS

avatar

Borislav Hadzhiev

Last updated: Mar 13, 2022

banner

Photo from Unsplash

Parameter cannot have question mark and initializer in TS #

To solve the "Parameter cannot have question mark and initializer" error in TypeScript, don't use a question mark to set parameters to optional when using an equal sign to provide a default value. Parameters with default values are implied to be optional.

Here is an example of how the error occurs.

index.ts
// ⛔️ Error: Parameter cannot have question mark // and initializer.ts(1015) function sum(a: number, b? = 10) { return a + b; }

The issue is - we are providing a default value for a parameter and marking it as optional, which is implied.

To solve the error, remove the question mark next to the parameter's name.

index.ts
function sum(a: number, b = 10) { return a + b; } console.log(sum(5)); // 👉️ 15 console.log(sum(5, 5)); // 👉️ 10 // ✅ With object parameter function getPerson( { name = 'Tom', age }: { name?: string; age: number } ) { return { name, age }; } console.log(getPerson({ age: 30 }));

The parameter b has a default value of 10. TypeScript already knows that the parameter is optional because we've provided an initializer.

If the sum function is invoked without a value for the b parameter, it gets assigned the default value of 10.

Notice that we also don't have to specify the type for the b parameter - TypeScript can infer it based on the type of the provided default value.

If you need to mark a parameter as optional without providing a default value, use a question mark.

index.ts
function sum(a: number, b?: number) { // 👉️ b is number or undefined here if (b !== undefined) { return a + b; } return a + a; } console.log(sum(5)); // 👉️ 10 console.log(sum(5, 5)); // 👉️ 10

We marked the b parameter as optional. This means that it could either be a number or have a value of undefined in the function's body.

Note that a required parameter cannot follow an optional parameter, so you should also declare optional parameters as last.

index.ts
// ⛔️ Error: A required parameter cannot // follow an optional parameter.ts(1016) function sum(a?: number, b: number) { // 👉️ b is number or undefined here if (b !== undefined) { return a + b; } return a + a; }

On the other hand, you could have an optional parameter at the beginning of a function's parameter list.

index.ts
function sum(a = 10, b: number) { return a + b; } console.log(sum(undefined, 10)); // 👉️ 20 console.log(sum(15, 10)); // 👉️ 25

If you want to use the default value of a default parameter that's at the beginning of the function's parameter list, pass an undefined value for it.

If you have an object parameter and use default values, you have to mark the properties as optional in the type declaration.

index.ts
// ✅ With object parameter function getPerson( { name = 'Tom', age }: { name?: string; age: number } ) { return { name, age }; } console.log(getPerson({ age: 30 }));

Note that even though we provided a default value for the name property, we still had to mark it as optional when typing the object.

If you want to set a default value for an entire object, you can type the object and provide a default value after.

index.ts
function sum({ a, b }: { a: number; b: number } = { a: 10, b: 5 }) { return a + b; } console.log(sum()); // 👉️ 15

Notice that we provided a default value for the object parameter as a whole and not for each property.

When providing a default value for the object parameter, you should do it by using an equal sign = right after the parameter's type.

Conclusion #

To solve the "Parameter cannot have question mark and initializer" error in TypeScript, don't use a question mark to set parameters to optional when using an equal sign to provide a default value. Parameters with default values are implied to be optional.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.