When utilizing TypeScript, you have the ability to create template literal types such as:
type Paragraph = `${string}\n`;
const paragraph: Paragraph = 'foo\n'; // valid
const word: Paragraph = 'foo'; // invalid
But can you define a type that is the opposite? Meaning, a string that does not end with a newline character:
type NotParagraph = `???`;
const paragraph: NotParagraph = 'foo\n'; // invalid
const word: NotParagraph = 'foo'; // valid
Finding a solution can be challenging. I have managed to come up with two approaches, although my expertise in TypeScript is still at the journeyman level. One method that I find more gratifying involves using a do-nothing function to enforce the requirement:
type NoTrailingNewline<T extends string> = T extends `${string}\n` ? never : T;
function noTrailingNewline<T extends string>(str: NoTrailingNewline<T>) {
return str;
}
const paragraph = noTrailingNewline("foo\n"); // not ok
// ^ Argument of type 'string' is not assignable to parameter of type 'never'.(2345)
const word = noTrailingNewline("foo"); // ok
The second method involves unsatisfactory duplication, which may not meet the expectations:
type NoTrailingNewline<T extends string> = T extends `${string}\n` ? never : T;
const paragraph: NoTrailingNewline<"foo\n"> = "foo\n"; // not ok
// ^ Type 'string' is not assignable to type 'never'.(2322)
const word: NoTrailingNewline<"foo"> = "foo"; // ok
While it may be tempting to aim for extreme precision in typing, sometimes having overly precise types can hinder rather than help. Tasks like string concatenation or manipulating substrings become more cumbersome with highly specific types. In such cases, relying on runtime checks might be a more practical approach.
One potential workaround is to define a nominal type (or something similar in Typescript) like this:
type NotParagraph = string & {__noTrailingNewLine: true};
Although this type doesn't have any functional significance, it resembles a string but requires the as keyword for instantiation. This allows you to create functions like a trim function as follows:
const trim = (str: string): NotParagraph => {
return str.trim() as NotParagraph
}
By using this approach, any function that expects a NotParagraph argument will only accept values returned by the trim function.
It appears that Typescript infers field types based solely on the private variable of a field, rather than taking into account the getter's return type union (1) or inferring from the getter itself (2): test('field type inference', () =& ...
Currently, I am developing an Angular application to replicate certain features found on YouTube by utilizing data fetched from an API. This API provides video timestamps in a string format Each timestamp follows this structure : YYYY-MM-DDTHH:MM:SS For ...
Is there a way to optimize these function calls for both onGoClick and onNoGoClicked within the SomeForm component? Or is it fine to keep them as they are? <SomeForm onGoClick={() => { cleanupHere(props) }} o ...
It appears that the buttons are being iterated correctly using ngFor, and upon inspection they have the correct attributes. However, when clicked, the function in the controller sometimes claims the parameter is 'undefined', happening randomly ab ...
In my Jest test, I am testing the behavior when trying to start a node http server with an invalid path for the socket file: describe('On any platform', (): void => { it('throws an error when trying to start with an invalid socket P ...
In my Angular2 project, I am working on retrieving JSON data to get all the rooms and store them in an array. Below is the code for the RoomlistService that helps me fetch the correct JSON file: @Injectable() export class RoomlistService { constructor( ...
The TZ variable is automatically set by Node as an environment variable. When using new Date(); in TypeScript, the date returned is in GMT+0000 even though the code is being executed on a machine with a timezone of GMT+0530. I attempted to print out conso ...
If you're embarking on a new project using NextJs and TypeScript, chances are you may encounter the following error: Failed to load config "next/core-web-vitals" to extend from. Wondering how to resolve this issue? ...
Currently, I am working on developing an application using Ionic and below is the code snippet: <ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> &l ...
I've been attempting to insert a new element into my JSON, but I'm struggling to do it correctly. I've tried numerous approaches and am unsure of what might be causing the issue. INITIAL JSON INPUT { "UnitID":"1148", "UNIT":"202B", "Sp ...
In the user interface, the parameter c is mandatory only if the parameter a is set to true. interface IArguments { a: boolean, b: string, c: string } The solution below seems to be effective, but how can I exclude the c parameter in the first scenar ...
When defining a TypeScript class like this: export class myClass { constructor(public aVariable: number) {} private aPrivateVariable: number; } and trying to initialize it with the following code: let someVar: myClass[] = [{ aVariable: 3 }, { aV ...
Imagine a scenario where there is a library that exposes a `run` function as shown below: runner.ts export type Parameters = { [key: string]: string }; type runner = (args: Parameters) => void; export default function run(fn: runner, params: Parameter ...
Received data from API: const abc = [ { date: '2023-12-8', value: 'mop' },{ date: '2023-10-8', value: 'qrs' } ] How can we create a date range using two input fields when the dates are in string forma ...
I attempted to accomplish this in the following manner: @Input() data: any[] = []; Upon entering the ngOnInit lifecycle method, I notice that this.data is undefined: ngOnInit() { console.log(this.data); } Consequently, when trying to access th ...
I recently tried out the TypeScript playground and came across a puzzling issue that I can't seem to wrap my head around. Below is the code snippet: type Foo = { t: string; } type Bar = string | { date: Date; list: string; } function te ...
I'm facing an issue with redirecting users to Twitter using window.open in a specific function. It seems like the instruction is being ignored, even though it works perfectly on other pages. Any ideas on how to fix this? answerQuestion() { if ...
I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color. Here's my code: color-variatio ...
Recently, I created a unique Select component utilizing useState and onChange. I attempted to integrate this custom component with the powerful react-hook-form. Allow me to share the code snippet for the bespoke Select component. const Select = forwardRef ...
In my React project, I have defined the redux logger with the package version "redux-logger": "^3.0.6" in the file store.ts as shown below: import { configureStore } from '@reduxjs/toolkit'; import rootReducer from '@/re ...