2 replies

How to avoid optional chaining in TS?

Hey there,

I can't remember the recommended pattern for this and I actually feel like Theo covered it once in a video but:

How do we avoid an optional chaining scenario and implement clean optional/interchangeable interfaces.

For example:

interface Tab {
    name: string;
    type: 'projects' | 'todos' | 'about';
    data: {
            id?: string;
            name: string;
            url?: string;
          }
  }

interface Tab {
    name: string;
    type: 'projects' | 'todos' | 'about';
    data: {
            id?: string;
            name: string;
            url?: string;
          }
  }

Here we have this type for a Tab on a web app, the tab could be of various possible types and each type has it's own possible 'data' inside it. For example, data.id makes sense for projects and todos but not about, maybe 'name' applies to all three but then url only applies to about. Instead of defining all possible options inside the data type (and using nullish options) AND ALSO avoiding this situation:

interface ProjectsDataType

interface ProjectsDataType

and

interface TodosDataType

interface TodosDataType

and doing

data: ProjectsDataType | TodosDataType

data: ProjectsDataType | TodosDataType

etc.

Is there a better way to optionally refer to a bunch of possible data interfaces? Or is optional chaining the way to do this? I'm aware of doing things like

data: T

data: T

and essentially specifying the data type everytime you call on the interface with Tab<T> but I feel like there's a slightly better situation here?

Help pls!

TTC

Theo's Typesafe Cult•7mo ago•

2 replies

James Hopgood

How to avoid optional chaining in TS?

interface Tab {
    name: string;
    type: 'projects' | 'todos' | 'about';
    data: {
            id?: string;
            name: string;
            url?: string;
          }
  }

interface Tab {
    name: string;
    type: 'projects' | 'todos' | 'about';
    data: {
            id?: string;
            name: string;
            url?: string;
          }
  }

interface ProjectsDataType

interface ProjectsDataType

and

interface TodosDataType

interface TodosDataType

and doing

data: ProjectsDataType | TodosDataType

data: ProjectsDataType | TodosDataType

etc.

Is there a better way to optionally refer to a bunch of possible data interfaces? Or is optional chaining the way to do this? I'm aware of doing things like

data: T

data: T

and essentially specifying the data type everytime you call on the interface with Tab<T> but I feel like there's a slightly better situation here?

Help pls!

How to avoid optional chaining in TS?

Similar Threads

How to avoid optional chaining in TS?

Similar Threads

Similar Threads

Similar Threads