What is the reason for the failure of this typescript typeguard?

This code snippet defines a function for validating protocols and throwing an error if the input does not match the predefined protocols.

const validProtocols = ["https", "http"] as const
type AllProtocols = typeof validProtocols
type Protocol = AllProtocols[number]
function isProtocol(p: unknown): p is Protocol {
  return typeof p === "string" && p in validProtocols
}

let parse = (p: string) => {
  if (isProtocol(p))
    return p
  else
    throw `${p} is not a protocol`
}

console.log(parse("https"))

Although the code compiles, there seems to be an issue with the last line as isProtocol(p) returns false. Can you identify what might be causing this?

This code is designed to validate external input that is not controlled by the compiler, such as environment variables.

Answer №1

The in operator is used to determine if a property exists within an object. Here's an example:

const obj = { prop: 'val' };
const arr = ['val'];

console.log('prop' in obj, 0 in arr);

It specifically checks for the presence of properties, not values. If you need to check for values in an array, you can use .includes (but be prepared for the complexity that comes with dealing with type rules when using .includes):

function isProtocol(p:unknown): p is Protocol{
  return typeof p === "string" && (validProtocols as unknown as Array<string>).includes(p)
}

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

Guide on creating several TypeScript interfaces that share identical type structures

export interface UserFailureResponse { statusCode: number statusMessage: string } export interface UserCreateResponse { statusCode: number statusMessage: string } export interface AuthCheckResponse { statusCode: number statusMessa ...

Tips for converting a string array constant into a union type

I have a string array that I want to use to create a new type where the properties correspond to the elements in the array. There are different types of arrays and I have a function that generates different output types based on the input array. const RG ...

Is there a way to incorporate the "Handoff to Human" feature in a Microsoft Teams bot app by utilizing the Teams Toolkit? Can this functionality be implemented using TypeScript?

Can someone assist me with figuring out how to incorporate the "handoff conversation to human agent mechanism" in my project using TypeScript, Microsoft Bot Framework, and Teams Toolkit? ...

How can I dynamically assign the formControlName to an <input> element within Angular?

I'm currently developing a component with the goal of streamlining and standardizing the appearance and functionality of our forms. The code snippet below illustrates the structure: Sample Implementation ... <my-form-input labelKey = "email" cont ...

Unable to invoke the AppComponent function within ngOnInit due to error message: "Object does not have the specified property or method"

I'm a novice in Angular and I am attempting to invoke my function setCenter2() from the AppComponent class within the ngOnInit function of the same class. Is this achievable? Whenever I try to call my function by clicking on the map (using OpenStreetM ...

The React Native WebView is having trouble opening links on Android devices

There seems to be an issue with the React Native WebView component on Android where links are not opening, while on iOS it works perfectly without any hitches. When trying to open links on Android, nothing happens upon clicking and no errors are shown. H ...

Angular: Implementing a Dark and Light Mode Toggle with Bootstrap 4

Looking for suggestions on the most effective way to incorporate dark mode and light mode into my bootstrap 4 (scss) angular application. Since the Angular cli compiles scss files, I'm not keen on the traditional method of using separate css files for ...

The library "vue-property-decorator" (v10.X) is causing issues with resolving in Webpack despite being successfully installed

Encountered an error message Module not found: Error: Can't resolve './decorators/Emit' while attempting to import functionality from the library vue-property-decorator. The package is installed and accessible, ruling out a simple installati ...

Error Message: The specified HTML element already contains two instances of the WebViewer, leading to a conflict in PDFTron React TypeScript Next

Having some trouble using pdftron with my docx editor. I can use the editor fine, but keep encountering an error like the one shown below: https://i.stack.imgur.com/OnJxE.png https://i.stack.imgur.com/l9Oxt.png Here is a snippet of my code: wordeditor.t ...

How can I use a string from an array as a key in an object using TypeScript?

I have been utilizing a for loop to extract strings from an array, with the intention of using these strings as object keys. Although this code successfully runs, TypeScript raises a complaint: const arr = ['one', 'two']; const map = ...

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

I'm having trouble accessing the fileHandler object from my logger in order to flush the buffer to the file. This is the program I am working with: import * as log from "https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

Is the 'case' in a switch statement not treated as a typeguard by Typescript?

Here is a simplified version of the code I am working with: type Todo = { id: string; text: string; }; type Action = | { type: 'DELETE'; payload: string } | { type: 'CREATE'; payload: Todo } function reducer(state: Todo[], ...

Deactivate specific choices from a dynamically generated dropdown menu in Angular 8

I am working on a dynamic dropdown feature with multiple fields. https://i.sstatic.net/28iQJ.png By pressing the + button, a new row is generated. Users can add any number of rows. My challenge is to prevent users from selecting previously chosen values i ...

Utilizing React Custom Hooks for Firestore Data Retrieval

I recently developed a React custom hook that interfaces with a Firestore database. I followed the guidelines provided on the Firebase website, but I encountered an issue upon re-rendering the component. After refreshing my app, the useEffect hook function ...

Import Information into Popup Window

When a user clicks on the "view" button, only the details of the corresponding challenge should be displayed: Currently, clicking on the "view" button loads all the challenges. This is because in my view-one-challenge.component.html, I have coded it as fo ...

Custom Mui table sizes - personalized theme

By implementing custom sizes for the Table component in Material UI, I have extended the Table size prop with the following declaration: declare module '@mui/material' { interface TablePropsSizeOverrides { relaxed: true large: true } ...

Enhancing component and view functionality in Angular

Recently, I started working on Angular 11 and encountered a simple yet challenging question. Despite my best efforts, I have been unable to find a suitable answer. In an attempt to utilize Object-Oriented Programming (OOP) concepts within Angular, I create ...

Deploying Firebase functions results in an error

Just recently started exploring Firebase functions. Managed to install it on my computer, but running into an error when trying to execute: === Deploying to 'app'... i deploying firestore, functions Running command: npm --prefix "$RESOURCE_ ...

The term "Exports" has not been defined

I'm currently facing a challenge trying to develop an Angular application based on my initial app. The process is not as smooth as I had hoped. Here's the current setup: index.html <!DOCTYPE html> <html> <head> <base h ...

"Discovering the secrets of incorporating a spinner into Angular2 and mastering the art of concealing spinners in Angular

When experiencing delay in image loading time, I need to display a spinner until the image loads completely. What is the best way to achieve this on the Angular 2 platform? <div id='panId' class="container-fluid" > This section ...