Create Functions to Encapsulate Type Guards

Is it possible to contain a type guard within a function as shown below?

function assertArray(value: any): void {
  if (!Array.isArray(value)) {
    throw "Not an array"
  }
}

// This doesn't work
function example1(value: string | []) {
  assertArray(value)
  return value.join('')
}

// But this does work
function example2(value: string | []) {
  if (!Array.isArray(value)) {
    throw "Not an array"
  }
  return value.join('')
}

Playground

The use case is quite straightforward. I want to include runtime assertions, and I prefer to encapsulate the logic without creating new variables. I am aware that I could const x = assertArray(y), but why can't I simply do assertArray(y)?

Answer №1

To leverage the new features of Typescript 3.7 and above, you have the ability to create assertion functions like so:

function assertArrayValue(input: any): asserts input is any[] {
  if (!Array.isArray(input)) {
    throw "Input is not an array"
  }
}

function exampleFunction(inputValue: string | []) {
  assertArrayValue(inputValue)
  return inputValue.join('')
}

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

Retrieve a specific item from the ngrx/store

My Reducer implementation in my Angular 2 app is designed to store state items related to price offers for Financial Instruments, such as stocks and currencies. This is the implementation of my Reducer: export const offersStore = (state = new Array<Of ...

Create a custom data structure resembling a record, where certain keys are assigned specific value types

My objective is to establish a custom type resembling a record, where certain keys are designated for specific value types. The proposed object would look something like this: const o: TRec = { text: "abc", width: 123, height: 456, //...an ...

Distribute among an array of specific types

I am trying to achieve this behavior using Typescript: type animals = 'cat' | 'dog' let selectedAnimals: animals[] = ['cat'] selectedAnimals = [ // <- Type 'string[]' is not assignable to type 'animals[]&ap ...

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

Extending Error object disrupts `instanceof` validation in TypeScript

Could someone clarify why the error instanceof CustomError part of the code below returns false? class CustomError extends Error {} const error = new CustomError(); console.log(error instanceof Error); // true console.log(error instanceof CustomError); ...

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

The 'RouterLink' JSX element type is missing any construct or call signatures

While researching this issue on the internet and Stack Overflow, I've noticed a common theme with problems related to React. An example can be found here. However, I am working with Vue and encountering errors in Vue's own components within a new ...

"Encountered a TypeError while attempting to send a server action to a custom

My custom form component, <ClientForm>, is built using Radix Primitives. "use client"; import { FC } from "react"; import * as Form from "@radix-ui/react-form"; const ClientForm: FC = (props) => ( <Form.Root {.. ...

Creating a custom Higher Order Component to seamlessly connect react-relay and react-router using TypeScript

Hey there! So, my Frankenstein monster project has decided to go rogue and I'm running out of hair to pull out. Any help would be greatly appreciated. I've been working on setting up a simple app with React, React-Router, React-Relay, and Typesc ...

Angular: The fetched data from the API is coming back as undefined

I am trying to use the Highcharts module in Angular to build a chart. The data object needed for the chart is provided by an API, and this is the structure of the object: { "success": true, "activity": [ { &q ...

When using TypeScript's array intersection type, properties are not accessible when using methods like Array.forEach or Array.some. However, they can be accessed within a for loop

It was challenging to search for this problem because I may not have the correct technical terms, but I hope my example can help clarify it. Background: I am using query data selectors in react-query to preprocess query results and add some properties tha ...

Tips for receiving an array input in a GraphQL resolver

My query variables contain an array of strings that I need to use as the ids parameter inside my resolver. Below is the relevant code snippet. People.resolver.ts import { Resolver, Query, Mutation, Args, } from '@nestjs/graphql'; import { Peopl ...

Error encountered during Angular unit testing: Unable to read the 'id' property of a null value. (Jasmine, Karma)

I am currently working on writing unit tests for a specific component in my Angular application. The component uses a currentUser variable both in the component logic and the HTML template. I have hardcoded this variable by mocking it in every test using c ...

Managing plain text and server responses in Angular 2: What you need to know

What is the best way to handle a plain text server response in Angular 2? Currently, I have this implementation: this.http.get('lib/respApiTest.res') .subscribe(testReadme => this.testReadme = testReadme); The content of lib/respApi ...

Need at least one of two methods, or both, in an abstract class

Consider the following scenario: export abstract class AbstractButton { // Must always provide this method abstract someRequiredMethod(): void; // The successor must implement one of these (or both) abstract setInnerText?(): void; abst ...

Tips for creating fixed first two columns in a table using React and TypeScript

I need a table where the first two columns stay fixed as headers while scrolling through the body of the table. ...

Using TypeORM to update a relation and set it to NULL

My challenge involves managing this specific Entity @Entity({ name: 'orders' }) export class Order { ... @ManyToOne(() => BulkOrder, (bulkOrder) => bulkOrder.orders) bulkOrder?: BulkOrder } In my update process, I am attempting to re ...

Implement dynamic typing in the sort function to restrict it to only accept number properties

I need help creating a pipe that can sort an array of objects based on a specified property. While I have managed to make it work, I am encountering a type error in my code. Here is the snippet: export const sortByProperty = <T>(a: T, b: T, property: ...

Evaluating whether an imported function, which serves as a dependency of an adapter, is being invoked with accurate parameters within the adapter using the Jest testing framework

Here is how my test looks import { SlugGeneratorAdapter } from './slug-generator-adapter' import slugify from 'slugify' describe('SlugGenerator Adapter', () => { test('Should call the slug generator with the correct ...

Issue with bundling project arises post upgrading node version from v6.10 to v10.x

My project uses webpack 2 and awesome-typescript-loader for bundling in nodejs. Recently, I upgraded my node version from 6.10 to 10.16. However, after bundling the project, I encountered a Runtime.ImportModuleError: Error: Cannot find module 'config ...