Search⌘ K
AI Features
Home
Courses
Unleashing the Power of TypeScript

A Compromised Solution: Tell the Truth

Explore how to handle nullable types in React’s Context API with TypeScript by defining context values as unions including undefined or null. Learn to implement optional chaining to safely access context state in components, understand the impact on code maintenance, and why explicit null checks become necessary when integrating TypeScript with React context.

We'll cover the following...

Defining possible types

Another option is to tell the truth. The value of the context can either be ColorState or undefined:

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABvUlEQVQ4EYVTP0gCYRR/apqEgyAmTo2BuriJa2KEuDkWHjgoQiAiCEGIeKNDW7OgOTQ1iYOgTYZLkw4mQiS4hIZ4DqGv9x1+ot6dPXi8v78f773vTgfqYqH0Fek5qYH0i7S+tmQOiMFguE4kEt/tdhtnsxlKkoS9Xg8LhcKv0+l8JOiJJtxoNEYrlQpqyXA4RK/X+0oEx2oktlQq9aMF5vlut4sWi+VejeB2MBjwPtm2Wi2Mx+OyPxqNMBwO43w+x2g0+qkgcLvdTztoCtLpNOr1elwul1itVpFAyG6Tz+eZL99Cz5kcDoeN+9wGg0GIRCJAJODz+cDv94PL5QI6NCPYYOX+QCBQ359AKxZFcUUg9tR7LDIVwHQ6hVwuB+PxeJ1Rmlgs9kFrv+yOse6zWq2QTCahVCpBJpOBZrOpYCgWi6d2u/1MlYB1000gm83Ku08mEwUB3eeNiG+OeEVHwn1ma7UaNBoN8Hg8IAjCdgnoVXSdTueCkhIvmGjkkdbR9vOhUOidA2VLu4j9fn+/TzUul8vsBS43BGazWaCPZLVYLPA/pZ2RfqiHDZgctvcdqWk7ecDvUe2ZlE0hyx+9KYQbF5YkUgAAAABJRU5ErkJggg==
Setting the context value as ColorState or undefined

In the code above:

  • Line 14: We update the React context ColorContext to specify the type as a union of ColorState and null. This is a cleaner and more straightforward way to represent that the context may have a value of type ColorState or null.

This feels better, but it will cause a different set of problems:

Errors  Files
     1  src/components/color-change-swatch.tsx:13
     2  src/components/color-picker/color-select.tsx:11
     1  src/components/color-picker/color-swatch.tsx:6
     1  src/components/color-properties/to-cmyk.tsx:8
     1  src/components/color-properties/to-hsl.tsx:8
     1  src/components/color-properties/to-hsv.tsx:8
     1  src/components/color-properties/to-rgb.tsx:8
     1  src/components/related-colors/index.tsx:11

The issue is now that TypeScript isn’t sure if we’re working with ColorState or undefined. And now we need to check every time we use it.

ColorState can now be undefined
ColorState can now be undefined

So it’s now on us to check to see if it’s defined or not every time we use it. Here’s one example from the ColorChangeSwatch component:

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABvUlEQVQ4EYVTP0gCYRR/apqEgyAmTo2BuriJa2KEuDkWHjgoQiAiCEGIeKNDW7OgOTQ1iYOgTYZLkw4mQiS4hIZ4DqGv9x1+ot6dPXi8v78f773vTgfqYqH0Fek5qYH0i7S+tmQOiMFguE4kEt/tdhtnsxlKkoS9Xg8LhcKv0+l8JOiJJtxoNEYrlQpqyXA4RK/X+0oEx2oktlQq9aMF5vlut4sWi+VejeB2MBjwPtm2Wi2Mx+OyPxqNMBwO43w+x2g0+qkgcLvdTztoCtLpNOr1elwul1itVpFAyG6Tz+eZL99Cz5kcDoeN+9wGg0GIRCJAJODz+cDv94PL5QI6NCPYYOX+QCBQ359AKxZFcUUg9tR7LDIVwHQ6hVwuB+PxeJ1Rmlgs9kFrv+yOse6zWq2QTCahVCpBJpOBZrOpYCgWi6d2u/1MlYB1000gm83Ku08mEwUB3eeNiG+OeEVHwn1ma7UaNBoN8Hg8IAjCdgnoVXSdTueCkhIvmGjkkdbR9vOhUOidA2VLu4j9fn+/TzUul8vsBS43BGazWaCPZLVYLPA/pZ2RfqiHDZgctvcdqWk7ecDvUe2ZlE0hyx+9KYQbF5YkUgAAAABJRU5ErkJggg==
The complete solution

Let’s understand what is happening in the code above. It involves changing nine more files, and this isn’t even that big an application.

In the src/components/color-change-swatch.tsx ...