Pick
If you need to construct a new type based on some properties of an interface you always can get the Pick
utility type.
interface MyInterface {
id: number;
name: string;
properties: string[];
}
type MyShortType = Pick<MyInterface, 'name' | 'id'>;
Now MyShortType
only have name
and id
properties extracted from MyInterface
.
Omit
One more useful transformer type as Pick
, but Omit
works to "another direction" and excludes properties from the given interface. Let's have a look at the example:
interface MyInterface {
id: number;
name: string;
properties: string[];
}
type MyShortType = Omit<MyInterface, 'name' | 'id'>;
This time MyShortType
only has properties
property, because the others are omitted from MyInterface
.
keyof
This is my favorite. Very useful for writing getters:
interface MyInterface {
id: number;
name: string;
properties: string[];
}
const myObject: MyInterface = {
id: 1,
name: 'foo',
properties: ['a', 'b', 'c']
};
function getValue(value: keyof MyInterface) {
return myObject[value];
}
getValue('id'); // 1
getValue('count') // Throws compilation error: Argument of type '"count"' is not assignable to parameter of type '"id" | "name" | "properties"'.
Record
If you tried to write types to a plain object like this, you know it looks like a mess then:
const myTypedObject: {[key: string]: MyInterface} = {
first: {...},
second: {...},
...
}
Better to achieve this by using shiny Record
type:
const myTypedObject: Record<string, MyInterface> = {
first: {...},
second: {...},
...
};
That's a bit neater to use Record rather than ugly {[key: string]: ...}
construction isn't it?
Bonus: Optional Chaining
This is a very useful feature. It is new in TypeScript since it released in 3.7. Almost every React Component has ugly code like this:
<React.Fragment>
{apiResult && apiResult.data && apiResult.data.params && apiResult.data.params.showOnline && (<div>✅ Online</div>)}
</React.Fragment>
Now you can do it like that (thanks to all the coding gods!):
<React.Fragment>
{apiResult?.data?.params?.showOnline && (<div>✅ Online</div>)}
</React.Fragment>
I hope these little snippets will help you a bit 🙃.
Top comments (2)
Great topic!!!
Some extras (:
you should remember that "?." feature is available since typescript v3.7
Record also let you describe available properties for an object, for instance:
Awesome!