ChatGPT解决这个技术问题 Extra ChatGPT

Get keys of a Typescript interface as array of strings

I've a lot of tables in Lovefield and their respective Interfaces for what columns they have.

Example:

export interface IMyTable {
  id: number;
  title: string;
  createdAt: Date;
  isDeleted: boolean;
}

I'd like to have the property names of this interface in an array like this:

const IMyTable = ["id", "title", "createdAt", "isDeleted"];

I cannot make an object/array based on the interface IMyTable directly which should do the trick because I'd be getting the interface names of the tables dynamically. Hence I need to iterate over these properties in the interface and get an array out of it.

How do I achieve this result?

@andnik Marked answers aren't always the best or correct answers but SELECTED answers that work for the OP. None of the answers worked for me when I asked this question. I haven't gone in such details afterward so please feel free to try these answers and upvote them so that other's can understand what's the most used answer. Thanks.
This answer is the most correct in my opinion, unfortunately there's not easier way as mentioned: stackoverflow.com/questions/43909566/…

E
Eduardo Cuomo

As of TypeScript 2.3 (or should I say 2.4, as in 2.3 this feature contains a bug which has been fixed in typescript@2.4-dev), you can create a custom transformer to achieve what you want to do.

Actually, I have already created such a custom transformer, which enables the following.

https://github.com/kimamula/ts-transformer-keys

import { keys } from 'ts-transformer-keys';

interface Props {
  id: string;
  name: string;
  age: number;
}
const keysOfProps = keys<Props>();

console.log(keysOfProps); // ['id', 'name', 'age']

Unfortunately, custom transformers are currently not so easy to use. You have to use them with the TypeScript transformation API instead of executing tsc command. There is an issue requesting a plugin support for custom transformers.


Thanks for your response, i already saw and installed this custom transformer yesterday but since this uses typescript 2.4, this of no use to me as of now.
Hi, this library serves exactly my requirement too, however, I am getting ts_transformer_keys_1.keys is not a function when i follow the exact steps in the documentation. is there a workaround this?
Neat! Do you think it can be extended to take a dynamic type parameter (note 2 in the readme)?
Unfortunately, the package is broken, whatever I do I am always getting ts_transformer_keys_1.keys is not a function
This package is broken using Next.js with ts_transformer_keys_1.keys is not a function. Will upvote if this ever gets fixed.
n
nzz

Maybe it's too late, but in version 2.1 of TypeScript you can use keyof to get the type like this:

interface Person {
    name: string;
    age: number;
    location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // "length" | "push" | "pop" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string

Source: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#keyof-and-lookup-types


Thanks for the answer but not sure if it helps someone to use statically created Types from interface. IMHO, we can use interfaces/types interchangeably in most of the cases. Plus this would require manual creation of types for multiple interfaces. However the solution looks good if someone just needs to get types out of an interface.
I downvoted because this does not solve the question as stated. The goal is to get a list of string[] out of a type; not to get the key-type with keyof MyType.
I'm upvoting because I was looking for this answer and this is the first result on google search for "typescript keys of interface"
type K2 = (keyof Person)[] did not compile forme @AndreiSirotin. Any way to get the array of strings?
@CharlesCapps type K2 = (keyof Person)[] is still a type, not an array.
M
Maciek Wawro

The following requires you to list the keys on your own, but at least TypeScript will enforce IUserProfile and IUserProfileKeys have the exact same keys (Required<T> was added in TypeScript 2.8):

export interface IUserProfile  {
  id: string;
  name: string;
};
type KeysEnum<T> = { [P in keyof Required<T>]: true };
const IUserProfileKeys: KeysEnum<IUserProfile> = {
  id: true,
  name: true,
};

Pretty cool trick. Now it's easy to enforce implementing all keys of IUserProfile and would be easy to extract them from the const IUserProfileKeys. This is exactly what I've been looking for. No need to convert all my interfaces to classes now.
I downvoted as agin it is not "interface as array of strings" that I want to get from type or interface. I do not want to get type, I know how to do it. I think it is shortly speeking, how to convert type to variable.
That's kind of halfway there. A type can be created from an object, but an object cannot be created from a type.
A
Aidin

I faced a similar problem: I had a giant list of properties that I wanted to have both as an interface (compile-time), and an object (run-time) out of it.

NOTE: I didn't want to write (type with keyboard) the properties twice! DRY.

One thing to note here is, interfaces are enforced types at compile-time, while objects are mostly run-time. (Source)

As @derek mentioned in another answer, the common denominator of interface and object can be a class that serves both a type and a value.

So, TL;DR, the following piece of code should satisfy the needs:

class MyTableClass {
    // list the propeties here, ONLY WRITTEN ONCE
    id = "";
    title = "";
    isDeleted = false;
}

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// This is the pure interface version, to be used/exported
interface IMyTable extends MyTableClass { };

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Props type as an array, to be exported
type MyTablePropsArray = Array<keyof IMyTable>;

// Props array itself!
const propsArray: MyTablePropsArray =
    Object.keys(new MyTableClass()) as MyTablePropsArray;

console.log(propsArray); // prints out  ["id", "title", "isDeleted"]


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Example of creating a pure instance as an object
const tableInstance: MyTableClass = { // works properly!
    id: "3",
    title: "hi",
    isDeleted: false,
};

(Here is the above code in Typescript Playground to play more)

PS. If you don't want to assign initial values to the properties in the class, and stay with the type, you can do the constructor trick:

class MyTableClass {
    // list the propeties here, ONLY WRITTEN ONCE
    constructor(
        readonly id?: string,
        readonly title?: string,
        readonly isDeleted?: boolean,
    ) {}
}

console.log(Object.keys(new MyTableClass()));  // prints out  ["id", "title", "isDeleted"] 

Constructor Trick in TypeScript Playground.


The propsArray is only accessible when you initialized the keys though.
In my understanding a value is initialized when it has any value. Your "constructor trick" is misleading because you can't just replace the MyTableClass with the latter one and expect to receive keys in the propsArray as uninitialized vars and types are stripped at runtime. You always have to supply them with some kind of default value. I've found that initializing them with undefined is the best approach.
@Aidin thank you for your solution. I'm also wondering if I can avoid the initialisation of the parameters. If I use the constructor trick I cant create an interface anymore that extends MyTableClass .. your constructor trick in typescript playground link is empty though
@Flion, thanks for noticing it. I just updated the playground link for the constructor trick. See if it works now.
@MichaSchwab I believe that can be a separate question. In short, TypeScript is a compiler that turns your TypeScript code into JavaScript; and then it's the JavaScript that runs by Node/Browser at runtime. So, expecting a compile type thing (TypeScript type), find its way into runtime is kinda wrong in terms of the way of thinking. You can, however, use vanilla JavaScript's typeof operator at your convenience for RunTime type checking.
f
ford04

Safe variants

Creating an array or tuple of keys from an interface with safety compile-time checks requires a bit of creativity. Types are erased at run-time and object types (unordered, named) cannot be converted to tuple types (ordered, unnamed) without resorting to non-supported techniques.

Comparison to other answers

The here proposed variants all consider/trigger a compile error in case of duplicate or missing tuple items given a reference object type like IMyTable. For example declaring an array type of (keyof IMyTable)[] cannot catch these errors.

In addition, they don't require a specific library (last variant uses ts-morph, which I would consider a generic compiler wrapper), emit a tuple type as opposed to an object (only first solution creates an array) or wide array type (compare to these answers) and lastly don't need classes.

Variant 1: Simple typed array

// Record type ensures, we have no double or missing keys, values can be neglected
function createKeys(keyRecord: Record<keyof IMyTable, any>): (keyof IMyTable)[] {
  return Object.keys(keyRecord) as any
}

const keys = createKeys({ isDeleted: 1, createdAt: 1, title: 1, id: 1 })
// const keys: ("id" | "title" | "createdAt" | "isDeleted")[]

+ easiest +- manual with auto-completion - array, no tuple

Playground

If you don't like creating a record, take a look at this alternative with Set and assertion types.

Variant 2: Tuple with helper function

function createKeys<T extends readonly (keyof IMyTable)[] | [keyof IMyTable]>(
    t: T & CheckMissing<T, IMyTable> & CheckDuplicate<T>): T {
    return t
}

+ tuple +- manual with auto-completion +- more advanced, complex types

Playground

Explanation

createKeys does compile-time checks by merging the function parameter type with additional assertion types, that emit an error for not suitable input. (keyof IMyTable)[] | [keyof IMyTable] is a "black magic" way to force inference of a tuple instead of an array from the callee side. Alternatively, you can use const assertions / as const from caller side.

CheckMissing checks, if T misses keys from U:

type CheckMissing<T extends readonly any[], U extends Record<string, any>> = {
    [K in keyof U]: K extends T[number] ? never : K
}[keyof U] extends never ? T : T & "Error: missing keys"

type T1 = CheckMissing<["p1"], {p1:any, p2:any}> //["p1"] & "Error: missing keys"
type T2 = CheckMissing<["p1", "p2"], { p1: any, p2: any }> // ["p1", "p2"]

Note: T & "Error: missing keys" is just for nice IDE errors. You could also write never. CheckDuplicates checks double tuple items:

type CheckDuplicate<T extends readonly any[]> = {
    [P1 in keyof T]: "_flag_" extends
    { [P2 in keyof T]: P2 extends P1 ? never :
        T[P2] extends T[P1] ? "_flag_" : never }[keyof T] ?
    [T[P1], "Error: duplicate"] : T[P1]
}

type T3 = CheckDuplicate<[1, 2, 3]> // [1, 2, 3]
type T4 = CheckDuplicate<[1, 2, 1]> 
// [[1, "Error: duplicate"], 2, [1, "Error: duplicate"]]

Note: More infos on unique item checks in tuples are in this post. With TS 4.1, we also can name missing keys in the error string - take a look at this Playground.

Variant 3: Recursive type

With version 4.1, TypeScript officially supports conditional recursive types, which can be potentially used here as well. Though, the type computation is expensive due to combinatory complexity - performance degrades massively for more than 5-6 items. I list this alternative for completeness (Playground):

type Prepend<T, U extends any[]> = [T, ...U] // TS 4.0 variadic tuples

type Keys<T extends Record<string, any>> = Keys_<T, []>
type Keys_<T extends Record<string, any>, U extends PropertyKey[]> =
  {
    [P in keyof T]: {} extends Omit<T, P> ? [P] : Prepend<P, Keys_<Omit<T, P>, U>>
  }[keyof T]

const t1: Keys<IMyTable> = ["createdAt", "isDeleted", "id", "title"] // ✔

+ tuple +- manual with auto-completion + no helper function -- performance

Variant 4: Code generator / TS compiler API

ts-morph is chosen here, as it is a tad simpler wrapper alternative to the original TS compiler API. Of course, you can also use the compiler API directly. Let's look at the generator code:

// ./src/mybuildstep.ts
import {Project, VariableDeclarationKind, InterfaceDeclaration } from "ts-morph";

const project = new Project();
// source file with IMyTable interface
const sourceFile = project.addSourceFileAtPath("./src/IMyTable.ts"); 
// target file to write the keys string array to
const destFile = project.createSourceFile("./src/generated/IMyTable-keys.ts", "", {
  overwrite: true // overwrite if exists
}); 

function createKeys(node: InterfaceDeclaration) {
  const allKeys = node.getProperties().map(p => p.getName());
  destFile.addVariableStatement({
    declarationKind: VariableDeclarationKind.Const,
    declarations: [{
        name: "keys",
        initializer: writer =>
          writer.write(`${JSON.stringify(allKeys)} as const`)
    }]
  });
}

createKeys(sourceFile.getInterface("IMyTable")!);
destFile.saveSync(); // flush all changes and write to disk

After we compile and run this file with tsc && node dist/mybuildstep.js, a file ./src/generated/IMyTable-keys.ts with following content is generated:

// ./src/generated/IMyTable-keys.ts
const keys = ["id","title","createdAt","isDeleted"] as const;

+ auto-generating solution + scalable for multiple properties + no helper function + tuple - extra build-step - needs familiarity with compiler API


Looks like variant 1 doesn't do any work because I'll have to type out the whole keys in createKeys.
D
Damathryx

This should work

var IMyTable: Array<keyof IMyTable> = ["id", "title", "createdAt", "isDeleted"];

or

var IMyTable: (keyof IMyTable)[] = ["id", "title", "createdAt", "isDeleted"];

Not that it's wrong, but to be clear here you are just "enforcing the values of the array" to be correct. The developer still needs to write them down twice, manually.
While what Aidin said might be true, for some cases, this was exactly what I was looking for, for my case. Thank you.
This won't prevent key duplicates or missing keys. Like var IMyTable: Array<keyof IMyTable> = ["id", "createdAt", "id"];
For me it was also what I was looking for because I want to optionally accept the keys but nothing more than the keys defined in the interface. Didn't expect this to be default with the above code. I guess we would still need a common TS way for that. Thanks in any case for the above code!
D
Derek

Instead of defining IMyTable as in interface, try defining it as a class. In typescript you can use a class like an interface.

So for your example, define/generate your class like this:

export class IMyTable {
    constructor(
        public id = '',
        public title = '',
        public createdAt: Date = null,
        public isDeleted = false
    )
}

Use it as an interface:

export class SomeTable implements IMyTable {
    ...
}

Get keys:

const keys = Object.keys(new IMyTable());

D
Dan Def

You will need to make a class that implements your interface, instantiate it and then use Object.keys(yourObject) to get the properties.

export class YourClass implements IMyTable {
    ...
}

then

let yourObject:YourClass = new YourClass();
Object.keys(yourObject).forEach((...) => { ... });

Doesn't work in my case, i'd have to list those properties of the interface but that is not what i want? Name of interface comes dynamically and then i've to determine its properties
This produces an error (v2.8.3): Cannot extend an interface […]. Did you mean 'implements'? However, using implements instead requires manually copying the interface, which is exactly what I don't want.
@jacob sorry, it should have been implements and I have updated my answer. As @basarat has stated, interfaces don't exist at runtime so the only way is to implement it as a class.
You mean instead of an interface use a class? Unfortunately I cannot as the interface comes from a 3rd-party (@types/react). I manually copied them, but that's hardly future-proof 😪 I'm trying to dynamically bind non-lifecycle methods (which are already bound), but they're not declared on React.Component (the class).
No, I mean create a class that implements your 3rd party interface and get the properties of that class at runtime.
T
Tushar Shukla

This was a tough one! Thank you, everyone, for your assistance.

My need was to get keys of an interface as an array of strings to simplify mocha/chai scripting. Not concerned about using in the app (yet), so didn't need the ts files to be created. Thanks to ford04 for the assistance, his solution above was a huge help and it works perfectly, NO compiler hacks. Here's the modified code:

Option 2: Code generator based on TS compiler API (ts-morph)

Node Module

npm install --save-dev ts-morph

keys.ts

NOTE: this assumes all ts files are located in the root of ./src and there are no subfolders, adjust accordingly

import {
  Project,
  VariableDeclarationKind,
  InterfaceDeclaration,
} from "ts-morph";

// initName is name of the interface file below the root, ./src is considered the root
const Keys = (intName: string): string[] => {
  const project = new Project();
  const sourceFile = project.addSourceFileAtPath(`./src/${intName}.ts`);
  const node = sourceFile.getInterface(intName)!;
  const allKeys = node.getProperties().map((p) => p.getName());

  return allKeys;
};

export default Keys;

usage

import keys from "./keys";

const myKeys = keys("MyInterface") //ts file name without extension

console.log(myKeys)

c
cprcrack

Some people have suggested this, which has the benefit of being the most simple solution:

const properties: (keyof IMyTable)[] = ["id", "title", "createdAt", "isDeleted"];

However while this adds some type-safety (we cannot use non-existing properties by mistake), it is not a fully safe solution because we could miss some properties and have duplicates. So I have fixed that, this verbose solution is fully type-safe and prevents inconsistencies between the compile-time types and the run-time values of the array:

const properties: [
    keyof Pick<IMyTable, 'id'>,
    keyof Pick<IMyTable, 'title'>,
    keyof Pick<IMyTable, 'createdAt'>,
    keyof Pick<IMyTable, 'isDeleted'>
] = ['id', 'title', 'createdAt', 'isDeleted'];

Of course this is only applicable if you are fine with NOT avoiding the repetition, but at least you only have to be sure that you write all properties correctly once (on the Pick type util), and the rest will always raise an error if there's any mistake. I think it's the most robust solution among the simple, easy to understand and readable solutions.


M
Mike Warner

If you can't use a custom transformer (or prefer not to), I think the best way is what I'm about to show, which has the following advantages:

it allows for "semi-automatic" population of the array (at least in VS Code); it results in an array that TypeScript recognizes as having elements that are a union of the interface's keys; it doesn't involve performance-degrading recursive tricks.

Here is the approach:

interface Foo {
  fizz?: string;
  buzz: number;
}

const FooKeysEnum: { [K in keyof Required<Foo>]: K } = {
  fizz: 'fizz',
  buzz: 'buzz',
};

const FooKeys = Object.values(FooKeysEnum);

The "semi-automatic" population of the array in VS Code comes from the fact that when FooKeysEnum has a red underline because it's missing properties, you can hover over it and select "Add missing properties" from the "Quick Fix" menu. (This benefit is shared by other approaches already shown in this thread, but I don't think anyone had mentioned it yet. ETA: I was mistaken here; auto-completion has been mentioned elsewhere in the thread.)

Finally, by using Object.values() instead of Object.keys() to create the array, you get TypeScript to recognize that FooKeys has the type ("fizz" | "buzz")[]. It doesn't know that FooKeys[0] is "fizz" and that FooKeys[1] is "buzz", but still, better than the string[] you get with Object.keys().

EDIT:

In VS Code, you can also set up a keyboard shortcut in keybindings.json for executing a "Quick Fix," which makes it even quicker to trigger Add missing properties. Would look something like this:

{
  "key": "shift+cmd+a",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "quickfix",
    "apply": "ifSingle"
  }
}

Then if something's got a red underline, you can click it and use the keyboard-shortcut, and if there's only one quick-fix option available then it will run. Would be great if there were a way to target specific quick-fixes, and even better if it could be done automatically on file-save, but I don't think that's possible at the time of writing.


W
Wai Ha Lee

Can't. Interfaces don't exist at runtime.

A workaround:

Create a variable of the type and use Object.keys on it 🌹


Do you mean like this: var abc: IMyTable = {}; Object.keys(abc).forEach((key) => {console.log(key)});
Nope, because that object has no keys on it. An interface is something that TypeScript uses but evaporates in the JavaScript, so there's no information left to inform any "reflection" or "interspection". All JavaScript knows is that there's an empty object literal. Your only hope is to wait for (or request that) TypeScript includes a way to generate an array or object with all the keys in the interface into the source code. Or, as Dan Def says, if you can use a class, you will have the keys defined in the form of properties in every instance..
If this does not work, why there are upvotes on this answer?
downvote reason: no mention that it does not work for nullable values
It's ultimately not a great solution because you have to supply values. Probably better off just keeping a list of keys.
B
Brillian Andrie Nugroho Wiguno
// declarations.d.ts
export interface IMyTable {
      id: number;
      title: string;
      createdAt: Date;
      isDeleted: boolean
}
declare var Tes: IMyTable;
// call in annother page
console.log(Tes.id);

This code will not work as the typescript syntax is not available on run-time. If you check this code on typescript playground then you'll notice that the only thing that compiles to JavaScript is console.log(Tes.id) which of course would be error 'Uncaught ReferenceError: Tes is not defined'