Providing a function with an incorrect variable type does not trigger a type error

Why is it that when I pass the incorrect variable type to the ts function, no type error is emitted?

export class CreateCategoryDto implements Omit<Category, 'id' | 'children' | 'parent'> {
  name: string;

  parentId: number;
}

export async function createCategory(dto: CreateCategoryDto) {
  return getRepository(Category).save(dto);
}

const data = { id: 555, name: 'sdfsdf', parentId: 55 };
ctx.body = {
    data1: await createCategory(data), // does not emit
    data: await createCategory({ id: 555, name: 'sdfsdf', parentId: 55 }), // emits that parameters must be without id
  };

Answer №1

The concept in question relates to checking for excess properties and object literal freshness.

When does an object literal qualify as fresh, you may wonder?

An object literal is deemed fresh when TypeScript deduces its type without any explicit type assertions or variable assignments.

// using type assertion, this works
data: await createCategory({ id: 555, name: 'sdfsdf', parentId: 55 } as CreateCategoryDto)

In the first scenario where it's assigned to a variable, the freshness diminishes and there is no excess property checking.

const data = { id: 555, name: 'sdfsdf', parentId: 55 }; // assigned to a variable

data1: await createCategory(data)

However, if you directly pass the object literal to a function without assigning it first, TypeScript infers its type, making it fresh.

data: await createCategory({ id: 555, name: 'sdfsdf', parentId: 55 }) // fresh object

In such cases, excess property checking comes into play. When trying to assign a fresh object literal of type T to another type U, and T has additional properties not in U, TypeScript flags this as an error. This helps in catching misspellings.

As stated in the documentation:

[...] TypeScript considers this code potentially buggy. Object literals undergo excess property checking when assigned to variables, or passed as arguments. If an object literal contains properties not present in the "target type," an error will occur [...]

For instance:

var categoryDto: CreateCategoryDto = { id: 555, name: 'sdfsdf', parentId: 55 }

results in an error, while:

var categoryDto = { id: 555, name: 'sdfsdf', parentId: 55 }
var test: CreateCategoryDto = categoryDto

does not, showcasing the balance between usability and safety achieved through excess property checking with fresh object literals.

Answer №2

Your DTO should have exactly two fields defined:

Name: String ParentId: Number

The criteria for the property name and data type are met by the two object literals you provided as arguments in the method call.

It's worth mentioning that my perspective comes from working with statically typed languages such as C# and dynamically typed languages like Javascript, rather than using TypeScript.

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

Incorrectly selecting an overload in a Typescript partial interface can lead to errors

My attempt to define an overload for my function using a Partial interface overloading is causing typescript to select the incorrect overload interface Args { _id: string; name: string; } interface Result { _id: string; name: string; } function my ...

Merging sort and uniq functionalities to create a single function in JavaScript

I've been working with the sortBy and uniqBy functions, but I find myself iterating over the array twice when using the combined sortUniqBy. If you want to check out the code, feel free to click on this link to the codesandbox. Here's a snippet o ...

Ways to extract values from a javascript hash map by exclusively incorporating an array

So here's the issue I'm encountering. Let's consider the following scenario: let surfaces: Map<any, any> = new Map([{"83.1" => Object}, {"84.1" => Object}]) let arr1 = ["83.1"] This is the desired o ...

Error in Next.js when trying to use Firebase Cloud Messaging: ReferenceError - navigator is not defined in the Component.WindowMessagingFactory instanceFactory

Currently, I am in the process of setting up push notifications with Firebase in my next.js application. I have been following a guide from the documentation which you can find here: https://firebase.google.com/docs/cloud-messaging/js/receive?hl=es-419 Ho ...

Is it possible to use the HostListener in Angular 7 to detect any scroll event occurring on a specific element within a webpage?

I am developing a breadcrumb bar component in Angular 7 that should dynamically hide and show based on user scrolling behavior. To achieve this, I created a directive to track the scroll position of the container element. While my code for capturing the s ...

The Type '{Property: string, Property2: string} does not match the type Observable<Filters[]>

Here is a method I am trying to use: getFilters(): Observable<Filters[]> { let filters: Observable<Filters[]> = [ { property: "Value", property2: "Value2" }, { property: "Value3", property2: "V ...

How can I verify the "Type" of user input in a custom React TypeScript hook?

Creating a customized hook to fetch JSON data from an API is a task I am currently working on. The challenge is that I intend to use this hook for various types of data, so I need a mechanism to specify the type each time I utilize the hook. Depending on t ...

Can functions be stored and invoked within a dictionary in TypeScript?

Currently, I'm in the process of refactoring some code and had a question regarding the possibility of declaring and initializing a dictionary that contains factory functions, with each function being associated with an enumerator key. This setup woul ...

React-Admin error: Attempting to invoke a built-in Promise constructor without using the new keyword is not allowed

I'm currently facing an issue where I am trying to retrieve data using a hook. Strangely, there are no TypeScript errors appearing, but when I run the code, a console error pops up stating "Uncaught TypeError: calling a builtin Promise constructor wit ...

The issue of Angular2 routing not working with an empty route has been

My routing setup is structured as follows: In the app module, I have defined the initial level of routing using the following configuration: const routes: Routes = [ { path: 'login', component: LoginComponent, }, { path: 'dash', red ...

A Vue component library devoid of bundled dependencies or the need for compiling SCSS files

My current challenge involves the task of finding a way to publish our team's component library. These components are intended to be used by various internal applications within our organization. I have specific requirements: The library must be acc ...

Dynamically attach rows to a table in Angular by triggering a TypeScript method with a button click

I need help creating a button that will add rows to a table dynamically when pressed. However, I am encountering an error when trying to call the function in TypeScript (save_row()). How can I successfully call the function in TypeScript and dynamically a ...

Is there a way to decrease a field in a MongoDB database on a daily basis?

In the process of constructing an Angular2 application using MEAN stack architecture, I have a field called Remaining Days in my MongoDB database. I am interested in having this field automatically decrement by 1 each day. Do you know if this is possible ...

Invoke the Organize Imports function using code and then proceed to save the updated file automatically

My current task involves: async function doItAll(ownEdits: Array<TextEdit>) { const editor: TextEditor = await getEditor(); applyOwnChanges(editor, ownEdits); await commands.executeCommand('editor.action.organizeImports', ...

What sets apart obj.prop from obj['prop'] in typescript?

After utilizing @babel/parser to parse a string and receiving an AST, I am encountering an error when logging the AST by using the type of obj.prop. However, it works when using the type of obj['prop'] import { parse } from "@babel/parser&qu ...

The blank screen mystery: ionic and Google maps integration not playing nice

I've been struggling to integrate Google Maps into my web application. Unfortunately, all I see is a blank screen with no errors. Here's the current code snippet that I have. It seems like there might be an issue with the mapElement variable, but ...

When you sign up for the service, you might receive null values in return

I am currently in the process of subscribing to a service that needs access to the REST back-end using the specified object. export class Country { iso: String; iso3: String; name: String; niceName: String; numCode: number; phoneC ...

The 'setState' property is not found on the 'Window' type

I am encountering an issue with the code snippet in my index.tsx file let state = {}; window.setState = (changes: any) => { state = Object.assign({}, state, changes); ReactDOM.render(<App {...state} />, document.getElementById("root")); ...

Is it impossible to extend a Typescript class with an overriding method that uses a different parameter?

I am currently working on a Typescript MVC app and encountering an issue. When I try to extend my BaseController and override the ajaxMethod with different parameters, my transpiler throws an error. Any help would be appreciated. Below is the code snippet ...

The call stack has surpassed the limit while utilizing the latest TypeScript-enabled update of ReactJS

I am currently using the latest version of ReactJS with TypeScript support, along with Redux-orm. However, I am encountering an issue when trying to insert a value into the store - "Maximum call stack size exceeded". This problem does not occur when using ...