Getting the readonly-item type from an array in TypeScript: A step-by-step guide

Is it possible to create a readonly item array from a constant array?

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 discovered that I can make each 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"

However, I am still interested in knowing if the creation of the aforementioned ReadonlyItemArray type is feasible?

typescripttypescript-generics

Answer №1

If you want to make the basicValueTypes variable immutable (readonly), simply use as const.


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

To determine the type, you can utilize the typeof keyword:

type Immutable = typeof basicValueTypes

For creating a literal type, follow this syntax:

type Literal = [number, string]

In addition, there is a built-in readonly array feature:

type Arr = ReadonlyArray<string>

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

However, attempting something like this will not work:

const ReadOnlyBasicValueTypes = ReadonlyItemArray<typeof basicValueTyeps>;

This is because types are not constructors in TypeScript like they are in F# - they are only used for typing purposes. The TypeScript compiler removes them from the source code, resulting in pure JavaScript output.

Update

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the input value from a modal and receive an empty string if no value

Utilizing ng-multiselect-dropdown within my bootstrap modal allows users to choose multiple products. Each time an item is selected (onItemSelect), a new div is inserted using the jQuery method insertAfter(). This new div displays the quantity of the selec ...

jqueryangulartypescript

Automatically forwarding to another page in Angular 4 due to idle time

Is it possible to implement a timeout feature for inactivity on a webpage? For example, if a user is idle for 20 seconds without interacting with the page, can we automatically redirect them to the home screen? I've been struggling to get this functi ...

angulartypescript

How to eliminate file nesting in Visual Studio 2017

Is there a way to prevent certain file types from being nested within other files, such as .ts files not being nested beneath .html files? I came across this request, but has anyone found a solution to achieve this? ...

visual-studiotypescript

Unable to execute function: Angular 7 Platform-Browser-Dynamic (intermediate value) share is not defined

Recently, I have been working on upgrading our Angular 5 build to version 7. After installing webpack 4, rxjs 6.3.3, and angular 7.0.3, along with taking care of dependencies, I managed to successfully compile the bundle. However, a puzzling error seems to ...

angulartypescriptwebpackrxjsangular7

Lazy-loaded modules in Angular that contain services provided within the module

Currently, I am facing a challenge with lazy-loaded modules and services that are provided in these modules. My folder structure looks like this: app -> featureModule1 (lazy loaded) -> featureModule2 (lazy loaded) -->services --->servi ...

angulartypescriptdependency-injection

Updating the styles of React Native components using stylesheets

I've created a unique React component with the following structure: import { StyleSheet } from 'react-native'; import { Input, Item } from 'native-base'; import Icon from 'react-native-vector-icons/FontAwesome'; import { ...

javascriptcssreactjstypescriptreact-native

What type should React Router props be?

For a specific scenario, I developed a custom router component that redirects if certain parameters are missing: const StateParamRoute = (props: any) => { ... return stateParam ? <Route {...props} /> : <Redirect to="/error" />; ...

reactjstypescriptreact-router-dom

Tips on preventing the need to redeclare property types in React constructor with Typescript

Imagine having a class structured like this: class PeopleByTag extends React.Component<RouteComponentProps<{ tag: string }> In order to perform actions in the constructor, such as fetching data, you typically need to define a props parameter. Ho ...

reactjstypescript

Utilizing the componentDidUpdate method to update the state within the component

I have a scenario where two components are enclosed in a container. One component is retrieving the Id of a publication, while the other is fetching the issue date related to that specific publicationId. When I retrieve an Id, let’s say 100, it successf ...

javascriptreactjstypescriptaxios

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

I have created a custom Directive called isSelected and applied it to several elements in different components as shown below: <i isSelected class="icon"></i> <i isSelected class="icon"></i> <i isSelected class="icon"></i ...

angulartypescriptangular6angular-directive

The ongoing ESLint conundrum: Balancing between "Unused variable" and "Unknown type" errors when utilizing imports for type annotations

I've encountered a linting issue and I need some guidance on how to resolve it. Here's the scenario - when running $ yarn lint -v yarn run v1.22.4 $ eslint . -v v6.8.0 With plugins vue and @typescript-eslint, I have the following code in a .ts ...

typescriptvue.jseslinttypescript-eslint

How can I create an interceptor in Angular2 to detect 500 and 404 errors in my app.ts file?

Creating an Angular2 Interceptor for Handling 500 and 404 Errors in app.ts In my app.ts file, I am looking to implement an interceptor that can detect a 500 or 404 error so that I can appropriately redirect to my HTML 404 or HTML 500 pages. Is this funct ...

typescriptangular

Encountering an error in TypeScript and ng2 rc.1: Error message (20, 15) TS2304 indicates that the name 'module' cannot be found

Having trouble with TypeScript and ng2 rc.1 - getting Error:(20, 15) TS2304: Cannot find name 'module'. I encountered this issue when trying to use a directive of the module in my code: @Component({ selector: 'Notes1', moduleI ...

typescriptangular

Angular error: Trying to access the sort property of an undefined value

I am currently working on creating a sorting function and pipe for a table. I found guidance on how to do this by following a tutorial at this link, and here is the plunker example. In the example, the table header should be clickable to trigger the sort() ...

angularsortingtypescripthtml-tablepipe

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

javascripthtmlangulartypescriptservice

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Almost there, but stuck on the final TS2322: Type TcolTuple[i] is not assignable to type string | number | symbol compiler error. Here's a nifty utility function called rowsToObjects() that many developers have probably come up with at some point, ...

typescripttypescript-genericstypingkeyof

Some files are missing when performing an npm install for a local package

My project is structured like this: ├── functions/ │ ├── src │ ├── lib │ ├── package.json ├── shared/ │ ├── src │ | ├── index.ts | | ├── interfaces.ts | | └── validator_cl ...

node.jstypescriptnpmnpm-install

Upon running `npm run build` in vue.js, an error occurs stating that the interface 'NodeRequire' cannot extend types 'Require' simultaneously

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11): 139:11 The 'NodeRequire' interface cannot extend both 'Require' and 'RequireFunction' at the same time. The named property &apos ...

typescriptvue.jswebpack

What are the best strategies for utilizing AnimatePresence for smooth and seamless transitions?

In my upcoming app, I am working on creating a seamless entry/exit animation using Framer Motion's AnimatePresence component. While experimenting with the delay feature, I encountered an issue where only one component would animate properly, while the ...

typescriptnext.jstailwind-cssframer-motion

Manipulating arrays and troubleshooting Typescript errors in Vue JS

I am attempting to compare the elements in one list (list A) with another list (list B), and if there is a match, I want to change a property/field of the corresponding items in list B to a boolean value. Below is the code snippet: export default defineCo ...

javascriptarraystypescriptvue.js