Today i found out : optional typescript function props

While writing a custom table component for react i ran into an interesting issue .

The table takes in props like and array of objects that define the header and column of the table and an array of objects for the rows , with those props the component is able to render a table .

But the point of writing a custom table is to add features not available in a regular html table , so i needed to pass in functions to handle the editing which are optional since they'd only need to be used when the table is in edit mode

Normally in typescript when you have a possibly undefined variable yon can use

typescript

1interface Types{
2person?:{name: string , age: number}
3}
4
5
6const age = person?.age

This helps you avoid the cannot access .age of undefined error that normally breaks your code. This implementation won't try to access the variable if it's undefined

Something like that exists for functions enabling you to have possibly undefined functions without the function cannot be undefined error

typescript

1interface Types{
2person?:{name: string , age: number}
3
4sayHello?:(name: string)=>void
5}
6// Then execute the function like this
7
8sayHello.?(person?.name)

check out the table at repo

Today i found out : optional typescript function props

Understanding Discriminated Unions in TypeScript

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Today i found out : optional typescript function props

Understanding Discriminated Unions in TypeScript

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

More posts

Understanding Discriminated Unions in TypeScript

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

More posts

Understanding Discriminated Unions in TypeScript

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action