const availableOptions = ["a", "b", "c"];
const objectToCheck = {a: 2, b: 3}; // I need TypeScript to throw an error because it doesn't have the key 'c'!
I have an array of strings as constants. Is there a way in TypeScript to ensure that an object's keys include all the values from the array?
One way to achieve this is by:
const supported = ["a", "b", "c"] as const;
const someObject: Record<typeof supported[number], number> = {a: 2, b: 3};
This ensures that all values are numbers and the object contains keys from supported.
If needed, you can relax the value type to be unknown or any.
If you prefer not to use the built-in Record<K, V> type, you can expand it to
{ [P in typeof supported[number]]: number }Note: the values in supported must be known during compile time.
Check out the Playground for more examples: Playground Link
Update:
A solution for making keys optional:
const supported = ["a", "b", "c", "d", "e"] as const;
type Keys = typeof supported[number];
type OptionalKeys = "d" | "e";
type MandatoryKeys = Exclude<Keys, OptionalKeys>
const someObject: Record<MandatoryKeys, number> & Partial<Record<OptionalKeys, number>> = {a: 2, b: 3, c: 42};
Explore more on the Playground: Playground Link
I am currently working on implementing collision with an object using three.js by importing a model and then creating a body in Oimo to represent it. My problem arises from the fact that the center of the model does not align with the center of the object ...
export interface Cookies { Token: string; SessionID: string; UserID: string; } type property = keyof Cookies // property is "Token" | "SessionID" | "UserID" export const COOKIE_PROPERTIES: Record<property, property& ...
Within my codebase, I have defined an enum called AlgorithmEnum: export enum AlgorithmEnum { SHA1, SHA256, SHA512 } This enum is utilized as the Algorithm property of a class named Authenticator: export class Authenticator { Type: Type = T ...
I'm working with Angular and I have a TypeScript variable initialized to 0. However, when trying to increment it using *ngFor in my .ts file, the increment is not happening (even though the loop is running correctly). my-page.html <div *ngFor=&quo ...
When it comes to simplicity, using the Decoder approach with io-ts has proven to be effective: import { isRight } from 'fp-ts/Either'; import * as D from 'io-ts/Decoder'; const thing = D.struct({ id: D.number, createdAt: D.string, ...
I have developed two different approaches to achieve the same effect, and surprisingly both are functioning correctly. However, I am struggling to comprehend the nuances between them and determine which one is more "correct". See them outlined below: Opt ...
If I have a function type like this: type FunctionType = (a: number, b: string, c: boolean) => void How can I create a new type with the last parameter removed? type NewFunctionType = OmitLastParameter<FunctionType> Desired type for NewFunctionT ...
I submitted a bug report regarding Typescript because I suspect there is an issue, although I'm seeking additional insights here as well. This is the scenario. When running the following code: class Person { @IsValueIn(['PETER', ' ...
I am currently working on an Angular project that includes a component named 'wrongRouteComponent' for a custom 404 page. Whenever a user enters a non pre-defined route, the 'wrong-route.component.html' should be displayed. However, I a ...
I am struggling to pass data from my child component to my parent component using the Output() and EventEmitter methods. Despite the fact that the emitter function in the child component is being called, it seems like no data is actually being sent through ...
I am currently working on authorizing Google APIs using the new Google Identity Services JavaScript SDK in my Vue / Quasar / TypeScript application. Following the guidelines provided here, I have included the Google 3P Authorization JavaScript Library in ...
I am trying to implement a hook to manage the states and event functions of my menus. However, when I try to import the click function in this component, I encounter the following error: "No overload matches this call. The first of two overloads, '(p ...
I recently began working on a SvelteKit skeleton project for my personal website. However, I encountered an error when using Svelte with TypeScript - specifically, I kept getting the message Type '<some prop type>' is not assignable to type ...
After finding and addressing the other 5-6 questions, I managed to partially fix it by using the "!" operator. Please do not remove this question for duplication purposes. However, what baffles me is that the variable is not recognized as an object. Here i ...
I am attempting to incorporate an external html file into my Angular component: import { LoginController } from './login.controller'; import './login.scss'; import './login.html'; class LoginComponent implements ng.IComponen ...
My current project involves adding a booking.com embedded widget. Initially, when accessing the main page, everything works perfectly - the map and booking widget are visible for ordering. However, if you switch views without leaving the page or closing th ...
I have been working on implementing a cookie in Svelte (while also using Svelte Kit) for the purpose of storing a JWT Token used in authentication processes. I initially tried using pure JavaScript code like getCookie() and setCookie(), following the gui ...
I have designed a decorator to handle async errors, but I am encountering difficulties in accessing it within class methods. My goal is to develop a reusable CRUD class that other classes can inherit from, with a method for CRUD operations. Decorator Code ...
I'm feeling a bit lost here as to why my code isn't functioning correctly. For some reason, it's not displaying the predefined items that I've set up. Any guidance or assistance would be greatly appreciated. Dealing with Angular errors ...
After reading the article "Why I no longer use TypeScript with React and why you might want to switch too", I decided to work on a Vue CLI project using ES6 without TypeScript. Instead, I enabled type checking in Visual Studio Code by utilizing JSDoc / @ty ...