String interpolation can be used to easily accept numbers with dot separators

Is it possible to create a function that can accept numbers with dot separators?

Here are some examples:

func('100.000.002.333') // should pass
func('10') // should pass
func('20') // should pass
func('100') // should pass
func('20') // should pass
func('0100.000') // error
func('1000') // error
func('000.000') // error (leading zero)
func('100.000.') // error (trailing dot)
func('100.00.000') // error
func('.100.00.000') // error (leading dot)

Answer №1

custom playground
Implemented in a more concise and elegant way compared to the initial code snippet provided.

type Break<S extends string, P extends string = ""> =
    | S extends `${infer A}${P}${infer B}` ?
    B extends '' ? [A, B] : [A, ...Break<B, P>]
    : S extends '' ? [] : [S]

type y = Break<'9_two_22_three', '_'>
//   ^?
//   type x = ["9", "two", "22", "three"]

type Numeral = 'I' | 'II' | 'III' | 'IV' | 'V' | 'VI' | 'VII' | 'VIII' | 'IX'
// One or two-digit numerals excluding zero as the first character
type PrimaryNum = `${Exclude<Numeral, 'I'>}${'' | Numeral}${'' | Numeral}`;
// Three-digit numeral
type SecondaryNum = `${Numeral}${Numeral}${Numeral}`;
type Validate<S extends string> =
    | S extends 'I' ? 'I' // Special case: allow exact match for 'I'
    : Break<S, '_'> extends [PrimaryNum, ...SecondaryNum[]] ? S : false

declare function customFunction<S extends string>(input: Validate<S>): S;

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

How come JSON.parse is altering the data within nested arrays?

In my journey to master Angular 2, I decided to challenge myself by creating a Connect Four game using Angular CLI back when it was still utilizing SystemJS. Now, with the switch to the new Webpack-based CLI, I am encountering a peculiar issue... The fun ...

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

Verify if the date surpasses the current date and time of 17:30

Given a date and time parameters, I am interested in determining whether that date/time is greater than the current date at 17:30. I am hoping to achieve this using moment js. Do you think it's possible? This is what I have been attempting: let ref ...

Determining the type relationship between two generic types when using a union

Here is the code snippet defining a React component using react-hook-form: import { type FieldPath, type FieldValues, type FieldPathValue, } from "react-hook-form"; interface FormControlRadioBoxProps< TFieldValues extends FieldValue ...

Issue at 13th instance: TypeScript encountering a problem while retrieving data within an asynchronous component

CLICK HERE FOR ERROR IMAGE export const Filter = async (): Promise<JSX.Element> => { const { data: categories } = await api.get('/categories/') return ( <div className='w-full h-full relative'> <Containe ...

Performing an action within the Redux RTK API Slice

Is it feasible to trigger an action from a different reducer within the API Slice of Redux RTK? Let's say I have this scenario: getSomething: builder.query<SomeProps, void>({ query: () => ({ url: "...", ...

Angular rxjs Distinctions

Coming from AngularJS to Angular, I'm still trying to wrap my head around rxjs observable. For example: User.ts export class User { id?:any; username:string; password:string; } Using <User[]> myUser(header: any) { const url = `${this.mainUr ...

The potential issue of undefined objects in TypeScript when utilizing computed properties in Vue3

https://i.sstatic.net/I5ZVO.png I've attempted adding a ? after each word and also experimented with the following code: const totalNameLenght = computed(() => { if (userFirstnameLenght.value && userLastnameLenght.value){ ret ...

Does Typescript fail to recognize the "delete" operator?

Whenever I utilize the delete operator in Typescript, it appears that the system does not recognize that the property has been eliminated. For instance: interface HasName { name: string; } interface HasNoName { name: never; } function removeName( ...

How to import a page from a different component in the Next.js application router

I am currently utilizing the Next.js app router and have organized my folders as follows: app/ ├─ /companies/ │ ├─ page.tsx ├─ /administrators/ │ ├─ page.tsx My objective is to import the companies/page.tsx component into the admini ...

Attempting to revert the imported module back to its initial/default mock configuration

When working on my test file, I utilize a folder named mocks which contains various exported functions. Most of the time, I rely on the mocks folder to perform all necessary tasks. However, there is one scenario where I need to adjust the return value to a ...

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Starting with this code snippet: convert utilizes svgInjector to start and terminate a resource. export async function convert( serializedSvg: string, svgSourceId: string, containerId: string ): Promise<string> { const svgInjector = new SvgI ...

How can I make Cesium, SystemJS, and Angular2 compatible with each other?

Could anyone provide a working example of using SystemJS (not Webpack) with Angular2 (in TypeScript, not Dart) and Cesium (npm)? I came across a blog post on cesiumjs' site that discusses this: The author mentioned, "You can't simply do a requi ...

Using jest-dom without Jest is definitely an interesting challenge that many developers may

Can anyone help me with extending Typescript interfaces? I have come across a situation that I am trying to solve. In my tests, I am utilizing expect without using Jest directly (I installed it separately and it functions properly). Now, I am interested ...

Ways to streamline the type from typeof T down to T

One important aspect of my function is its signature, which looks like the following. waitMessage<T extends IIPCMessagesConstructors>(wantedMessageType: T): Promise<// ?? //> The definition of IIPCMessagesConstructors is crucial and consists ...

Encountering the error message "Expected token '<' instead of '{' when assigning Interfaces to a React Class Component"

Encountered a problem in my Laravel 8/Babel/Mix/React/TypeScript setup where a regular React class component is throwing a compilation error after migrating the project to TypeScript and passing an empty props and simple state interface to the component. ...

If the numeral variable is used within an HTML function, a 'numeral is not defined' error may occur

Numeral.js is a key tool for me, utilized in both the viewmodels and occasionally in the HTML of my knockout components. <div data-bind="text: numeral(totalCurrent()).format('$0,0.00')"></div> While using webpack to bundle my HTML a ...

Having trouble decoding a cookie received from a React.js front-end on an Express server

When using React js for my front end, I decided to set a cookie using the react-cookie package. After confirming that the request cookie is successfully being set, I moved on to configure the Express server with the cookie parser middleware. app.use(cookie ...

Struggling with extracting an array of objects from a JSON file and accessing individual attributes within each object?

As a newcomer to Typescript, I am eager to work with JSON and access its objects and attributes. However, I am encountering difficulties in achieving this. I have attempted using functions like 'for of' and 'for in', but unfortunately, ...

Interface displaying auto-detected car types

I have a setup that looks like this: interface ValueAccessor<T> { property: keyof T; getPropertyValue: (value: any) => value; } I am trying to figure out how to define the correct type and replace the any when I want to provide a custom ...