I came across the following TypeScript code snippet:
class Foo {
start?(): void {}
}
What caught my attention was the ? at the end of start.
It appears to be making the function optional (but how can a function be optional and when would you need that?), as now I have to call it like this:
const x = new Test();
x.start!();
Notice the ! after start.
So, my question is, what exactly is the purpose of that question mark in this context?
It is possible for the property to be optional, containing a function as its value if it is set.
This can be essentially expressed in shorthand as:
{
start: (() => void) | undefined
}
This indicates that the start property may or may not have a function assigned to it. Therefore, when calling this function, you need to account for the scenario where it does not exist:
if (foo.start) {
foo.start()
}
Alternatively, you can utilize the optional chaining operator, which is the opposite of the optional property operator:
foo.start?.()
It is recommended to avoid using the ! postfix operator in most cases, as it compels TypeScript to allow potentially unsafe operations. If the property truly is undefined, forcibly invoking it could lead to a runtime error.
Here is a more comprehensive example:
class Foo {
start?(): void
constructor(isStartable: boolean) {
if (isStartable) {
this.start = () => console.log('starting!')
}
}
}
const nonStartable = new Foo(false)
// The start method will not be invoked.
if (nonStartable.start) nonStartable.start()
const startable = new Foo(true)
// The start method will be called.
if (startable.start) startable.start()
// Running this code will log "starting!" exactly once.
I am attempting to enhance the functionality of the moment.js library by adding a new function that requires a moment() call within its body. Unfortunately, I am struggling to achieve this. Using the latest version of Typescript and moment.js, I have sear ...
As TypeScript 4.1 was released, many developers have been exploring ways to strictly type strings with predetermined patterns. I recently found a good solution for date strings, but now I'm tackling the challenge of Hex color codes. The simple approa ...
Updated. I made changes to the code but I am still encountering the following error: Error Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. It is recom ...
Running Angular version 7.0.0 will generate a folder structure typical for "ng new". Below is the content of my styles.less file: @personal-black: #0000; This snippet shows the content of my app.component.less file: ...
Hey, I'm having an issue with searchParams. The problem is that when I apply filters like "Breakfast, Lunch, Dinner", the first chosen option isn't showing up in the URL bar. For example, if I choose breakfast nothing happens, but if I choose lun ...
Currently, I am looking to convert this JavaScript script into TypeScript. However, I require the syntax for watchers. export default { props: ['branch_id'], watch: {} } ...
I have a webpage with a useForm hook implemented, featuring a multi-step form split into separate components. Here's an example: export default function create(){ const form = useForm({ name: '', content: &ap ...
While building my app in react-native, I encountered some issues with setting up the navigation. I referred to the react-native documentation for guidance, specifically this navigation guide. The guide mentioned passing an object named "navigation" to your ...
I'm currently in the process of transitioning a Meteor application from TypeScript to Javascript. While working on the server side, I've encountered some issues with the import/export code that functioned smoothly in TypeScript but now seems to b ...
Trying to incorporate an ES6 generator into Express JS using TypeScript has been a bit of a challenge. After implementing the code snippet below, I noticed that the response does not get sent back as expected. I'm left wondering what could be missing: ...
Currently, I am facing an issue with a third-party library that provides global functions similar to jQuery ($ .functionName()), but unfortunately there is no definition file available. Due to this, my attempt to write my own file has been unsuccessful as ...
The issue at hand is: [11:16:06] TypeScript: 103 semantic errors [11:16:06] TypeScript: emit succeeded (with errors) I am currently using node v5.7.0 and npm 3.6.0 gulp -v: [11:26:58] Requiring external module babel-register [11:26:58] CLI version 3.9 ...
Currently, I am developing an Angular application that includes a matInput field for user input. The issue I am encountering is that when the user enters a positive or negative value in the field (e.g. +5 or -5), the final output does not reflect the inten ...
Looking to halt Posenet after completing app task private sketch(p: any) { p.setup = () => { this.poseNet = ml5.poseNet(p.createCapture(p.VIDEO), { outputStride: 8 }); this.poseNet.on(&apos ...
I have the following example: class Relative { constructor(public fullName : string) { } greet() { return "Hello, my name is " + fullName; } } let relative : Relative = new Relative("John"); console.log(relative.greet()); Under certain circum ...
Is there a way to dynamically load a Javascript language bundle file in Typescript based on the current language without using static methods? I want to avoid having to use comments like this for each bundle: /// <amd-dependency path="<path_to_bund ...
Looking for a way to combine two separate enums into one for easier use. export enum ActionTypes1 { ClearError = 'CLEAR_ERROR', PrependError = 'PREPEND_ERROR', } export enum ActionTypes2 { IncrementCounter = 'INCREMENT_COUNT ...
How can I retrieve the value of an enum object by passing the key in typescript? The switch case method works, but what if the enum object is too long? Is there a better way to achieve this? export enum AllGroup = { 'GROUP_AUS': 'A' &a ...
interface obj { bar: string } function randomFunction() { let foo: obj = { bar: "" } foo.bar = "hip" } let snack: obj = { bar: "" } snack.bar = "hop" Upon transcompiling, a warning from tslint pops up: Identifier 'foo' is never reassi ...
I'm attempting to generate dynamic fields based on my chosen attributes. I have two array objects called addAttributes and fakeAttributes. The fakeAttributes contain the details of the selected attributes. I have a dropdown select component that displ ...