What is the reason for the error message stating that "'VideoSource' is being used as a value here despite it only referring to a type?"

When I run the first if check, everything works fine without any errors. However, when I move to the else block, an error is thrown.

The error message reads: 'VideoSource' only refers to a type, but is being used as a value here.

let element:VideoSource|VideoTrack;
element = {
    src: '',
    videoType: 'video/mp4'
}

if (element instanceof  VideoTrack) {

}
else if (element instanceof  VideoSource) {

}

export interface VideoSource {
    src:string;
    videoType:'video/mp4'|'video/webm'|'video/ogg';
}

export interface VideoTrack {
    src:string;
    kind: 'subtitles'|'captions'|'chapters'|'descriptions'|'metadata'
    label?:string;
    srclang?:string;
    IsDefault?:'default';
}

Answer №1

Take a look at this response addressing an issue on the typescript GitHub. Also, don't miss this explanation.

In essence, Interfaces are only present during compile-time and are eliminated after compilation, making it impossible to use them for checks at run-time. Keep in mind that this is achievable with classes.

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

Is there a way to prevent this React function from continually re-rendering?

I recently created a small project on Codesandbox using React. The project involves a spaceship that should move around the screen based on arrow key inputs. I have implemented a function that detects key presses, specifically arrow keys, and updates the ...

Leverage the generic types of an extended interface to simplify the creation of a shorthand type

Attempting to streamline my action shorthand that interacts with AsyncActionCreators. A function has been crafted to accept a React dispatch: Dispatch<T> parameter: const fetchProfileAction = actionCreator.async<void, Profile, any>('FETC ...

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

Deactivate user session in LoopBack 4 API

Can anyone provide a clear example of an API endpoint for logging out that allows for deleting the token stored during login instead of relying on the web browser? It seems there is no documentation available on how LoopBack generates a default user when ...

Using Angular 2 to submit ngModel data within an ngFor loop

When submitting the form, an error occurs when trying to repopulate the data back to the form: ERROR TypeError: Cannot read property 'id' of undefined This is in reference to the code snippet: <select [(ngModel)]="insurer.group.id" name="grou ...

Having difficulty importing the WebRTCAdaptor from the antmedia package stored in the node modules directory into an Angular Typescript file

An error is appearing indicating that: There seems to be a problem finding a declaration file for the module '@antmedia/webrtc_adaptor/js/webrtc_adaptor.js'. The file 'D:/web/node_modules/@antmedia/webrtc_adaptor/js/webrtc_adaptor.js' ...

Angular: Display an element above and in relation to a button

Before I dive in, let me just mention that I have searched extensively for a solution to my problem without much luck. The issue is describing exactly what I'm trying to accomplish in a way that yields relevant search results. If you're interest ...

What is the method to access a component from a module that has been imported into the app module?

We are currently working on a project that has the following hierarchy. app/ ├── app.component.html ├── app.component.ts ├── app.module.ts <--moduleA and moduleB is imported here ├── app-routing.module.ts ├── moduleA/ ...

The pipe in Angular 2.0.0 was not able to be located

Error: Issue: Template parse errors: The 'datefromiso' pipe is not recognized Custom Pipe: import {Pipe, PipeTransform} from "@angular/core"; @Pipe({ name: 'datefromiso' }) export class DateFromISO implements P ...

Guide on eliminating commas by utilizing the replace function in Angular

Check out the code snippet here: https://stackblitz.com/edit/angular-w5ecbw?file=src/app/app.component.ts item.component.ts ngOnInit() { const data = ['.23.2 ms','.23.001 ms', '.23.81 ms', '192,101.02 ms', &apo ...

Struggling with configuring internationalization in NestJS

Currently, I am working on a NestJS project where my lead assigned me the task of returning different errors to the frontend based on the language in the request header. After some research, I decided to use i18n for this purpose. However, when testing it ...

Guide on sorting an array within a specific range and extracting a sample on each side of the outcome

I need a simple solution for the following scenario: let rangeOfInterest = [25 , 44]; let input = [10, 20, 30, 40, 50, 60]; I want to extract values that fall between 25 and 44 (inclusive) from the given input. The range may be within or outside the inpu ...

How can I populate an array using values from a different array in Angular?

I am facing an issue with populating three other arrays based on the property 'game type' from my array called 'my games'. Here is an example of the structure of the 'my games' array: hideScore: true, started: true, startedAt: ...

Prevent TypeScript from generalizing string literals as types

I have a constant Object called STUDY_TAGS with specific properties const STUDY_TAGS ={ InstanceAvailability: { tag: "00080056", type: "optional", vr: "string" }, ModalitiesinStudy: { tag: "00080061", type: " ...

Leveraging LESS in an Angular2 component

Currently, I am attempting to integrate LESS with angular2. To do so, I have imported the less.js file in my index.html and I am using the following command within the component: less.modifyVars({ '@currentTheme-bar': '@quot ...

Setting up data in Firebase can be challenging due to its complex structure definition

https://i.stack.imgur.com/iclx7.png UPDATE: In my firebase structure, I have made edits to the users collection by adding a special list called ListaFavorite. This list will contain all the favorite items that users add during their session. The issue I a ...

The template literal expression is being flagged as an "Invalid type" because it includes both string and undefined values, despite my cautious use of

I am facing an issue with a simple component that loops out buttons. During the TypeScript build, I encountered an error when calling this loop: 17:60 Error: Invalid type "string | undefined" of template literal expression. In my JSX return, I ...

Evaluating a branch using Jasmine Karma

How can I effectively test a branch using Jasmin/Karma within Angular? Consider the following simple function: loadData(){ if(this.faktor){ // here it should be true or false this.callMethod1(); }else{ this.callMethod2(); } } I am ...

A step-by-step guide to building a basic node.js TypeScript project using ES6 modules and starting with a simple "Hello World

Consider a scenario where you have a basic program consisting of a main file and some functions stored in a separate file, utilizing ES6 modules and designed to be executed with node.js. my-helpers.ts: import * as fs from "fs"; export function readBasic ...

Incorrect inference of type in a generic function when using key and value as arguments

I am working with a MyMap type that has 2 keys, each taking an array of callbacks with different signatures. type MyMap = { type1: (() => void)[] type2: ((data: string) => void)[] } My goal is to create a generic function that can add a key a ...