Combining types with additional features

Question

Combining types with additional features

Is it possible to configure the TypeScript compiler to generate an error when a function is called with an argument that can belong to both cases in a union type? For example:

interface Name {
  name: string
}

interface Email {
  email: string
}

type NameOrEmail = Name | Email

function print(p: NameOrEmail) {
 console.log(p)
}

print({name: 'alice'}) // This works fine
print({email: 'alice'}) // This also works
print({email: 'alice', name: 'alice'}) // Currently this works, but I want it to trigger an error
print({email: 'alice', age: 33}) // This should not work

typescript

Answer 1

Answer №1

If you want to hide the implementation details of a method in your code, you can achieve that using method overloading:

interface Person {
  name: string
}

interface Contact {
  email: string
}

function displayInfo(p: Person): void;
function displayInfo(c: Contact): void;
function displayInfo(pc: Person | Contact) {
  console.log(pc);
}

displayInfo({name: 'Alice'}) // This works fine
displayInfo({email: 'alice@example.com'}) // This also works fine
displayInfo({email: 'alice@example.com', name: 'Alice'}) // Should not work, but it does
displayInfo({email: 'alice@example.com', age: 30}) // Doesn't work as intended

By employing this approach, the actual signature of the method implementation is kept hidden from the rest of your code.

Demo

Edit:

In strict mode, it is necessary for overloaded signatures to specify a return type. While the return type of the implementation can still be inferable as long as it aligns with the specified return types in the visible signatures.

Answer 2

If you want to hide the implementation details of a method in your code, you can achieve that using method overloading:

interface Person {
  name: string
}

interface Contact {
  email: string
}

function displayInfo(p: Person): void;
function displayInfo(c: Contact): void;
function displayInfo(pc: Person | Contact) {
  console.log(pc);
}

displayInfo({name: 'Alice'}) // This works fine
displayInfo({email: 'alice@example.com'}) // This also works fine
displayInfo({email: 'alice@example.com', name: 'Alice'}) // Should not work, but it does
displayInfo({email: 'alice@example.com', age: 30}) // Doesn't work as intended

By employing this approach, the actual signature of the method implementation is kept hidden from the rest of your code.

Demo

Edit:

In strict mode, it is necessary for overloaded signatures to specify a return type. While the return type of the implementation can still be inferable as long as it aligns with the specified return types in the visible signatures.

Answer 3

Answer №2

As of now, TypeScript does not have built-in support for exclusive union types.

If you are interested in this feature, there is an ongoing discussion and proposed syntax available at: Proposal: Allow exclusive unions using logical or (^) operator between types

Answer 4

As of now, TypeScript does not have built-in support for exclusive union types.

If you are interested in this feature, there is an ongoing discussion and proposed syntax available at: Proposal: Allow exclusive unions using logical or (^) operator between types

Answer 5

Answer №3

When checking for excess properties on object literals within union types, the presence of a property on any member will not trigger an error. In cases where the interfaces do not have conflicting properties, the object literal with excess properties can be assigned to either member of the union, making it a valid assignment.

To avoid this behavior, one must make the interfaces incompatible by introducing a field with a string literal type and different values in each interface:

interface FirstName {
    type: 'first'
    name: string
}

interface LastName {
    type: 'last'
    name: string
}

type FullName = FirstName | LastName

function display(p: FullName) {
    console.log(p)
}

display({ name: 'Alice', type: 'first' }) // Succeeds
display({ name: 'Smith', type: 'last' }) // Succeeds
display({ name: 'Smith', age: 25, type: 'last' }) // Will fail 
display({ name: 'Alice', lastName: 'Smith', type: 'first' }) // Does not work

Answer 6

When checking for excess properties on object literals within union types, the presence of a property on any member will not trigger an error. In cases where the interfaces do not have conflicting properties, the object literal with excess properties can be assigned to either member of the union, making it a valid assignment.

To avoid this behavior, one must make the interfaces incompatible by introducing a field with a string literal type and different values in each interface:

interface FirstName {
    type: 'first'
    name: string
}

interface LastName {
    type: 'last'
    name: string
}

type FullName = FirstName | LastName

function display(p: FullName) {
    console.log(p)
}

display({ name: 'Alice', type: 'first' }) // Succeeds
display({ name: 'Smith', type: 'last' }) // Succeeds
display({ name: 'Smith', age: 25, type: 'last' }) // Will fail 
display({ name: 'Alice', lastName: 'Smith', type: 'first' }) // Does not work

Answer 7

Answer №4

Here is a different example:

export type CombinationType = TypeA | TypeB;

export interface TypeA {
    value: number;
}

export interface TypeB {
    info: string;
}

export const combinationType: CombinationType = {
    value: 98765,
    info: [{ bar: 'asdfg' }, { jkl: 'poiuy' }], // <-- this is acceptable for TypeScript!
};

Here is the referral link

Answer 8

Here is a different example:

export type CombinationType = TypeA | TypeB;

export interface TypeA {
    value: number;
}

export interface TypeB {
    info: string;
}

export const combinationType: CombinationType = {
    value: 98765,
    info: [{ bar: 'asdfg' }, { jkl: 'poiuy' }], // <-- this is acceptable for TypeScript!
};

Here is the referral link

Combining types with additional features

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Struggling to implement a singleton service in Angular as per the documentation provided

The Static Interface Binding in TypeScript

Having trouble utilizing Vue3 methods while utilizing the `<script setup lang="ts">` syntax

Encountering an error while compiling the Angular 8 app: "expected ':' but got error TS1005"

Incorporating AngularFire2 in the latest Angular 11.0.5 framework

Connecting multiple TypeScript files to a single template file with Angular: A comprehensive guide

Updating state in React without providing a key prop is a common issue, especially when

Angular correctly displaying specific array items within button elements

Are there any methods for utilizing the Angular/flex-layout API within a TypeScript file in an Angular 11 project?

Angular update row and save data to an array

One-of-a-kind npm module for typescript

Sending selected IDs from the JSON data

strictBindCallApply causing issues when working with generic parameters

Tips for generating a fixed-length array from multiple arrays with different lengths, focusing on selecting items from each array according to their significance

Learn how to retrieve data from the console and display it in HTML using Angular 4

Using an external npm module in TypeScript can result in the tsc output directory being modified

Manufacturing TypeScript classes that are returned by a factory

The issue with loading scripts in a ReactJS NextJS app is related to the inline condition not working

Angular Universal causing issues with updating the DOM component

Discover the steps to initiate Firefox in Incognito Mode using NodeJS and Selenium!