Unleashing the Power of TypeScript/

...

/

A Compromised Solution: Tell the Truth

A Compromised Solution: Tell the Truth

Learn how to define all possible values of the context using union.

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.

Press + to interact
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 ...