Leveraging symbols as object key type in TypeScript

Question

Leveraging symbols as object key type in TypeScript

I am attempting to create an object with a symbol as the key type, following MDN's guidance:

A symbol value may be used as an identifier for object properties [...]

However, when trying to use it as the key property type:

type obj = {
    [key: symbol | string]: string
}

I encounter the following error:

TS1023: An index signature parameter type must be either 'string' or 'number'.

even though it is possible to use it as an index type. I am working with the latest version of TypeScript (v3.7.2), and I have come across related questions:

Typescript: destructuring an object with symbols as keys (He's using an actual instance of a Symbol, I want the type symbol)
TypeScript: An index signature parameter must be a 'string' or 'number' when trying to use string | number
ES6: destructuring an object with symbols as keys (That can't be a solution - it seems kinda wrong to use an actual instance as type since every Symbol instance is unique...)

I have also consulted the typescript symbol docs, but they only demonstrate how it is used as a value, not as a type.

Example:

const obj = {} as {
    [key: number | symbol]: string // Won't work
};

const sym = Symbol('My symbol');
obj[sym] = 'Hi';

Issue on Microsoft/TypeScript

Open feature request

javascript typescript types symbols

Answer 1

Answer №1

TypeScript 4.4 introduces the ability to use symbols in index signatures:

type SymbolIndex = {
    [key: symbol | string]: string // valid syntax
}

const sym = Symbol("descr");
const t1: SymbolIndex = {
    "foo": "bar",
    [Symbol.iterator]: "qux",
    sym: "sym"
};

// all values accessed are of type string
t1.foo 
t1.sym 
t1[Symbol.iterator]
t1["oh"]

Playground

In previous versions, defining SymbolIndex would result in an error:

An index signature parameter type must be either 'string' or 'number'.(1023)

Different Approach

If you simply need an object type with symbols without an index signature, it can be achieved using current TypeScript features:

const sym = Symbol() // declared as constant 
type O = {
    foo: string
    [Symbol.iterator]: string
    [sym]: number
}

let o: O = { [sym] : 3, [Symbol.iterator]: "bar", foo: "qux"}

let { [sym]: symVal } = o

Playground

Answer 2

TypeScript 4.4 introduces the ability to use symbols in index signatures:

type SymbolIndex = {
    [key: symbol | string]: string // valid syntax
}

const sym = Symbol("descr");
const t1: SymbolIndex = {
    "foo": "bar",
    [Symbol.iterator]: "qux",
    sym: "sym"
};

// all values accessed are of type string
t1.foo 
t1.sym 
t1[Symbol.iterator]
t1["oh"]

Playground

In previous versions, defining SymbolIndex would result in an error:

An index signature parameter type must be either 'string' or 'number'.(1023)

Different Approach

If you simply need an object type with symbols without an index signature, it can be achieved using current TypeScript features:

const sym = Symbol() // declared as constant 
type O = {
    foo: string
    [Symbol.iterator]: string
    [sym]: number
}

let o: O = { [sym] : 3, [Symbol.iterator]: "bar", foo: "qux"}

let { [sym]: symVal } = o

Playground

Answer 3

Answer №2

Currently, TypeScript does not support using symbols as keys directly. However, if you need to work with APIs that specifically require or prefer symbol keys, there is a workaround available:

// To prevent passing regular maps to custom functions
type SymbolMapTag = { readonly symbol: unique symbol }

type SymbolMap = SymbolMapTag & {
    [Key in string | number | symbol]: string;
}

function set_symbol<T extends SymbolMap, TSym extends symbol>
(target: T, sym: TSym, value: T[TSym]) {
    target[sym] = value;
}

function get_symbol<T extends SymbolMap, TSym extends symbol>
(target: T, sym: TSym): T[TSym] {
    return target[sym];
}

const symbol_map = {} as SymbolMap;

const sym = Symbol('My symbol');
set_symbol(symbol_map, sym, "hi");
get_symbol(symbol_map, sym); // returns 'hi'


type NonSymbolMap = {
    [Key in string | number]: string;
}

const non_symbol_map = {} as NonSymbolMap;
set_symbol(non_symbol_map, sym, "hi"); // error
get_symbol(non_symbol_map, sym); // error

Answer 4

Currently, TypeScript does not support using symbols as keys directly. However, if you need to work with APIs that specifically require or prefer symbol keys, there is a workaround available:

// To prevent passing regular maps to custom functions
type SymbolMapTag = { readonly symbol: unique symbol }

type SymbolMap = SymbolMapTag & {
    [Key in string | number | symbol]: string;
}

function set_symbol<T extends SymbolMap, TSym extends symbol>
(target: T, sym: TSym, value: T[TSym]) {
    target[sym] = value;
}

function get_symbol<T extends SymbolMap, TSym extends symbol>
(target: T, sym: TSym): T[TSym] {
    return target[sym];
}

const symbol_map = {} as SymbolMap;

const sym = Symbol('My symbol');
set_symbol(symbol_map, sym, "hi");
get_symbol(symbol_map, sym); // returns 'hi'


type NonSymbolMap = {
    [Key in string | number]: string;
}

const non_symbol_map = {} as NonSymbolMap;
set_symbol(non_symbol_map, sym, "hi"); // error
get_symbol(non_symbol_map, sym); // error

Leveraging symbols as object key type in TypeScript

Answer №1

Different Approach

Answer №2

Similar questions

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

JQuery .click Event doesn't center elements even with transform-origin adjustment

Res.redirect() function does not redirect the browser URL as expected when triggered by a request made through a frontend fetch() call

Using regex in javascript to strip HTML tags

Having trouble with my findIndex function in Node.js while working with a mongo DB database

JSON.stringify not behaving as anticipated

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

What could be causing the issue of rows being undefined?

Connecting Angular directive to a controller

The Angular framework may have trouble detecting changes made from global window functions

Executing the JavaScript function on a batch of 6 IDs at once (should return every 6 calls?)

Encountering an issue with the autocomplete feature in the jQuery library where it is stating "this.source is not a function."

Can a `react` app with `mysql` be uploaded to `github`?

Testing vue-router's useRoute() function in Jest tests on Vue 3

The video rendered with fluent-ffmpeg appears to have an elongated image

Improper headings can prevent Chrome from continuously playing HTML5 audio

Determining the exact number of immediate descendants within a ul element, while disregarding any script elements

Is it possible to execute MongoDB queries from an AS3 client?

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

Automatically navigate to the bottom of the page by applying the overflow auto feature