The template in Typescript is constrained

Question

The template in Typescript is constrained

Upon creating the HashMap interface:

export interface HashMap<K, V> {
    [name: K]: V;
}

I envisioned utilizing it in this manner:

const map: HashMap<String, String>;

Unfortunately, I encountered an error indicating that name must only be of type string or number.

How can I enforce constraints on the K template here?

javascript typescript

Answer 1

Answer №1

When it comes to data types, avoid using primitive type names in uppercase. Instead of String, opt for string.

In TypeScript, the parameter type for an index signature must be either string, number, or symbol. The usage of symbol is limited to --target es2015 or higher.

If you want to restrict the key type to a subset of string values, a type alias declaration should be used instead of an interface.

export type HashMap<K extends string, V> = {
  [P in K]?: V;
}

The syntax [P in K] iterates through each string literal type within the specified set of strings represented by K.

This approach is beneficial as it allows us to limit the contents of the map by defining a union type with string literals.

For instance:

const map: HashMap<'firstName' | 'lastName', string> = {
  firstName: 'John', // OK
  nickname: 'Johnny' // Error
};

Essentially, the key type should be a string, but it can be constrained to specific strings or a defined set of strings using a union type.

In practice, the string union type often depends on another type.

For example:

interface Item {
  name: string;
  id: number;
}


interface PropertyMetadata {
  kind: 'data' | 'accessor';
}

type LazyItem = {
  [P in keyof Item]: PropertyDescriptor
};

keyof is a Type Operator that generates a type consisting of the property keys as string unions.

If utilizing an arbitrary key type bound by certain constraints, consider using an ES2015 Map object. Before the introduction of this type in JavaScript, achieving this mapping cleanly was challenging and string was predominantly used as a key type.

By leveraging an ES2015 map alongside TypeScript generics, one can approximate the desired functionality.

For example:

interface Category {
  name: string;
  products: Product[];
}

interface Product {
  name: string;
  category: Category;
}

const categoriesToProducts = new Map<Category, Product[]>();

declare function getProducts(): Product[];

const products = getProducts();

products.forEach(product => {
  const mapped = categoriesToProducts.get(product.category);
  if (mapped) {
    mapped.push(product);
  } 
  else {
    categoriesToProducts.add(product.category, [product]);
  }
});

Answer 2

When it comes to data types, avoid using primitive type names in uppercase. Instead of String, opt for string.

In TypeScript, the parameter type for an index signature must be either string, number, or symbol. The usage of symbol is limited to --target es2015 or higher.

If you want to restrict the key type to a subset of string values, a type alias declaration should be used instead of an interface.

export type HashMap<K extends string, V> = {
  [P in K]?: V;
}

The syntax [P in K] iterates through each string literal type within the specified set of strings represented by K.

This approach is beneficial as it allows us to limit the contents of the map by defining a union type with string literals.

For instance:

const map: HashMap<'firstName' | 'lastName', string> = {
  firstName: 'John', // OK
  nickname: 'Johnny' // Error
};

Essentially, the key type should be a string, but it can be constrained to specific strings or a defined set of strings using a union type.

In practice, the string union type often depends on another type.

For example:

interface Item {
  name: string;
  id: number;
}


interface PropertyMetadata {
  kind: 'data' | 'accessor';
}

type LazyItem = {
  [P in keyof Item]: PropertyDescriptor
};

keyof is a Type Operator that generates a type consisting of the property keys as string unions.

If utilizing an arbitrary key type bound by certain constraints, consider using an ES2015 Map object. Before the introduction of this type in JavaScript, achieving this mapping cleanly was challenging and string was predominantly used as a key type.

By leveraging an ES2015 map alongside TypeScript generics, one can approximate the desired functionality.

For example:

interface Category {
  name: string;
  products: Product[];
}

interface Product {
  name: string;
  category: Category;
}

const categoriesToProducts = new Map<Category, Product[]>();

declare function getProducts(): Product[];

const products = getProducts();

products.forEach(product => {
  const mapped = categoriesToProducts.get(product.category);
  if (mapped) {
    mapped.push(product);
  } 
  else {
    categoriesToProducts.add(product.category, [product]);
  }
});

Answer 3

Answer №2

When it comes to indexable types, the usual options for keys are limited to primitive types like string and number. So, there may not be much advantage in parameterizing on them, but let's explore it anyway.

type IndexableTypes<V> = {
    [s: string]: { [n: string]: V };
    number: { [n: number]: V };
}

type SN = { [n: number]: 'number', [s: string]: string };


type HashMap<K extends string | number, V> = IndexableTypes<V>[SN[K]];

const map: HashMap<string, string> = {}; // inferred as {[n: string]: string; }
const map1: HashMap<number, string> = {}; // inferred as  {[n: number]: string;}

const map2: HashMap<number, HashMap<string, number>> = {};
// inferred as  
{[n: number]: 
  {[n: string]: number;};
}

const map4: HashMap<boolean, {}> = {};
// error: Type 'boolean' does not satisfy the constraint 'string | number'.

Alternatively, if your runtime supports it, you could simply use the es2015 Map class:

type MyMap<K extends string | number, V> = Map<K, V>

Answer 4

When it comes to indexable types, the usual options for keys are limited to primitive types like string and number. So, there may not be much advantage in parameterizing on them, but let's explore it anyway.

type IndexableTypes<V> = {
    [s: string]: { [n: string]: V };
    number: { [n: number]: V };
}

type SN = { [n: number]: 'number', [s: string]: string };


type HashMap<K extends string | number, V> = IndexableTypes<V>[SN[K]];

const map: HashMap<string, string> = {}; // inferred as {[n: string]: string; }
const map1: HashMap<number, string> = {}; // inferred as  {[n: number]: string;}

const map2: HashMap<number, HashMap<string, number>> = {};
// inferred as  
{[n: number]: 
  {[n: string]: number;};
}

const map4: HashMap<boolean, {}> = {};
// error: Type 'boolean' does not satisfy the constraint 'string | number'.

Alternatively, if your runtime supports it, you could simply use the es2015 Map class:

type MyMap<K extends string | number, V> = Map<K, V>

The template in Typescript is constrained

Answer №1

Answer №2

Similar questions

Unfortunately, CORS is preventing me from sending a POST request through AJAX

Retrieve Gravatar image using JSON data

Guide to dynamically setting the index element with ngFor in Angular

After a successful login, Angular will once again redirect the user to the login page

Supporting multiple types for matching object structures is a feature in Jest

Using GitHub Actions to automatically publish a Typescript Package: A Step-by-Step Guide

`Scrolling through a horizontal menu with no scrollbar present`

What is the best way to retrieve the value of an object based on its key?

Executing a Javascript function post AJAX page loading

Update the HTML table by changing the first cell in the first row to span multiple

Loading jQuery via JavaScript in the head section of the HTML document

The variable 'BlogPost' has already been declared within the block scope and cannot be redeclared

Having issues with templateURL not working in AngularJS routeProvider

guide on utilizing the Thingspeak API with jQuery AJAX

The variable $http request is not defined in this context

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Inaccurate Feedback on Maquest Direction Route API

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is it possible for Typescript to allow extracted interfaces while excluding properties from another interface?

What is the best way to compare keys and values in a JSON object in Lodash when one object contains additional keys?