Typescript optional function truthy check

Typescript optional function truthy check

Questions : Typescript optional function truthy check

2389

I think I’m missing something basic on how in4codes_optional-parameters you can check for a truthy value with in4codes_optional-parameters && in Typescript.

Why can props.function still be undefined in in4codes_optional-parameters test1 and has to be checked like I did in in4codes_optional-parameters test2.

import React from "react"; interface PropsModel { label?: string function?: Function, } function test1(props: PropsModel) { return ( <div> {props.label && <p>{props.label}</p>} // props.label is checked for undefined {props.function && <button onClick={() => props.function()}>Dummy button</button>} // props.function is not checked for undefined </div> ) } function test2(props: PropsModel) { return ( <div> {props.label && <p>{props.label}</p>} // props.label is checked for undefined {props.function && <button onClick={() => {if (props.function) props.function()}}>Dummy button</button>} // props.function is checked for undefined </div> ) } 

EDIT 1: Added Link to playground

Link to Typescript playground

Total Answers 2
25

Answers 1 : of Typescript optional function truthy check

I am by no means an expert on this in4codes_optional-parameters matter of TS as I too have wondered in4codes_optional-parameters this. My assumption so far is to do with in4codes_optional-parameters the level of “scope”. Aka the onClick in4codes_optional-parameters function is of a different scope to your in4codes_optional-parameters Component. If you’re 100% sure that the in4codes_optional-parameters function will exist within the OnClick in4codes_optional-parameters you can do either of the below.

import React from "react"; export type Function = () => void; export type Input = { label?: string; function?: Function; } function test1(props: Input) { return ( <div> {props.label && <p>{props.label}</p>} // props.label is checked for undefined {props.function && <button onClick={() => (props.function as Function)()}>Dummy button</button>} // props.function is not checked for undefined </div> ) } 

or simply

import React from "react"; interface PropsModel { label?: string function?: Function, } function test1(props: PropsModel) { return ( <div> {props.label && <p>{props.label}</p>} // props.label is checked for undefined {props.function && <button onClick={() => props.function!()}>Dummy button</button>} // props.function is not checked for undefined </div> ) } 

A ! has been added to the in4codes_optional-parameters {props.function && <button in4codes_optional-parameters onClick={() => in4codes_optional-parameters props.function!()}>Dummy in4codes_optional-parameters button</button>} line here. ! in4codes_optional-parameters simply tells TS that you are 100% sure in4codes_optional-parameters that the optional type will definitely in4codes_optional-parameters exist at this point.

0

1

Answers 2 : of Typescript optional function truthy check

Your function property is optional. in4codes_optional-parameters hence to use such property we must use in4codes_optional-parameters optional chaining.

What you need to do is

function test1(props: PropsModel) { return ( <div> {props.label && <p>{props.label}</p>} {props.function && <button onClick={() => props.function?.()}>Dummy button</button>} // props.function is checked for undefined then it will be called </div> ) } 

Note that to use optional chaining your in4codes_optional-parameters typescript version must be typescript in4codes_optional-parameters >= 3.7

0

Answer Link
jidam
  • Unable to run NoraUI mvn verify goal
  • Unable to run my app on emulator in VS Code
  • Unable to run multiple instances of libVLC(MobileVLCKit) in IOS via flutter framework
  • Unable to run make on griddb source on ubuntu 20.04 (building from source)
  • Unable to run latexindent macOS Monterey 12.0.1
  • Unable to run kotlinc-native command
  • Unable to run JUnit Test… Java.lang.ExceptionInInitializerError (Android Studio)
  • Unable to run java with -Xmx > 966m
  • Unable to run ionic cap run android from wsl2 inorder to start android emulator
  • Unable to run Intel HAXM installer: Cannot start process, the working directory does not exist
  • fs
  • Unable to run Google Analytics sample code
  • unable to run flutter run after upgarding to flutter 2.8.0 from 2.5.3
  • Unable to run Django with PostgreSQL in Docker
  • Unable to Run Container Using testcontainers
  • Unable to run ClojureScript Hello World program, Error building classpath. Error reading edn.
  • unable to run client command for apache karaf 4.3.3 through remote server
  • Unable to run c program 2nd time using eclipse
  • unable to run c++ in visual studio code on m1 chipset
  • Unable to run Android Instrumented Tests
  • Unable to run adb, check your Android SDK installation and ANDROID_SDK_ROOT environment variable: …AndroidSdkplatform-toolsadb.exe
  • Unable to run a singlespecific .spec.ts file through angular cli using ng test –include option
  • Unable to run a Mango query
  • Unable to return response back to view in laravel from package
  • Unable to return object reference in std::optional
  • Unable to return NULL in a function that expects an integer return type
  • Unable to return correct change in JavaScript Cash Register
  • Unable to retrieve version information from Elasticsearch nodes. Request timed out
  • Unable to retrieve values from Axios Response data
  • Unable to retrieve dotenv JWT secret Error: secretOrPrivateKey must have a value
  • Unable to resolve your shell environment
  • Unable to resolve token for FCM while implementing Push notification for Xamarin
  • Unable to resolve the request yii
  • Unable to resolve service for type Swashbuckle.AspNetCore.Swagger.ISwaggerProvider
  • Unable to resolve service for type Microsoft.EntityFrameworkCore.Diagnostics.IDiagnosticsLogger