Implementing a wrapped object check using a union type

Exploring the use of union types with basic primitives and custom objects, I created a contrived example inspired by the sample union type shown in the Typescript documentation under the Union Types section. In this example, I introduced a fictional type called PaddingLeft:

type PaddingLeft = {
  aNumber: string,
}

function padLeft(value: string, padding: string | number | PaddingLeft) {
  if (typeof padding === "object") {
    return padding.aNumber + value;
  }
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
      return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

To use the padLeft function, you can call it like this:

padLeft('1', 1);
padLeft('1', '2');
padLeft('1', {aNumber: '34'});

While the implementation of padLeft satisfies Typescript, I aim to avoid using typeof checks such as:

if (typeof padding === "object") {

My goal is to encapsulate the object check inside a function to allow for additional checks beyond a simple typeof verification. Initially, I attempted to create a function that mimics the typeof check but within a function:

function isObjectCheck (args: any) {
  return (typeof args === 'object');
}

Subsequently, I tried to replace the typeof check with a call to isObjectCheck (substituting the initial line of the padLeft function):

if (isObjectCheck(padding)) {

Yet, this modification led to Typescript raising an error:

Property 'aNumber' does not exist on type 'string | number | PaddingLeft'. Property 'aNumber' does not exist on type 'string'.

How can I refactor the object check using a function while satisfying Typescript's validation requirements?

Answer №1

If you're in need of custom type guards, the following solution should fit your requirements:

type PaddingLeft = {
    aNumber: string,
}

function isObjectCheck(argument: any): argument is object {
    return (typeof argument === 'object');
}

function padLeft(value: string, padding: string | number | PaddingLeft) {
    if (isObjectCheck(padding)) {
        return padding.aNumber + value;
    }
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, received '${padding}'.`);
}

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

Using TypeScript to Initialize Arrays with Objects

Why is it that in TypeScript 1.8, the following code blocks with initializers are considered legal syntax: class A { public textField: string; } var instanceOfClass = new A { textField = "HELLO WORLD" }; var arrayCollection = new A[] { new A ...

Create an interface object in TypeScript with no initial properties

I'm currently developing an app with angular 5 (TS) and I've encountered a problem while trying to initialize an empty object of my interface. The solution that I found and attempted is as follows: article: Article = {} as Article; However, ...

Guide on integrating Mapbox GL Draw into an Angular 8 project

I'm currently working on an Angular 8 project that utilizes Webpack. My integration of Mapbox GL JS was successful, however, I am facing issues with importing Mabox GL Draw. Here are the versions I am using: "@angular/core": "8.2.14", "mapbox-gl": "^ ...

Can the month dropdown in react-datepicker be modified to display numbers instead of names?

Here is the code I have: <DatePicker selected={value?.toDate()} onChange={(date) => this.handleMonthChange(date)} inline showMonthYearPicker dateFormat={this.props.formatString} /> https://i.sstatic.net/SkdGP.png I am seeking ...

Struggling to make HttpClient Post work in Angular 5?

I'm facing an issue with my httpClient post request. The service is not throwing any errors, but it's also not successfully posting the data to the database. Below is the code snippet: dataService.ts import { Injectable } from '@angular/c ...

Is it possible to effortlessly associate a personalized string with an identifier within an HTML element utilizing Angular2?

Check out this cool plunker import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` <div *ngFor="#option of myHashMap"> <input type="radio" name="myRadio" id="{{generateId(option[& ...

Utilize the imported function from <Script> within NextJS

When working with vanilla JS, I am able to include a script like this: <head> <script src="https://api.site.com/js/v1/script.js"></script> </head> and then create an instance of it using: const fn = ScriptJS(); I can t ...

I'm having trouble with implementing a basic show/hide feature for the login and logout options in the navigation bar using Angular. Can anyone help me figure out why it's

Is there a way to display the functionality after logging in without using session storage or implementing the logout function? The HTML for navigation is provided below. <nav class="navbar navbar-expand-sm navbar-light bg-light"> ...

Exploring the world of third-party APIs

I am currently working on fetching data from an external API and displaying it. In order to enhance flexibility, I am aiming to completely separate the API integration from my code and use custom-defined data structures instead. Here is a brief visual ov ...

Determine the associated value for a given key within a TypeScript object

I have a structure like this: type newsItem = { img: string; slug: newsSlug; text: newsText; }; derived from an enum like this: export const newsEnum = { interesting: "Interesting", regions: "Regions", contradictory: " ...

Creating an array of objects in Angular 2

I'm facing an issue with the following expression: public mySentences:Array<string> = [ {id: 1, text: 'Sentence 1'}, {id: 2, text: 'Sentence 2'}, {id: 3, text: 'Sentence 3'}, {id: 4, text: 'Sen ...

Ways to utilize/extract data from an enumeration

Hello there! I am currently diving into the world of React and Typescript, eager to expand my knowledge. Please bear with me if my explanations are not up to par. In my react app, I have a scenario where I created an enum that I want to utilize in two diff ...

Can webpack effectively operate in both the frontend and backend environments?

According to the information provided on their website, packaging is defined as: webpack serves as a module bundler with its main purpose being to bundle JavaScript files for usage in a browser. Additionally, it has the ability to transform, bundle, or ...

What is the best way to refresh information following its removal?

In my app, I have implemented a feature where posts are displayed as HTML cards using a component called PostList. Each card has a delete button to remove it from the list. The issue I am facing is that when I delete a card, it remains visible in the post ...

What is the correct way to define functions within an object using Typescript in this situation?

Currently in the process of converting a JavaScript project to TypeScript, I encountered this error message (utilizing urql): A function whose declared type is neither 'void' nor 'any' must return a value. ts(2355) on line: playerCrea ...

Revamping an npm package on GitHub

Currently, I am managing a project that has gained popularity among users and has received contributions from multiple individuals. The next step I want to take is to convert the entire library into TypeScript, but I am unsure of the best approach to ach ...

How can angular/typescript be used to convert a percentage value, such as 75.8%, into a number like 75.8?

I have obtained a value (for example, "75.8%") as a string from an API and I need to convert it to a number in order to apply conditions. For instance: <div class="container" [ngClass]="{ 'pos' : value > 0, ...

Exploring Angular RxJS: the art of filtering Observable arrays

Is there a way to effectively filter an array Observable in Angular? I am working with an observable Array: announcementList$: Observable<Announcement[]> = this.announcementService.getAnnouncement(0,0).pipe(filter(Boolean),shareReplay(), map(({data} ...

How can I invoke a TypeScript function within HTML code?

Currently, I am working on an Angular project where I have implemented two straightforward methods in a TypeScript file: findForm(text: string, forms: Array<string>) { for (let form of this.forms) { if (text.includes(form)) { retur ...

What could be causing the index.tsx file to not locate the Clock Module?

Here is the code snippet I have in my index.tsx file. import Clock from "./utility/clock"; And this is my tsconfig setup. { "compilerOptions": { "sourceMap": true, "noImplicitAny": true, "module": "es6", "target": "es5", ...