So, I am working with a string union that looks like this:
export type Intervals = 'total' | 'weekly' | 'biweekly' | 'monthly' | 'annually';To show these options to the user, I plan on iterating over an array containing the values of the union:
const intervals = ['total', 'weekly', 'biweekly', 'monthly', 'annually'];
intervals.forEach(...);
My question is, how can I define the intervals array in such a way that it must contain all the values from the Intervals union?
Switch things up by defining the type based on an array rather than vice versa.
const DURATIONS = ['short', 'medium', 'long'] as const;
const copy = [...DURATIONS];
export type Duration = typeof copy[0];
To ensure that intervals are able to be assigned to Array<Intervals>, a simple check can be implemented:
const intervalsMisspelled: Array<Intervals> =
['weekly', 'biweekly', 'annually', 'monthly', 'totul']; // error, "totul"
However, this does not account for missing elements:
const intervalsMissing: Array<Intervals> =
['weekly', 'biweekly', 'annually', 'monthly']; // oops, no error but missing "total"
To address this issue, you can create a utility function called ensureArray(). This function takes a type parameter T (in this case, Intervals) and returns another function which accepts parameters of type T and infers an array type A based on those parameters. If any element in the A array (A[number]) is narrower than type T, an error will be triggered indicating that something has been left out. Here's how you can implement this solution:
const ensureArray = <T>() => <A extends T[]>(
...a: A & ([T] extends [A[number]] ? A : never)
): A => a;
const ensureIntervalsArray = ensureArray<Intervals>();
const intervals = ensureIntervalsArray(
'annually', 'biweekly', 'monthly', 'total', 'weekly'); // okay
const intervalsMisspelled = ensureIntervalsArray(
'annually', 'biweekly', 'monthly', 'totul', 'weekly'); // error, "totul"
const intervalsMissing = ensureIntervalsArray(
'annually', 'biweekly', 'monthly', 'weekly'); // error,
// [string, string, string, string] is not assignable to never
This implementation works, although the error message generated for intervalsMissing might be unclear at first glance. Unfortunately, due to current limitations in TypeScript, custom type errors cannot be easily created.
An alternative approach provides a more descriptive but convoluted error message:
const ensureArray = <T>() => <A extends T[]>(
...a: A & ([T] extends [A[number]] ? A :
{ errorMessage: [Error, "You are missing", Exclude<T, A[number]>] })
): A => a;
const ensureIntervalsArray = ensureArray<Intervals>();
const intervalsMissing = ensureIntervalsArray(
'annually', 'biweekly', 'monthly', 'weekly'); // error,
// Property 'errorMessage' is missing in type
// '["annually", "biweekly", "monthly", "weekly"]'
// but required in type '{ errorMessage: [Error, "You are missing", "total"]; }'
Hopefully one of these approaches meets your requirements. Best of luck!
Is there a foolproof way to arrange the intervals array so that it contains all values from the union of Intervals?
It's not a straightforward task. One option is to define it as a union of tuples. For instance, if you only have 'total' | 'weekly', you could write it like this:
const intervals:
| ['total', 'weekly']
| ['weekly', 'total']
What you see here represents a permutation denoted by nPn.
What I'm looking for In a key-value parent object, I have multiple objects with a property called namespaced of type boolean: const obj1 = { namespaced: true, a() {} } as const const obj2 = { namespaced: false, b() {} } as const const pare ...
I'm currently learning Angular, TypeScript, and RxJS. I have an HTTP request that retrieves a JSON response. Within this JSON response, there is data that I need to use to create a specific object. Let's assume that the object I want to create lo ...
After making changes to the HTML file of an Angular component, the browser does not reflect those changes when connected to localhost. Even though the old string is no longer present in the project, the browser continues to display it. Interestingly, openi ...
While trying to globally install TypeScript using npm sudo npm install -g typescript An error occurs during the installation process with the following message: ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/typescript/bin/ ...
I am facing an issue with my HTML that uses an AngularJS directive. This HTML file is being used in an Android WebView, and I want to be able to call an Android method from this directive (Learn how to call Android method from JS here). Below is the code ...
I'm currently working on an Angular2 App that utilizes Firebase as its User system, with authentication providers including Email + Password, Facebook, and Google. One issue I have encountered is that when logging in with Facebook, I am unable to swi ...
There is an if clause in my code that checks for the presence of the cordova object in the window global object. If cordova is present, it will make a http request and return the default angular 2 http observable. If the application is in a web context wh ...
On the lookout for male objects in this list. list=[ { id: 1, name: "Sam", sex: "M"}, { id: 2, name: "Jane", sex: "F"}, { id: 3, name: "Mark", sex: "M"}, { id: 4, name: "Mary, sex: "F& ...
I am seeking guidance on the usage of Angular 5 httpClient. This particular model class contains a method called foo() that I wish to retrieve from the server export class MyClass implements Deserializable{ id: number; title: string; deserialize(i ...
It has come to my attention that deno no longer necessitates the use of package.json (compatible with npm/yarn) to detail its dependencies. However, when it comes to build/run scripts, is package.json still the recommended descriptor or are there alternat ...
Currently, I am in the process of converting the below code snippet from Flow to TypeScript let headAndLines = headerAndRemainingLines(lines, spaceCountToTab), header: string[] = headAndLines.header, groups: string[][]= headAndLines.groups, ...
Recently, I've delved into the world of React / TypeScript and have taken on a personal project to enhance my skills. As part of this project, I am in the process of transitioning some class-based code into hooks. Here is the (JS) class-based code th ...
I am working on a simple Node.js project where my package.json looks like this: { "dependencies": { "node-static": "^0.7.11" } } Currently, I have manually copied the d3.js file and I am serving it as a static file without any transpiling involv ...
My goal is to programmatically obtain an access token from Azure Active Directory in an Angular 6 application using the method below. let body1 = new FormData() body1.append("resource", environment.config.clientId) body1.append("grant_type", " ...
https://i.sstatic.net/l6mUu.png It's noticeable that the send offer button is currently disabled, I am looking to enable it only when both input fields are filled. Below, I have shared my code base with you. Please review the code and make necessar ...
I'm aware that in TypeScript, readonly properties can only be assigned a value within a class constructor. However, I encountered an error while trying to do so inside the constructor of my class, specifically related to an array method handler. class ...
Hello there! I'm facing an issue while attempting to send time data to supabase using next.js. Unfortunately, I haven't been successful in sending the data yet. I suspect that the problem lies in the type not being valid for supabase, but I&apos ...
My selection includes: export type DocumentType = | Item | List | User export type DocumentInputType = | ItemInputType | ListInputType | UserInputType I want to develop a feature that can determine the input type based on the document type wi ...
I'm currently developing a web-based application using angular version 6. Within my application, there is a component that contains another component as its child. In the parent component, there is a specific function that I would like to invoke when ...
Is it feasible to achieve something similar to this? <li><a href="#" target="_blank" (click)="createComponent(MYSTRINGHERE)">Departamentos</a></li> ...