How to get readonly-item type from an array in TypeScript?

Question

How to get readonly item array from an array constant?

const const basicValueTypes = [{
  value: 'number',
  label: 'Number'
},{
  value: 'boolean',
  label: 'Boolean'
}];

type ReadonlyItemArray = ???

type ReadOnlyBasicValueTypes = ReadonlyItemArray<typeof basicValueTyeps>;
/*
↓↓↓↓
ReadOnlyBasicValueTypes = (
  {value: 'number', label: 'Number'}
| {value: 'boolean', label: 'Boolean'}
)
*/

Update: I figure out that I can make every item as const:

const basicValueTypes = [{
  value: 'number',
  label: 'Number'
} as const,{
  value: 'boolean',
  label: 'Boolean'
} as const];

type BasicValueTypes = typeof basicValueTypes[number]['value'];
// BasicValueTypes = "number" | "boolean"

But I still want to know is it possible to contrive above ReadonlyItemArray type?

captain-yossarian from Ukraine · Accepted Answer · 2021-03-22 11:53:36Z

2

To make basicValueTypes immutable (readonly), you can use as const.


const basicValueTypes = [{
    value: 'number',
    label: 'Number'
}, {
    value: 'boolean',
    label: 'Boolean'
}] as const;

To get the type, you can use typeof:

type Immutable = typeof basicValueTypes

To make literal type, you can use :

type Literal = [number, string]

Also there is built in readonly array:

type Arr = ReadonlyArray<string>

const arr:Arr=['a','b']
arr.push('c') // error

But you can't do smth like that:

const ReadOnlyBasicValueTypes = ReadonlyItemArray<typeof basicValueTyeps>;

BEcause types are not constructors, like it is in F#, it is only types. TS compiler will remove them from source code, and you will receive pure js

Update

 const basicValueTypes = [{
  value: 'number',
  label: 'Number'
},{
  value: 'boolean',
  label: 'Boolean'
}] as const;

type Basic = typeof basicValueTypes;
type Item = Basic[number] // check this type

edited Mar 22, 2021 at 11:53

answered Mar 22, 2021 at 7:03

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aztack Over a year ago

Sorry, It should be type rather than const. I edited the post.

Collectives™ on Stack Overflow

How to get readonly-item type from an array in TypeScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related