Typescript types can inadvertently include unnecessary properties

Question

Typescript types can inadvertently include unnecessary properties

It seems that when a class is used as a type, only keys of that class should be allowed. However, assigning [Symbol()], [String()], or [Number()] as property keys does not result in an error, allowing incorrect properties to be assigned. An even more curious case is that if [Symbol()] is assigned to a variable before being used as a property key, it causes an error as expected. This is different from the behavior seen when assigning [String()] or [Number()] to a variable first.

const sym = Symbol()
const str = String('another unwanted prop')
const num = Number(1)

class A { // <-- can be class/type/interface
    a?: string
    b?: number
}

let a: A = { 
    [Symbol()]: 'anything', 
    [String('unwanted prop')]: 'anything', 
    [Number(0)]: 'anything', 
    [str]: 'anything',
    [num]: 'anything',
    [sym]: 'anything' // <-- why does this error while [Symbol()], [String()] and [Number()] don't?
//  ~~~~~~~~~~~~~~~~~
}

Playground Link

This behavior does not match my expectations and I find it somewhat confusing.

Is this considered an issue or is it the intended behavior? Am I overlooking something?

typescript symbols mapped-types typescript-class

Answer 1

Answer №1

It seems that TypeScript is missing a key feature here; computed property names do not usually trigger excess property warnings, except when the computed property name is a literal type (such as "abc") or a unique symbol type (like a named declaration const x = Symbol()).

This issue has been acknowledged by the TypeScript community and reported in microsoft/TypeScript#22427. Although marked as fixed, it remains unresolved as seen in microsoft/TypeScript#36920.

Excess property warning primarily serves as a linter tool rather than a strict type safety mechanism. The object types in TypeScript are open for extension, allowing excess properties without compromising type integrity. Refer to this discussion on Stack Overflow for more insights.

The purpose of excess property warnings is to alert developers about potentially discarding valuable information unintentionally. For instance, when defining a variable as const foo: {x: string} = {x: "hello", y: 123}, the compiler highlights the excess property y as a precaution against potential data loss.

In cases where the compiler could issue warnings but does not, users often submit suggestions and feature requests. These omissions are viewed as inconveniences rather than critical vulnerabilities in type safety. One such example is the request for excess property warnings on non-discriminated union types in microsoft/TypeScript#20863.

Explore the code further in the TypeScript playground using this Playground link.

Answer 2

It seems that TypeScript is missing a key feature here; computed property names do not usually trigger excess property warnings, except when the computed property name is a literal type (such as "abc") or a unique symbol type (like a named declaration const x = Symbol()).

This issue has been acknowledged by the TypeScript community and reported in microsoft/TypeScript#22427. Although marked as fixed, it remains unresolved as seen in microsoft/TypeScript#36920.

Excess property warning primarily serves as a linter tool rather than a strict type safety mechanism. The object types in TypeScript are open for extension, allowing excess properties without compromising type integrity. Refer to this discussion on Stack Overflow for more insights.

The purpose of excess property warnings is to alert developers about potentially discarding valuable information unintentionally. For instance, when defining a variable as const foo: {x: string} = {x: "hello", y: 123}, the compiler highlights the excess property y as a precaution against potential data loss.

In cases where the compiler could issue warnings but does not, users often submit suggestions and feature requests. These omissions are viewed as inconveniences rather than critical vulnerabilities in type safety. One such example is the request for excess property warnings on non-discriminated union types in microsoft/TypeScript#20863.

Explore the code further in the TypeScript playground using this Playground link.

Answer 3

Answer №2

I managed to solve the issue by utilizing an interface that restricts symbol types:

type Properties<T> = { [Key in keyof T]: T[Key] }

interface NoSymbolRestriction{
    [key: symbol]: never;
}
interface Entity extends NoSymbolRestriction{
    a?: string
    b?: number
}

let entityProperties: Properties<Entity> = { a: '', b: 0, [Symbol()]: 0 } //Results in an Error

If you need to use the Class construct instead of Interface, consider combining them like this:

let entityProperties: Properties<Entity&NoSymbolRestriction> = { a: '', b: 0, [Symbol()]: 0 } //Results in an Error

Answer 4

I managed to solve the issue by utilizing an interface that restricts symbol types:

type Properties<T> = { [Key in keyof T]: T[Key] }

interface NoSymbolRestriction{
    [key: symbol]: never;
}
interface Entity extends NoSymbolRestriction{
    a?: string
    b?: number
}

let entityProperties: Properties<Entity> = { a: '', b: 0, [Symbol()]: 0 } //Results in an Error

If you need to use the Class construct instead of Interface, consider combining them like this:

let entityProperties: Properties<Entity&NoSymbolRestriction> = { a: '', b: 0, [Symbol()]: 0 } //Results in an Error

Typescript types can inadvertently include unnecessary properties

Answer №1

Answer №2

Similar questions

TypeScript - Converting into individual compiled files

Struggling to navigate through rows in a Material UI Table

Checking nested arrays recursively in Typescript

What is the best way to send information to a child component that has been navigated from a parent component

Build for Node.js using TypeScript with full functionality

Is there any advice for resolving the issue "In order to execute the serve command, you must be in an Angular project, but the project definition cannot be located"?

Tips for selecting specific types from a list using generic types in TypeScript

Is Typescript pass by value or pass by reference?

angular table cell with a show more/less button

Send the template to the enclosed grid column

Sending a parameter to a route guard

When working with Angular 12, the target environment lacks support for dynamic import() syntax. Therefore, utilizing external type 'module' within a script is not feasible

TypeScript's conditional property failing to recognize incorrect functional argument

Why does React redirect me to the main page after refreshing the page, even though the user is authenticated in a private route?

Deactivate multiple textareas within a loop by utilizing JQuery/Typescript and KnockoutJS

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

What is the reason behind the occurrence of `(User & { _id: Schema.Types.ObjectId; }) | null` when calling findById?

Can you provide the syntax for a generic type parameter placed in front of a function type declaration?

Error in NodeJS when trying to run ESM: "ReferenceError: exports is not defined

Having a problem where the Next.js project is functioning in development mode, but encountering a "module not found" error