A method for converting variables into various data types within a template

Question

A method for converting variables into various data types within a template

I have developed an Angular app where I have configured the following:

  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "fullTemplateTypeCheck": true,
    "strictTemplates": true
  }

As a result, all input and output are not type checked.

While this works well for most of the app, there are some inputs that require type checking. For example, consider this select input:

.html

      <app-select
        [useSearch]="true"
        [formControlName]="'country'"
        (valueChange)="setSelectedCountry($event)" <=== $event is of type unknown
      >
        <app-option
          *ngFor="let country of locations$ | async"
          [name]="'COUNTRIES.' + country.code | translate"
          [value]="country.code" <=== this is of type Country
        ></app-option>
      </app-select>

.ts

  setSelectedCountry(code: Country) {
    this.store.dispatch(loadLocationRequest({ payload: { code } }));
    this.selectedLocation$ = this.store.pipe(select(getLocationByCode(), { code }));
  }

For such cases, where I have multiple types of values for a select input, the current setup is:

  @Input()
  get value(): unknown | unknown[] {
    return this.pValue;
  }
  set value(newValue: unknown | unknown[]) {
    if (newValue !== this.pValue) {
      this.pValue = newValue;
      this.writeValue(newValue);
    }
  }

Now, I see two possible solutions:

Avoid using ngModel like this [(value)]="country" and instead implement a custom method for type checking in all components that use a select input.
Create a type for each value type used in the select input and cast them accordingly.

However, I would like to find a simpler solution specifically for these cases. Is it possible to pass a generic type to a component via input so that it returns the type of the generic I passed? For example: <app-select<string>>

Is it feasible to create a pipe that can cast to a generic value without the need to create a pipe for each type like string or number?

Lastly, is it possible to selectively ignore certain type checks?

angular typescript

Answer 1

Answer №1

After experimenting with different approaches, I found a workaround that I don't recommend unless absolutely necessary (similar to using $any()).

A better way would be:

Creating a Pipe for each unknown type, allowing for type checks within the pipe. For example:

import { Pipe, PipeTransform } from '@angular/core'
import { Gender } from '@app/__generated__/globalTypes'

@Pipe({
  name: 'toAnimal',
  pure: true,
})
export class ToAnimalPipe implements PipeTransform {
  transform(value: unknown): Animal {
    return typeof value === "string" && Object.keys(Animal).includes(value) ? 
              value as Animal : 
              Animal.DOG 
  }
}

The workaround:

I created a simple pipe as follows:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'toType',
  pure: true,
})
export class ToTypePipe implements PipeTransform {
  transform<T>(value: unknown, _: T): T {
    return value as T;
  }
}

You can use it like this:

 value | toType: Animal.DOG

The value can be anything of type Animal, but we are just casting it, allowing the compiler to accept it without errors.

It's not entirely safe and goes against strict mode principles.

However, it can be useful for simple type casts, like in this scenario:

<table [dataSource]="animals"> <=== Array<Animal>
 <ng-container [cdkColumnDef]="columns.name.def">
  <td class="align-items-center p-4 w-80" cdk-cell *cdkCellDef="let element">

*cdkCellDef="let element" is an Animal, but Angular's template doesn't allow for correct typing. Therefore, let element | typeOf: Animal.DOG should be safe in this case.

Answer 2

After experimenting with different approaches, I found a workaround that I don't recommend unless absolutely necessary (similar to using $any()).

A better way would be:

Creating a Pipe for each unknown type, allowing for type checks within the pipe. For example:

import { Pipe, PipeTransform } from '@angular/core'
import { Gender } from '@app/__generated__/globalTypes'

@Pipe({
  name: 'toAnimal',
  pure: true,
})
export class ToAnimalPipe implements PipeTransform {
  transform(value: unknown): Animal {
    return typeof value === "string" && Object.keys(Animal).includes(value) ? 
              value as Animal : 
              Animal.DOG 
  }
}

The workaround:

I created a simple pipe as follows:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'toType',
  pure: true,
})
export class ToTypePipe implements PipeTransform {
  transform<T>(value: unknown, _: T): T {
    return value as T;
  }
}

You can use it like this:

 value | toType: Animal.DOG

The value can be anything of type Animal, but we are just casting it, allowing the compiler to accept it without errors.

It's not entirely safe and goes against strict mode principles.

However, it can be useful for simple type casts, like in this scenario:

<table [dataSource]="animals"> <=== Array<Animal>
 <ng-container [cdkColumnDef]="columns.name.def">
  <td class="align-items-center p-4 w-80" cdk-cell *cdkCellDef="let element">

*cdkCellDef="let element" is an Animal, but Angular's template doesn't allow for correct typing. Therefore, let element | typeOf: Animal.DOG should be safe in this case.

A method for converting variables into various data types within a template

Answer №1

Similar questions

Deleting a NativeScript ImageAsset that was generated using the nativescript-camera module - Easy Steps!

Encountering issues with @typescript-eslint/typescript-estree due to using a non-officially supported version of TypeScript after updating Nuxt

Exploring the depths of Angular2 RC6: Implementing nested modules and routing

Typescript encounters an overload error on the Accumulator argument while using reduce operation

The subscription function in observables may result in values that are undefined

Detecting incorrect serialized data entries based on data types

Are the frameworks Vue, Angular, and React known for

Updating a signal based on an input signal in Angular 17.1: A step-by-step guide

Obtaining the value of an ion-toggle in Ionic2 using the ionChange

There seems to be an issue with my React application that was built using Webpack 5 and compiled with TypeScript. The @tailwind directive is not functioning properly in the browser, and

Issue: Incorrect parameter supplied for pipe 'AsyncPipe' in MatTable Angular 11

Tips for utilizing a formatter with a Doughnut chart in Angular using Chart.js

Challenge encountered when setting new values to an object depending on its existing values

Adding local images to Excel can be easily accomplished using Office Scripts

What is the best way to refresh the script located within the head tag of an index.html file in an Angular

Displaying data from an Angular subscription in a user interface form

Facing a challenge with handling HTTP data in a TypeScript-based Angular web application

Incorporating a CSS Module into a conditional statement

Using *ngFor with trackBy for multiple properties

Angular: rendering JSON data as a dynamic grid