Validate an array of strings using Typescript custom type

Question

Validate an array of strings using Typescript custom type

Recently, I attempted to verify whether a variable is a custom type made up of different strings. I came across this helpful post Typescript: Check "typeof" against custom type that explains how to create a validator for this specific type.

const fruit = ["apple", "banana", "grape"];
export type Fruit = (typeof fruit)[number];
const isFruit = (x: any): x is Fruit => fruit.includes(x);

One part I'm struggling to understand is this instruction:

(typeof fruit)[number]

Can someone explain how this works? I know that typeof is Typescript's query type, but the [number] part is confusing to me. It's meant to "define your Fruit type in terms of an existing array of literal values."

typescript

Answer 1

Answer №1

Upon examining the type for typeof fruit, you will find:

type AllFruit = ['apple', 'banana', 'grape'];

.

If you wish to achieve this result, you may have to designate the array as readonly (e.g.
const fruit = <const>['apple', 'banana', 'grape'];
).

This type can be indexed as follows:

type Apple = AllFruit[0]; // 'apple'
type Grape = AllFruit[2]; // 'grape'

type AppleGrape = AllFruit[0 | 2]; // 'apple' | 'grape'

Therefore, the [number] essentially indexes every value in the array:

type Fruit = typeof fruit[0 | 1 | 2]; // 'apple' | 'banana' | 'grape'
type Fruit = typeof fruit[number]; // 'apple' | 'banana' | 'grape'

I hope this explanation is helpful.

Answer 2

Upon examining the type for typeof fruit, you will find:

type AllFruit = ['apple', 'banana', 'grape'];

.

If you wish to achieve this result, you may have to designate the array as readonly (e.g.
const fruit = <const>['apple', 'banana', 'grape'];
).

This type can be indexed as follows:

type Apple = AllFruit[0]; // 'apple'
type Grape = AllFruit[2]; // 'grape'

type AppleGrape = AllFruit[0 | 2]; // 'apple' | 'grape'

Therefore, the [number] essentially indexes every value in the array:

type Fruit = typeof fruit[0 | 1 | 2]; // 'apple' | 'banana' | 'grape'
type Fruit = typeof fruit[number]; // 'apple' | 'banana' | 'grape'

I hope this explanation is helpful.

Validate an array of strings using Typescript custom type

Answer №1

Similar questions

Exploring the functionalities of TypeScript's mapKey and pick features

The sticky navbar fails to stay in place when the content becomes too lengthy

What steps should I take to address the numerous errors I am encountering in Atom using the Atom linter tool?

Tips for splitting JSON objects into individual arrays in React

How can I invoke a TypeScript function within HTML code?

Issue with implementing MUI Style Tag in conjunction with styled-components and Typescript

Combine two arrays into one

The functionality of MaterializeCSS modals seems to be experiencing issues within an Angular2 (webpack) application

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Having trouble retrieving the "history" from props?

Unable to generate paths in Ionic 3

Is Angular2 detecting changes based on value equivalence or reference equality?

Exploring the contrast between string enums and string literal types in TypeScript

Navigating resolvedUrl with getServerSideProps in the newest version of NextJS - a comprehensive guide

An issue with the Pipe searchByType is resulting in an error stating that the property 'type' is not found on the type 'unknown'

How to process response in React using Typescript and Axios?

Click to Rotate Angular Chevron

Angular2 - receiving an error message stating that this.router.navigate does not exist as a

Using TypeScript to extract types from properties with specific types

Tips for customizing standard data types in TypeScript