"Removing the index from an object's type in TypeScript: A step-by-step guide

Question

"Removing the index from an object's type in TypeScript: A step-by-step guide

When using [key: string], my type will accept any key. However, I am attempting to avoid this because in certain situations, I am redefining types for properties. Take the following scenario into consideration:


interface IObject {
  [K: string]: number;
}

const base: IObject = {
  title: 0,
  age: 3
};
type StringValue<T> = { [K in keyof T]: string };  // <-- Is there a way to remove object index?

const child: StringValue<typeof base> = {
  test: "" // <-- This should not be allowed
  title: '' // <-- This is acceptable
};

typescript generics types interface typescript2.0

Answer 1

Answer №1

Unfortunately, it is not possible to achieve that because once you explicitly specify the type of Base as IObject, it loses the information about its assigned values. In other words, Base will only have the index signature and nothing else.

If your intention is to restrict Base to only have number properties while retaining the actual type of the object literal assigned to it, using variables alone won't suffice. Instead, you can utilize an additional function for this purpose. Functions offer the advantage of having type parameters that are constrained and inferred based on the provided arguments.

interface IObject {
    [K: string]: number;
}
function createObject<T extends IObject>(o: T) {
    return o;
}
const base = createObject({
    title: 0,
    age: 3
});
type StringValue<T> = { [K in keyof T]: string };  // <-- How to remove object index


const child: StringValue<typeof base> = {
    test: "", // <-- error
    title: '', // <-- this is OK
    age: ""
};

Answer 2

Unfortunately, it is not possible to achieve that because once you explicitly specify the type of Base as IObject, it loses the information about its assigned values. In other words, Base will only have the index signature and nothing else.

If your intention is to restrict Base to only have number properties while retaining the actual type of the object literal assigned to it, using variables alone won't suffice. Instead, you can utilize an additional function for this purpose. Functions offer the advantage of having type parameters that are constrained and inferred based on the provided arguments.

interface IObject {
    [K: string]: number;
}
function createObject<T extends IObject>(o: T) {
    return o;
}
const base = createObject({
    title: 0,
    age: 3
});
type StringValue<T> = { [K in keyof T]: string };  // <-- How to remove object index


const child: StringValue<typeof base> = {
    test: "", // <-- error
    title: '', // <-- this is OK
    age: ""
};

"Removing the index from an object's type in TypeScript: A step-by-step guide

Answer №1

Similar questions

What is the process of using TypeScript to import a constant exported in JavaScript?

Tips for specifying an enum as a method parameter

The element property cannot be found on the specified Element type in ANGULAR

Compiling Enum classes from Typescript to JavaScript leads to errors in export

Attempting to access a specific JSON key using Observables

When comparing TypeScript index signatures to Record<Keys, Type> return type, the focus is on handling objects with unspecified properties

Customizing MUI DataGrid: Implementing unique event listeners like `rowDragStart` or `rowDragOver`

Class for managing tabs and pages with connections between them using 2 generic data types

Showing canvas lines while dragging (using only plain JavaScript, with React.JS if needed)

When assigning a union type to an object literal, the specific type information is not preserved

Objects saved in an array are still being overwritten

The type 'any' cannot be assigned to the type 'never' as a parameter

Exploring Angular's APP_INITIALIZER: Comparing Promises and Observables

What is the best method to publish my npm package so that it can be easily accessed through JSDelivr by users?

Unable to submit form when button is clicked in Next.js/Typescript

Error in VS Code related to Vue Array Prop JSDoc TypeScript: The properties of type 'ArrayConstructor' are not found in type 'MyCustomType[]'

There is no overload that fits this call (regarding a basic array retrieved from an api)

Typescript: Error encountered. Invalid input: Non-string value provided to `ts.resolveTypeReferenceDirective`

Issue arising in Angular 7 due to the binding between the TypeScript (ts) file and HTML file for the property [min]

Click on a link to open it in the current tab with customized headers