let object = { key1: 123, key2: 'abc' }
If we analyze, the data type of object is:
{ key1: number, key2: string }
However, there are times when I wish its datatype could be defined as:
{ key1: 123, key2: 'abc' }
Moreover, considering this snippet:
const obj: { key1: 123, key2: 'abc' } = { key1: 123, key2: 'abc' }
Do you know any other efficient solution?
To maintain literal types when inferring the type of a constant, you can utilize the as const assertion:
const data = { x: 1, y: '2' } as const
// Equivalent to
// const data: {
// readonly x: 1;
// readonly y: "2";
// }
By using this, the object becomes read-only, but for a constant, this is usually acceptable.
If you prefer properties not to be readonly, there are various approaches available, although none are particularly seamless.
One approach is applying as const on the literals:
const data = { x: 1 as const, y: '2' as const }
// Equivalent to
// const data: {
// x: 1;
// y: "2";
// }
Alternatively, declare the readonly version initially and then convert it to mutable:
type Mutable<T> = { -readonly [P in keyof T]: T[P]}
const ro_data = { x: 1 , y: '2' } as const
const data: Mutable<typeof ro_data> = ro_data
// const data: {
// x: 1;
// y: "2";
// }
Or another option is using a function to infer string literal types:
function asLiterals<T extends Record<string, string | number | null | undefined | boolean >>(o: T) {
return o;
}
const data = asLiterals({ x: 1 , y: '2' });
// Equivalent to
// const data: {
// x: number;
// y: string;
// }
To ensure a specific type has a property a with a constant value of 1, or to enforce certain properties to always have the same value, you can define an interface like the one below:
interface RedTriangle extends Shape {
type: "triangle";
color: "red";
}
It's important to note that this approach is effective for primitive values or literal object and array values. Type inference may be limited when the value is referenced as a variable. TypeScript may not always infer the exact value of a named entity. In cases like this, these type definitions act as assertions, ensuring that downstream code recognizes a specific value as a RedTriangle.
I'm attempting to use knockout in TypeScript and encountering a similar issue as mentioned here. However, I am unable to locate the necessary typings to resolve this problem. The specific code line causing trouble is: ko.extenders.name = function (ta ...
I am looking to make the required fields show in red in the angular material when the "Submit" button is clicked. To achieve this, I need to trigger the input to be marked as touched. <div class="formRow"> ...
Imagine having 3 different lists: List 1: bus, plane List 2: [related to bus] slow, can't fly List 3: [related to plane] fast, can fly In my Ionic Angular project, I have successfully implemented the first ion-list. How can I dynamically change th ...
I have encountered an issue while trying to filter an observable array. It seems that the ko.utils.arrayFilter method is converting all my model's field names to lowercase, causing unexpected behavior. I should mention that this project involves Types ...
I am in the process of creating a monorepo for UI applications that utilize shared components and styles with pnpm, typescript, vue, and vite. While attempting to streamline development and deployment using pnpm's workspace feature, I am encountering ...
Lately, I've been working on a settings application with slide toggles. Currently, I have set up local storage to store the toggle state. However, I now want to update the toggle status based on the server response. The goal is to toggle buttons accor ...
Struggling with implementing a change password feature in Angular 7, On the backend side, if the current password is incorrect, it will return true. An error message should appear on the Angular side, but I'm encountering an issue where I have to cl ...
I am trying to create a 360 viewer for a specific product using a 3D object. The goal is to rotate the camera around the object at a 45-degree angle per click in the correct direction. However, I am facing difficulties with this task. Camera: this.camera ...
Please carefully review the Description below before proceeding: This is an HTML file containing code snippets: <div class="row col-md-2"> <mat-form-field appearance="outline" class="nameInput col-md-2"> <mat-label>One< ...
I'm currently working on a NestJS application that serves images with authentication requirements. I have implemented JWT for authentication, but I encountered an issue when trying to display the image in an img tag because I cannot attach the Authori ...
Can anyone help me with displaying a popup message when I click on the select button that says "you have selected this event"? I am using Angular 2. <button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()"&g ...
Recently, I upgraded the Angular CLI to version v13 globally. However, upon attempting to use the ng command, I encountered a puzzling error message: https://i.sstatic.net/gAgB4.png After consulting advice provided here, I learned that Angular v13 is sup ...
Here is the code snippet I am working with: HTML <nav class="navbar bg-dark navbar-dark"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class=&quo ...
Is there a method to resolve this issue without needing to insert an ignore directive in the file? Error encountered during command execution: ./node_modules/tslint/bin/tslint -p src/tsconfig.json --type-check src/app/app.component.spec.ts [21, 5]: unuse ...
After upgrading my CDK infrastructure code from version 1 to version 2, I encountered some failed test cases. The conversion itself was successful without any issues. The only changes made were updating the references from version 1 to version 2, nothing ...
There's a specific type that I have in mind export type baseEventType = { eName: string; mName: string; }; and my goal is to enhance it by incorporating a rest parameter interface gEvent extends baseEventType { ...rest: any[] } alth ...
I am looking to convert the following format: realm="https://api.digitalocean.com/v2/registry/auth",service="registry.digitalocean.com",scope="registry:catalog:*" Into this JSON object: { realm: "https://api.digitaloce ...
How can I dynamically load content on my page based on the active navigation point? export class Sub_navigation_item { constructor( public title: string, public templateName: string ) {} } I have a navigation item with an ID from an ...
In a project using angular2/typescript, I am working with an array of objects that contain key/value pairs from a database. These values are then displayed in a table on the UI using ag-grid-ng2. The table headers are dynamic and set in the database. One ...
Creating multiple mat-sliders dynamically in Angular looks like this: <ng-container *ngFor="let parameter of parameterValues; let i = index;"> <mat-slider (input)="onInputChange($event)" min="1" max="{{ parameter.length }}" step="1" value="1" i ...