TypeScript and the Safety of Curried Functions

What is the safest way to type curried functions in typescript? Especially when working with the following example

interface Prop {
    <T, K extends keyof T>(name: K, object: T): T[K];
    <K>(name: K): <T>(object: T) => /* ?? */;
}

const prop: Prop = (key, object) => object[key];

const valid1 = prop('foo', { foo: 'hello' }); // string
const valid = prop('foo')({ foo: 'hello' });  // string

// `never`, since `baz` does not exist in { foo: string }
const invalid = prop('baz')({ foo: 'hello' }); // never

Answer №1

Understanding Function Overloads

function prop<T, K extends keyof T>(name: K, obj: T): T[K]
function prop<K extends PropertyKey>(name: K):
    <T extends Record<K, unknown>>(obj: T) => T[K]
function prop(name: any, obj?: any) { 
    if (obj === undefined) {
        return (obj: any) => obj[name]
    } else {
        return obj[name]
    }
}
// This function uses weak types for simplicity in implementation.
// The body of this function is not overly complex.
const valid1 = prop('foo', { foo: 'hello1' }); // string
const valid2 = prop('foo')({ foo: 'hello2' });  // string
const invalid = prop('baz')({ foo: 'hello' }); // compile error, `baz` is not a key in the object

Sample


Exploring Function Types

interface Prop {
    <T, K extends keyof T>(name: K, obj: T): T[K];
    <K extends PropertyKey>(name: K): <T extends Record<K, unknown>>(obj: T) => T[K]
}

const prop: Prop = (name: any, obj?: any) => {
    if (obj === undefined) {
        return (obj: any) => obj[name]
    } else {
        return obj[name]
    }
}
// Weak types are used here for simplicity as in the first solution.
const valid1 = prop('foo', { foo: 'hello1' }); // string
const valid2 = prop('foo')({ foo: 'hello2' });  // string
const invalid = prop('baz')({ foo: 'hello' }); // never
console.log(valid1, valid2) // hello1 hello2

Sample

Note: While similar, function overloads and function types have distinctions that may require type annotations with any. Refer to these issues for more information.

Answer №2

May seem a bit lengthy, yet accomplishes its goal:

interface CustomProp {
    <K extends PropertyKey, T extends {}>(name: K, object: T): K extends keyof T ? T[K] : undefined;
    <K extends PropertyKey>(name: K): <T extends {}>(object: T) => K extends keyof T ? T[K] : undefined;
}

declare const customProp: CustomProp;

const invalidVal = customProp('bar')({ foo: 'hello world' });
const validVal = customProp('foo')({ foo: 'hello world' });
const sLenValue = customProp('length', 'Hello World');
const arityCheck = customProp('length')((a: number, b: number, c: number) => a + b + c);

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

I require the ability to identify and capture the ID of the button (touchable opacity) that has been

When trying to delete a selected button by obtaining its specific id, I am facing an issue where after the first execution, the id of the deleted item is retained instead of the newly selected one. I am in need of a solution that allows me to retrieve the ...

Refresh React Components on the Fly (Solr)

I am relatively new to ReactJS In my React class, I have a function that is rendering multiple items: (Sample) var app = app || {}; app.Results = React.createClass({ componentDidMount: function () { }, handleUpdateEvent: function(id) ...

What is the most effective method to determine if a given string is suitable for $compile in Angular?

I am currently in the process of creating a directive that is designed to accept a "message" input which may contain HTML and nested Angular directives. In my directive's controller, I am using the following code: var compiled = $compile(message)($sc ...

What is the process of invoking a function from a different component in Vue 3?

I attempted to use the $on method and this.$root.$refs.compname_component = this;, but encountered some errors. Please see my code below: formComponent.vue <template> <div v-if="showForm"> create Form </div> </templa ...

The JSON reviver function is still not returning anything even when explicitly using the return

function _quotedText(data, config) { var pathKeys=config.customKey; console.log(pathKeys); //prints os_platform var inAuth_data=(JSON.parse(JSON.parse(JSON.parse(data["event.fields.custom_fields.inauth_device_data"])), (key, value) =& ...

An application running on Node.js/Express and hosted on Digital Ocean encounters the "Cannot get /" error message

Despite searching extensively online and sifting through numerous solutions to different scenarios, I remained unable to find a fix that resolved my issue. When attempting to run my server.js file locally, everything operates smoothly. However, upon transf ...

Customize your webpage's style to reflect your unique identity with user

Is there a way to allow users to customize the style of a webpage? I know I need multiple CSS files, but how can I implement the code that enables this customization based on user preferences? ...

Encountered an issue while executing the next build process

Every time I run npm next build, it throws an error message. Despite my efforts to search for a solution online and installing the "extract-text-webpack-plugin," the issue persists. The error being thrown is as follows: > next build (node:8136) Depre ...

The Elusive Solution: Why jQuery's .css() Method Fails

I am currently facing an issue with my code that utilizes the jQuery .css() method to modify the style of a specific DIV. Unfortunately, this approach does not work as expected. To illustrate the problem, I have provided a simplified version of my code bel ...

What exactly are AngularJS module dependencies and how do they work together?

After exploring the tutorial example provided on AngularJs's site ( here) (The main HTML appears to be quite minimal with only ng-view and ng-app=phonecatApp included) Within the app.js file, we find: var phonecatApp = angular.module('phoneca ...

Dynamically populate content on render in Vue.js based on the vue.router parameters

Can anyone help me understand why I'm receiving unexpected results? I am using v2 vue.js. In my project, I have a single file component for a Vue component. The component is supposed to render data imported from "excerciseModules" in JSON format. Th ...

Hover over two different divs with JQuery

I have a situation where I have two HTML table rows. When I hover over the first row, I want to display the second row. However, once the mouse leaves both rows, the second row should be hidden. Is there a way to achieve this using JQuery? <tr class=" ...

Implementing JavaScript logic to proceed to the following array within a 3D array once a specific condition is met

I'm currently tackling a challenge that requires me to obtain a specific number using a given 3D array. This array consists of 2D arrays, each containing the same number repeated x times. The parent array is sorted from largest to smallest. Here&apos ...

What is the best method for linking an HTML file to CSS, javascript, and image files?

I need assistance with running an HTML file along with its source files that I downloaded from the server. The HTML file is located in NSCachesDirectory and here is the code snippet I am using. Can someone please help me figure this out? NSArray *paths ...

The D3.js text element is failing to show the output of a function

I'm having an issue with my chart where the function is being displayed instead of the actual value. How can I make sure the return value of the function is displayed instead? The temperature values are showing up correctly. Additionally, the \n ...

Guide to counting the number of image tags within a parent div and selectively removing them starting from a specific position

My dynamic image tag <img> is generated inside a div from the database using fetching. Here is how my HTML looks: <div class='forimgbox'> <p class='palheading'>Pals</p> <img src='userpic/2232323.p ...

React - callbackFromApp function is executing only one time when clicked

Whenever I click a button within my child React module, it is meant to increment the timer and then pass back the timer in minutes and total seconds to the parent component where it will be stored as state. The issue I am facing is that when I click the b ...

Is it possible to show an image without altering the Box dimensions?

Hi there, I am currently working on designing a footer and I have encountered an issue. I want to add an image in a specific position, but when I do so, it affects the size of the box. I was wondering if there is a way to set the image as a background or b ...

Making a XMLHttpRequest/ajax request to set the Content-Type header

In my attempts, I have tested the following methods individually: Please note: The variable "url" contains an HTTPS URL and "jsonString" contains a valid JSON string. var request = new XMLHttpRequest(); try{ request.open("POST", url); request.set ...

Create an unordered Vue component object

In the data retrieved from the backend, there is an object containing various properties, one of which is the 'average' value. This object is ordered based on that value and when accessed through Postman, it appears as follows: ranking: ...