What is the question mark for in a Typescript parameter name
TypescriptTypescript Problem Overview
export class Thread {
id: string;
lastMessage: Message;
name: string;
avatarSrc: string;
constructor(id?: string,
name?: string,
avatarSrc?: string) {
this.id = id || uuid();
this.name = name;
this.avatarSrc = avatarSrc;
}
}
In id?
what's the ?
for?
Typescript Solutions
Solution 1 - Typescript
It is to mark the parameter as optional.
- TypeScript handbook https://www.typescriptlang.org/docs/handbook/2/functions.html#optional-parameters
- TypeScript Deep Dive https://basarat.gitbook.io/typescript/type-system/functions#optional-parameters
Solution 2 - Typescript
This is to make the variable of Optional type. Otherwise declared variables shows "undefined" if this variable is not used.
export interface ISearchResult {
title: string;
listTitle:string;
entityName?: string,
lookupName?:string,
lookupId?:string
}
Solution 3 - Typescript
parameter?: type
is a shorthand for parameter: type | undefined
So what is the difference? Question mark means "optional".
More precisely parameter?: type
is equal parameter: type | undefined = undefined
Solution 4 - Typescript
The ?
in the parameters is to denote an optional parameter. The Typescript compiler does not require this parameter to be filled in. See the code example below for more details:
// baz: number | undefined means: the second argument baz can be a number or undefined
// = undefined, is default parameter syntax,
// if the parameter is not filled in it will default to undefined
// Although default JS behaviour is to set every non filled in argument to undefined
// we need this default argument so that the typescript compiler
// doesn't require the second argument to be filled in
function fn1 (bar: string, baz: number | undefined = undefined) {
// do stuff
}
// All the above code can be simplified using the ? operator after the parameter
// In other words fn1 and fn2 are equivalent in behaviour
function fn2 (bar: string, baz?: number) {
// do stuff
}
fn2('foo', 3); // works
fn2('foo'); // works
fn2();
// Compile time error: Expected 1-2 arguments, but got 0
// An argument for 'bar' was not provided.
fn1('foo', 3); // works
fn1('foo'); // works
fn1();
// Compile time error: Expected 1-2 arguments, but got 0
// An argument for 'bar' was not provided.