TypeScript: augmenting built-in types

Types are ‘open ended’ in TypeScript, so you can just write: interface Array { shuffle: () => any; // <– Whatever signature you want. } And then the type is expanded to include the new function (and you can assign a function matching the signature to it). Note however that extending the built-in types (those … Read more

Typescript string dot notation of nested object

UPDATE for TS4.1. String concatenation can now be represented at the type level through template string types, implemented in microsoft/TypeScript#40336. Now you can take an object and get its dotted paths right in the type system. Imagine languageObject is this: const languageObject = { viewName: { componentName: { title: ‘translated title’ } }, anotherName: “thisString”, … Read more

Access Meta-Annotation inside Class (TypeScript)

With the new angular version, you should use the native Reflect object. No IE11 support though: const annotations = Reflect.getOwnPropertyDescriptor(MyModule, ‘__annotations__’).value; Read Jeff Fairley’s answer below on what to do with the data after that You can see an annotation/decorator as a normal function call. To this function the ‘Class/Function’ object (not instance) gets send … Read more

Typescript assert-like type guard

Typescript 3.7 adds assertions in control flow analysis. An asserts return type predicate indicates that the function returns only when the assertion holds and otherwise throws an exception Hacks on consumer side are not needed anymore. interface Foo { bar(): void } declare function getFoo(): Foo | undefined; function assert(value: unknown): asserts value { if … Read more

Narrowing a return type from a generic, discriminated union in TypeScript

Like many good solutions in programming, you achieve this by adding a layer of indirection. Specifically, what we can do here is add a table between action tags (i.e. “Example” and “Another”) and their respective payloads. type ActionPayloadTable = { “Example”: { example: true }, “Another”: { another: true }, } then what we can … Read more

Modules vs. Namespaces: What is the correct way to organize a large typescript project?

tl;dr: Do not choose the past. Choose the future: Modules. In early drafts of the ES6 modules specification, there was an inline modules notion, which then has been eliminated in September 2013. However, this notion was already implemented by the TypeScript team, in 2012, with the first beta versions of the language: it was internal … Read more

How to place a dynamic component in a container

You can get the ViewContainerRef of the current component by or from an element in the view of the current component @Component({ selector: ‘…’, directives: [OtherComponent, FooComponent], template: ` <other-component></other-component> <foo-component #foo></foo-component> <div #div></div>` }) export class SomeComponent { // `ViewContainerRef` from an element in the view @ViewChild(OtherComponent, {read: ViewContainerRef}) other; @ViewChild(‘foo’, {read: ViewContainerRef}) foo; … Read more