Is it expected for this to not work as intended?
class Animal { }
class Person { }
type MyUnion = Number | Person;
var list: Array<MyUnion> = [ "aaa", 2, new Animal() ]; // Is this supposed to fail?
var x: MyUnion = "jjj"; // Should this actually pass?
Any suggestions on how to enforce strict type checking in this scenario?
When it comes to TypeScript, type compatibility is determined by structural subtyping.
Structural typing focuses on the members of types, rather than their names or declarations.
Specifically for classes:
Comparing two objects of a class type in TypeScript involves only comparing the members of the instance, without considering static members or constructors.
For further details, check out https://www.typescriptlang.org/docs/handbook/type-compatibility.html#classes
If there is any definition within Animal or Person, the following will not work:
class Animal { type: string; }
class Person { profession: string; }
type MyCombine = string | Person;
var collection: Array<MyCombine> = [ "apple", 3, new Animal() ]; // Currently leads to failure
var y: MyCombine = "orange"; // Currently leads to failure
In the absence of any declarations in Animal or Person, a string (or any other data) meets the criteria you are seeking.
Given a tree structure JSON, I am tasked with creating an API to insert all the data into a database at once. The organization entities can have multiple parents and children relationships. An example of the JSON data: { "org_name": "orga ...
I am currently facing challenges while attempting to extract specific fields from nested join results. Within my entities, there is a "Restaurant" entity that has a one-to-many relationship with "Product". Each "Product" has a many-to-many relationship wi ...
Is it possible to create a getter that acts like a function generator? My attempts class Foo { * Test1(): IterableIterator<string> { // Works, but not a getter... yield "Hello!"; } * get Test2(): IterableIterator<string> ...
Perhaps a typical TypeScript question. Let's take a look at this simple filtering code: interface Person { id: number; name?: string; } const people: Person[] = [ { id: 1, name: 'Alice' }, { id: 2 }, { id: 3, name: 'Bob&apos ...
In my Angular 7 application, I am displaying a background image in a div. However, there are instances when the link to the image is broken. The way I bind the image in my HTML is as follows: <div [ngStyle]="{'background-image': 'url(&a ...
I am in the process of developing an Angular library with the main feature being the provision of a selector with two inputs: a reactive form containing the data an object literal specifying which properties of the data should have editable input fields ...
I'm a beginner with Angular and I'm dealing with nested API responses from a Strapi application. I've set up a model using interfaces, but I'm having trouble accessing attributes from the product model when trying to access product data ...
This is a sample data entry. { _id: ObjectId('63e501cc2054071132171098'), name: 'Ricky', discriminator: 7706, registerTime: ISODate('2023-02-09T14:23:08.159Z'), friends: { '63e502f4e196ec7c04c4 ...
After extensive searching online, I have struggled to find a straightforward and up-to-date example of setting up Vue.js with TypeScript. The typical tutorials out there either are outdated or rely on specific configurations that don't apply universal ...
In my NextJS project, we utilize the /api path to implement our API, with an openapi.yaml file defining the interface. To generate the API client successfully, we run the following command: openapi-generator-cli generate -i data/api/openapi.yaml -o src/api ...
Currently, I am utilizing an npm package for chart creation, which can be found at the following link: https://www.npmjs.com/package/angular-highcharts I have a specific interface set up and I aim to extract values from this interface to populate a line g ...
I have encountered an issue while trying to parse/process a large 25 MB JSON file using Typescript. It seems that the code I have written is taking too long (and sometimes even timing out). I am not sure why this is happening or if there is a more efficien ...
Currently, I am tackling a challenge within my Angular project that involves the following situation: Essentially, my HomeComponent view code looks like this: <div class="courses-panel"> <h3>All Courses</h3> <mat-t ...
I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...
Currently utilizing the babel-plugin-content-transformer to import a directory containing YAML documents in a React Native/Expo project. The configuration for my babel plugin looks like this: ['content-transformer', { transformers: [{ ...
In my Next JS application, I encountered a situation where a line of code relies on a variable from a script src in the app.tsx page. Here's how it looks: app.tsx: <script src="https://js.stripe.com/v3/"></script> config.ts: de ...
I am encountering an issue with the value fetchOptions: Readonly<HttpFetchOptionsWithPath> and my attempt to overwrite one of its properties. Here is the method I have tried: ((fetchOptions as Writable<HttpFetchOptionsWithPath>).headers as Wr ...
How to Extract Specific Attribute Values from Nested Objects Array using RxJS const obj = { name: 'campus', buildings: [ { name: 'building', floors: [ { name: 'floo ...
When I assign a generic type to the function parameter and try to call the function, an error message pops up stating "This expression is not callable. Type unknown has no call signature." function a() { return 'abc' } function fun<T>(x: T ...
I'm working on a component that contains various Textfields and need to access specific IDs. For example, I want to target the textfield with the label 'Elevator amount'. I attempted the following code snippet but am unsure of how to correct ...