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?
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.
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
string[]
out of a type; not to get the key-type with keyof MyType
.
type K2 = (keyof Person)[]
is still a type, not an array.
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,
};
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 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.
propsArray
is only accessible when you initialized the keys though.
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.
typeof
operator at your convenience for RunTime type checking.
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
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
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
This should work
var IMyTable: Array<keyof IMyTable> = ["id", "title", "createdAt", "isDeleted"];
or
var IMyTable: (keyof IMyTable)[] = ["id", "title", "createdAt", "isDeleted"];
var IMyTable: Array<keyof IMyTable> = ["id", "createdAt", "id"];
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());
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((...) => { ... });
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.
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.
@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).
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)
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.
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.
Can't. Interfaces don't exist at runtime.
A workaround:
Create a variable of the type and use Object.keys
on it 🌹
var abc: IMyTable = {}; Object.keys(abc).forEach((key) => {console.log(key)});
// 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);
console.log(Tes.id)
which of course would be error 'Uncaught ReferenceError: Tes is not defined'
Success story sharing
ts_transformer_keys_1.keys is not a function
when i follow the exact steps in the documentation. is there a workaround this?ts_transformer_keys_1.keys is not a function
ts_transformer_keys_1.keys is not a function
. Will upvote if this ever gets fixed.