What is the reason behind Pick<T, K> not generating an error when passing T as a parameter?

When creating users with a name as a parameter from the client and assigning "created" on the server, I utilize Pick<User, "name">. However, Typescript does not raise an error when a complete User object is passed to that function:

interface User {
  name: string;
  created: Date;
}

const user: User = {
  name: "Test User",
  created: new Date()
};

const createUser = (user: Pick<User, "name">): User => ({
  name: user.name,
  created: new Date()
});

const newUser1 = createUser(user); // No error
const newUser2 = createUser({
  name: "Another Test User",
  created: new Date() // Error
});

Sandbox: https://codesandbox.io/s/unruffled-wave-tewh8

I find it surprising that the first case does not throw an error. Why is this so?

Answer №1

The User type is considered a structural subtype of Pick<User, "name">. Essentially, any object of type Pick<User, "name"> must have a name property of type string, which makes it safe to pass a User where a Pick<User, "name"> is required.

In contrast, there is an error if an object has additional properties due to the restriction outlined in excess property checks. Even though both examples are type-safe, passing a User directly may more likely be unintentional, leading TypeScript to issue a warning despite allowing the same value when not passed as an object literal.

To prevent this function from accepting a parameter of type User, you can define its parameter type as something that User does not inherit:

interface UninitialisedUser {
    name: string;
    created?: undefined;
}

const createUser = (user: UninitialisedUser): User => ({
    name: user.name,
    created: new Date()
});

const newUser = createUser(user); // error

It's important to note that this approach does not completely restrict calling the function with a User object. By assigning

let temp: { name: string } = user;
, you can still call createUser(temp) without encountering a type error. While there isn't a foolproof solution for this scenario, making such calls by mistake becomes less likely.

Playground Link

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

Angular functions are executed twice upon being invoked within the html file

I decided to kick-start an Angular project, and I began by creating a simple component. However, I encountered a perplexing issue. Every time I call a function in the HTML file from the TypeScript file, it runs twice. TS: import { Component, OnInit } from ...

NodeJS TypeScript using ECMAScript as the target

When considering performance, compatibility, and scalability, which ECMAScript target is best for the TypeScript compiler to use in a NodeJS module? NodeJS does not fully support ES6 (ECMAScript 2015). Should ES6 be used or is it more beneficial to utiliz ...

Issue: App(...) is not rendering anything. This typically indicates that a return statement is missing in discord.js using react and typescript

I am struggling with an error while working on Discord OAuth2, Typescript, and React. I have tried to troubleshoot it myself but couldn't find a solution. Can someone please assist me? The issue involves being redirected constantly to the entered addr ...

Sending ngFor variable to Child Component

In the parent component known as Property-page.component.html, I am looping through a variable called propertiesArray and trying to display a list of property-card components based on it. <property-card *ngFor="let propertiesItem of propertiesArray ...

Encountering an issue with TypeScript after applying a wrapper to a Material-UI button - specifically, the error message states that the type '{ children: string; color: "light-green"; }' is lacking certain properties

I'm currently working on creating wrapped components using MUI (@material-tailwind/react) within the environment of Next.js 14. However, I've run into a typescript error specifically in the MaterialButton component. Type '{ children: string; ...

Lazy-loaded modules in Angular that contain services provided within the module

Currently, I am facing a challenge with lazy-loaded modules and services that are provided in these modules. My folder structure looks like this: app -> featureModule1 (lazy loaded) -> featureModule2 (lazy loaded) -->services --->servi ...

In JavaScript, constructors do not have access to variables

Currently, I am attempting to implement Twilio Access Token on Firebase Functions using TypeScript. export const generateTwilioToken = functions.https.onRequest((req, res) => { const twilioAccessToken = twilio.jwt.AccessToken; const envConfig = fun ...

What makes TypeScript code run successfully using `node` instead of `ts-node` by mistake?

I have created a basic node.js project using TypeScript. Here is the content of my package.json file, which lists all the packages I have installed (without including ts-node): { "name": "mydemo", "version": "1.0.0", "description": "", "main": "ind ...

Can you surpass the type declarations of a module at the local level?

Is there a way to change the appearance of a specific typescript module for those importing it? I have webpack rules that modify the exports of this module during transpile time, which is why I want to override its appearance. In my custom.d.ts file, I h ...

Ditching the subscribe(...) method in Angular by opting to return a string value instead of an

I have been tasked with exploring how to make a service call and return the final result instead of an observable. Within the service, there is a method structured like this: getToken(name: string, pass: string): string { const url = "https://localhost: ...

Unable to invoke array functions on undefined after utilizing Promise.all to generate an array within TypeScript

For more information, you can check out this post on Stack Overflow: How to use Promise.all() with Typescript In my TypeScript project, I am trying to implement Promise.all(). I have an array of promises that I pass to Promise.all(), then use .then() to ...

Issue with typing in subscription encountered in Typescript RXjs version 6.6.0

Have you attempted using the code snippet below? const data = new Data() data.subscribe({ next: (value) => {}, error: (value) => {}, complete: (value) => {}, }); Encountering this error: Compilation failed. sr ...

What is the best way to extract a property if it may be undefined?

Can anyone help with this TypeScript error I'm encountering during build time? Any suggestions would be appreciated. Error Message: TypeError: Cannot destructure property 'site' of '(intermediate value)' as it is undefined. export ...

Typescript - optional type when a generic is not given

I am hoping for optionalFields to be of type OptionalFieldsByTopic<Topic> if a generic is not provided, or else OptionalFieldsByTopic<T>. Thank you in advance for the assistance. export interface ICreateItem<T extends Topic = never> { // ...

Oops! There was an unexpected error in the authGuard: [object Object] was not caught as expected

I've been working on implementing authGuard in my app, but I keep encountering an error. Below is the guard implementation: canActivate(route: ActivatedRouteSnapshot): Observable<boolean> { /** * Returning an observable of type boolea ...

Is there a way to exclude the file type as .js when saving a file in .ts format?

I am working on importing .ts files as they are without specifying the file type as .js, for example: import {acccessRights} from "utils/accessRights". My desired outcome is to be able to import a method from another file without having to speci ...

Error in Writing Functional Components with Typescript in React

I am struggling to create a versatile functional component and encountering issues like the one shown in this https://i.stack.imgur.com/WQkKg.png: Here is the code snippet: interface IAppTable<Type> { height: number; data: Type[]; tableLayout: ...

The current data isn't being reflected in the view

I am currently using RC3 and have encountered an issue where a variable of an object does not update on the view. This problem arises when retrieving an object from Google, which can take some time. In previous versions before RC, the view would automatic ...

Encountered an error stating "Cannot find module node:fs" while using eslint-typescript-import, eslint-import-resolver-typescript,

Challenge My attempt to configure path alias in my TypeScript project was met with failure. Two errors arose during the execution of npm start: Module not found: Error: Can't resolve '~/App' in 'D:\work\workbench\templa ...

The expiration date is not considered in JWT authentication using passport-jwt

I have been working on implementing an authentication system using JWT token in Express, utilizing passport-jwt and jsonwebtoken. Everything is functioning correctly at the moment, however, I am facing an issue where the token remains valid even after its ...