Steps to declare a constant array in TypeScript

Question

Steps to declare a constant array in TypeScript

Here's My Code:

const WEEKDAYS_SHORT: string[] = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']

The TypeScript (3.0) compiler throws an error message:

TS2322: Type 'string[]' is not assignable to type '[string, string, string, string, string, string, string]'. Property '0' is missing in type 'string[]'.

https://i.sstatic.net/rhZWw.png

If I change the string[] to ReadonlyArray<string>, then the error message changes to:

TS2322: Type 'ReadonlyArray' is not assignable to type '[string, string, string, string, string, string, string]'. Property '0' is missing in type 'ReadonlyArray'.

Here's my tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "strict": true
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

How can I define a readonly array in TypeScript?

arrays typescript

Answer 1

Answer №1

Emphasize your array declaration by adding as const;

const readonlyArray = [1, 2, 3] as const;

It's easy to access the element type of a readonly array:

type Element = typeof readonlyArray[number]` // 1 | 2 | 3

The as const assertion can be used for any declarations, even objects and deeply nested data structures. You can also assert an expression as const. For instance, if the value 1 is inferred as a number, but you want to specify the number literal type, simply assert it as 1 as const. This feature was introduced in TypeScript version 3.4. Further information can be found in the documentation.

Note that a readonly or const array is often referred to as a tuple (similar to Python - see reference). Tuples may contain elements of the same type or different types. In the example above, the Element type is not inferred as number but as a union of number literals. This is because tuple elements are immutable. It's beneficial to infer the most specific type possible. For instance, you can use the number literal type 1 in place of a number, but not vice versa.

A pair with two elements is commonly known as a tuple and can be represented as a product. Although the product of [number, string] is not a number, their combination allows multiplication. Consider a simpler example like [1 | 2 | 3, 'a' | 'b' | 'c'], which expands to:

  [1, 'a']
| [1, 'b']
| [1, 'c']
| [2, 'a']
| [2, 'b']
| [2, 'c']
| [3, 'a']
| [3, 'b']
| [3, 'c']

For further exploration:

Answer 2

Emphasize your array declaration by adding as const;

const readonlyArray = [1, 2, 3] as const;

It's easy to access the element type of a readonly array:

type Element = typeof readonlyArray[number]` // 1 | 2 | 3

The as const assertion can be used for any declarations, even objects and deeply nested data structures. You can also assert an expression as const. For instance, if the value 1 is inferred as a number, but you want to specify the number literal type, simply assert it as 1 as const. This feature was introduced in TypeScript version 3.4. Further information can be found in the documentation.

Note that a readonly or const array is often referred to as a tuple (similar to Python - see reference). Tuples may contain elements of the same type or different types. In the example above, the Element type is not inferred as number but as a union of number literals. This is because tuple elements are immutable. It's beneficial to infer the most specific type possible. For instance, you can use the number literal type 1 in place of a number, but not vice versa.

A pair with two elements is commonly known as a tuple and can be represented as a product. Although the product of [number, string] is not a number, their combination allows multiplication. Consider a simpler example like [1 | 2 | 3, 'a' | 'b' | 'c'], which expands to:

  [1, 'a']
| [1, 'b']
| [1, 'c']
| [2, 'a']
| [2, 'b']
| [2, 'c']
| [3, 'a']
| [3, 'b']
| [3, 'c']

For further exploration:

Answer 3

Answer №2

Although the verified solution is accurate, there is a slight downside.

const readonlyArray = [1, 2, 3] as const;

let x = 4; // function parameter, etc.
// Argument of type 'number' is not assignable to parameter of type '1 | 2 | 3'.ts(2345)
// if (readonlyArray.includes(x)) {}

An alternative approach would be to utilize readonly:

const readonlyArray: readonly number[] = [1, 2, 3];

let x = 4;
if (readonlyArray.includes(x)) {} // OK

// Property 'push' does not exist on type 'readonly number[]'.ts(2339)
// readonlyArray.push(4);

Answer 4

Although the verified solution is accurate, there is a slight downside.

const readonlyArray = [1, 2, 3] as const;

let x = 4; // function parameter, etc.
// Argument of type 'number' is not assignable to parameter of type '1 | 2 | 3'.ts(2345)
// if (readonlyArray.includes(x)) {}

An alternative approach would be to utilize readonly:

const readonlyArray: readonly number[] = [1, 2, 3];

let x = 4;
if (readonlyArray.includes(x)) {} // OK

// Property 'push' does not exist on type 'readonly number[]'.ts(2339)
// readonlyArray.push(4);

Answer 5

Answer №3

Upon thorough investigation, it became apparent that the issue was not with the TypeScript compiler, but rather stemmed from my usage of a third-party component called DayPicker:

          <DayPicker
            onDayClick={this.handleDayClick}
            selectedDays={posts.day}
            months={MONTHS}
            weekdaysShort={WEEKDAYS_SHORT}
            firstDayOfWeek={1}/>

I discovered that the type of the prop weekdaysShort is not string[], but actually

[string, string, string, string, string, string, string]

weekdaysShort?: [string, string, string, string, string, string, string];

Because of this discrepancy, the TS compile threw an error stating that string[] does not match

[string, string, string, string, string, string, string]

.

To resolve this issue and eliminate the annoying error message, I simply changed the type from string[] to any. Alternatively, we could have also changed it to

[string, string, string, string, string, string, string]

(but it's too lengthy).

Answer 6

Upon thorough investigation, it became apparent that the issue was not with the TypeScript compiler, but rather stemmed from my usage of a third-party component called DayPicker:

          <DayPicker
            onDayClick={this.handleDayClick}
            selectedDays={posts.day}
            months={MONTHS}
            weekdaysShort={WEEKDAYS_SHORT}
            firstDayOfWeek={1}/>

I discovered that the type of the prop weekdaysShort is not string[], but actually

[string, string, string, string, string, string, string]

weekdaysShort?: [string, string, string, string, string, string, string];

Because of this discrepancy, the TS compile threw an error stating that string[] does not match

[string, string, string, string, string, string, string]

.

To resolve this issue and eliminate the annoying error message, I simply changed the type from string[] to any. Alternatively, we could have also changed it to

[string, string, string, string, string, string, string]

(but it's too lengthy).

Answer 7

Answer №4

The issue was not replicated during testing on the TypeScript playground.

What if we utilize the inferred type, whether it be a string array string[] or a 7-string tuple

[string, string, string, string, string, string, string]

?

const WEEKDAYS_SHORT = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
const sunday = 0;
const dayShortName = WEEKDAYS_SHORT[sunday]; // => 'Dim'

Or possibly an enum?

enum WEEKDAYS_SHORT { 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' }
const sunday = 0;
const dayShortName = WEEKDAYS_SHORT[sunday]; // => 'Dim'

In my opinion, both of the aforementioned options are superior to specifying the type any in this scenario.

Answer 8

The issue was not replicated during testing on the TypeScript playground.

What if we utilize the inferred type, whether it be a string array string[] or a 7-string tuple

[string, string, string, string, string, string, string]

?

const WEEKDAYS_SHORT = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
const sunday = 0;
const dayShortName = WEEKDAYS_SHORT[sunday]; // => 'Dim'

Or possibly an enum?

enum WEEKDAYS_SHORT { 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' }
const sunday = 0;
const dayShortName = WEEKDAYS_SHORT[sunday]; // => 'Dim'

In my opinion, both of the aforementioned options are superior to specifying the type any in this scenario.

Answer 9

Answer №5

Identifying the issue you've raised, it arises from attempting to assign a string array (string[]) to a 7-string-tuple. While your use of any can provide a solution, it's generally not recommended due to its lack of specificity. Additionally, spelling out the tuple type manually is cumbersome given its length.

To address this, we can create a utility function that generates tuple types for us. This approach ensures reusability in scenarios requiring tuples:

function tupleArray<T extends any[]>(...v: T) {
    return v;
}
const WEEKDAYS_SHORT_INFFERED =  tupleArray('Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam')  // INFFERED AS [string, string, string, string, string, string, string]
const WEEKDAYS_SHORT: [string, string, string, string, string, string, string] = WEEKDAYS_SHORT_INFFERED

Answer 10

Identifying the issue you've raised, it arises from attempting to assign a string array (string[]) to a 7-string-tuple. While your use of any can provide a solution, it's generally not recommended due to its lack of specificity. Additionally, spelling out the tuple type manually is cumbersome given its length.

To address this, we can create a utility function that generates tuple types for us. This approach ensures reusability in scenarios requiring tuples:

function tupleArray<T extends any[]>(...v: T) {
    return v;
}
const WEEKDAYS_SHORT_INFFERED =  tupleArray('Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam')  // INFFERED AS [string, string, string, string, string, string, string]
const WEEKDAYS_SHORT: [string, string, string, string, string, string, string] = WEEKDAYS_SHORT_INFFERED

Steps to declare a constant array in TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Utilize PHP's prepared statements to store an array in a MySQL database efficiently

How can we determine the props' type specific to each component?

Having trouble getting Jest to manually mock in Nestjs?

There appears to be an issue with the compilation of the TypeScript "import { myVar }" syntax in a Node/CommonJS/ES5 application

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

"Using Angular and TypeScript to dynamically show or hide tabs based on the selected language on a website

Discovering indices within an array that fall within a specified range of values in bulk

What is the best way to initialize a dynamic array in C++?

warning TS2322: Cannot assign type 'PropUser | null' to type 'PropUser'

Error in TypeScript - Anticipated 1-2 arguments, received either none or multiple. Code Issue TS2556

"Exploring the versatility of PHP arrays with a mixture of images

Obtain abbreviated names for the days of the week starting from Monday to Sunday using JavaScript

Is it possible to define data types for the global context in cucumber?

Generating nested arrays within an array continuously with numpy

How to Link an Observable Array to Another in Angular 2

Ran into a situation where Nextjs13 had two children sharing the same key

Embedding HTML Tags within an array element

CORS policy is causing the POST request to be blocked, but the GET and DELETE requests

Issues arising when selecting a property within a C# method

What is the proper way to utilize e.key and e.target.value in TypeScript when coding with React?