Is there a lack of compile checking for generics in Typescript?

Consider the code snippet below:

interface Contract<T> {
}

class Deal<D> implements Contract<D> {
}

class Agreement<A> implements Contract<A> {
}

Surprisingly, the following code compiles without errors:

let deal:Contract<number> = new Deal<number>()
let agreement:Contract<string> = new Agreement<string>()

// this should not compile
agreement = deal;

As well as this:

let deal:Deal<number> = new Deal<number>()
let agreement:Agreement<string> = new Agreement<string>()

// expected to fail but both compile
agreement = deal;

An accompanying playground link is provided.

The expectation was that a GenericOf<A> would not be interchangeable with Genericof<B>, leading to compile errors. What aspect am I misunderstanding here?

Answer №1

When working with TypeScript, type parameters have an impact on the resulting type only when they are utilized as a component of the type of a member. Refer to the corresponding documentation for more intricate explanations.

If you actively make use of the generic, you will encounter exactly the anticipated error:

interface Contract<T> {
    log: (value: T) => void
}

class Deal<D> implements Contract<D> {
    log(value: D) {
        console.log(value)
    }
}

class Agreement<A> implements Contract<A> {
    log(value: A) {
        console.log(value)
    }
}

let deal: Contract<number> = new Deal<number>()
let agreement: Contract<string> = new Agreement<string>()

agreement = deal;
// Error: Type 'Contract<number>' is not assignable to type 'Contract<string>'. Type 'string' is not assignable to type 'number'.

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

Eliminating an item from an array with the help of React hooks (useState)

I am facing an issue with removing an object from an array without using the "this" keyword. My attempt with updateList(list.slice(list.indexOf(e.target.name, 1))) is only keeping the last item in the array after removal, which is not the desired outcome. ...

What could be the reason for receiving an undefined value when trying to determine the size of the Set

Within one of my functions, I am encountering the following code: this.personService.getPersonInfo(this.personId).subscribe((res => { let response = res.body; let num = response.personList.size; ... })) Here is what the expe ...

What are the steps for utilizing the useReducer Hook with TypeScript?

I have successfully converted a React app to Typescript, but I am facing an issue with the useReducer Hook. The error message I'm getting is preventing me from moving forward. I have attempted different approaches to passing TypeScript interfaces in ...

What is the prescribed interface or datatype for symbol type in TypeScript with JavaScript?

I have a set of symbol values in JavaScript that I want to convert to TypeScript. // Defining object values in JavaScript const size = { Large: Symbol('large'), Medium: Symbol('medium') } What is the most efficient method to conv ...

A specialized HTTP interceptor designed for individual APIs

Hey there, I am currently working with 3 different APIs that require unique auth tokens for authentication. My goal is to set up 3 separate HTTP interceptors, one for each API. While I'm familiar with creating a generic httpInterceptor for the entire ...

Since transitioning my project from Angular 7.2 to Angular 8, I noticed a significant threefold increase in compile time. How can I go about resolving this issue

After upgrading my project to Angular 8, I noticed a significant increase in compile time without encountering any errors during the upgrade process. Is there a way to restore the previous compile time efficiency? **Update: A bug has been identified as th ...

Exploring the integration of LeafLet into Next JS 13 for interactive mapping

I'm currently working on integrating a LeafLet map component into my Next JS 13.0.1 project, but I'm facing an issue with the rendering of the map component. Upon the initial loading of the map component, I encountered this error: ReferenceError ...

Converting JSON to TypeScript in an Angular project

Within my Angular project, I have an HTTP service that communicates with a web API to retrieve JSON data. However, there is a discrepancy in the naming convention between the key in the JSON response (e.g., "Property" in uppercase) and the corresponding pr ...

Struggling to make Cypress react unit testing run smoothly in a ReactBoilerplate repository

I have been struggling for the past 5 hours, trying to figure out how to make everything work. I even recreated a project's structure and dependencies and turned it into a public repository in hopes of receiving some assistance. It seems like there mi ...

Converting Scss to css during the compilation process in Angular

Seeking assistance with .css and .scss file conversion. I am in need of help with generating or updating a .css file from an existing .scss file during compilation. To explain further: when writing code, everything is going smoothly until I decide to save ...

Guide on wrapping text within a pie chart using d3 version 7.6.1 in conjunction with TypeScript

When attempting to create a pie chart, I came across two examples: one here https://bl.ocks.org/mbostock/7555321 and another here https://jsfiddle.net/05nezv4q/20/ which includes text. However, I'm working with TypeScript and D3 v7.6.1 and encounterin ...

Populate a map<object, string> with values from an Angular 6 form

I'm currently setting keys and values into a map from a form, checking for validation if the field is not null for each one. I am seeking a more efficient solution to streamline my code as I have over 10 fields to handle... Below is an excerpt of my ...

The TypeScript script does not qualify as a module

Just starting out with TypeScript and encountering a simple issue. I'm attempting to import a file in order to bring in an interface. Here's an example: Parent: import { User } from "@/Users"; export interface Gift { id: number; ...

Tips for creating Junit tests for a CDK environment

As a newcomer to CDK, I have the requirement to set up SQS infrastructure during deployment. The following code snippet is working fine in the environment: export class TestStage extends cdk.Stage { constructor(scope: cdk.Construct, id: string, props: ...

Verify if an item is present within a separate array

To determine if an object in one array exists in another array, we can use the combination.some() method with a condition that checks for a match based on specific criteria. In the example below, the event array returns true while the event1 array return ...

Tips for accessing the FormControlName of the field that has been modified in Angular reactive forms

My reactive form consists of more than 10 form controls and I currently have a subscription set up on the valueChanges observable to detect any changes. While this solution works well, the output always includes the entire form value object, which includ ...

TypeORM: establishing many-to-one relationships between different types of entities

Trying to represent a complex relationship in TypeORM: [ItemContainer]-(0..1)---(0..n)-[ContainableItem]-(0..n)---(0..1)-[ItemLocation] In simpler terms: A ContainableItem can exist either within an ItemContainer or at an ItemLocation. Although it cannot ...

Execute a function when an RXJS Observable has completed its operation

Using the RXJS Observable has been smooth sailing so far, but I now find myself needing to not only react to observer.next() but also when observer.complete() is called. How can I capture the OnComplete event of an RXJS Observable? The documentation for ...

Attempting to convert numerical data into a time format extracted from a database

Struggling with formatting time formats received from a database? Looking to convert two types of data from the database into a visually appealing format on your page? For example, database value 400 should be displayed as 04:00 and 1830 as 18:30. Here&apo ...

Modify the empty message for the PrimeNG multiselect component

Is there a way to customize the message 'no results found' in p-multiselect on Angular? I have successfully changed the default label, but I am struggling to find a solution to override the empty message. Here is my code snippet: <p-multiSel ...