Demystify typescript keyword type and typeof

In typescript, keyword 'type' is used to alias existing types or anonymous types. This is typescript feature, and it has nothing to do with JavaScript. While const/let are used to declare variable in JavaScript.

class Person {
   constructor(public name: string) {}
}


type PersonAlias = Person; // Person is used as a type
const Person2 = Person;    // Person is used as a value

type PersonAlias2 = Person2; // error, Person2 is a value, not a type
type PersonAlias3 = PersonAlias; // ok, PersonAlias is a type

Because you can not assign value to a type, typescript introduced a keyword 'typeof', which can convert a value into a type. But don't be confused with JavaScript keyword 'typeof', which convert a value into a string value, such as "function", "string", etc.

const p = new Person('john');
type PersonAlias4 = typeof p; // typescript type
const typeName = typeof p; // javascript vlaue: "object"

In the following code, the Person class can be used as a typescript type and a javascript vlaue. If it is used as value, it is a bit confusing.

type PersonClass = typeof Person; // Person is used as javascript vlaue
type PersonAliase4 = Person;  // Person is used as a typescript type

let personInstance: PersonAliase4 = new Person('john'); // ok

let personClass: PersonClass = personInstance; // error; type of "Person" 
// is not the type of "typeof Person" :)

personClass = class { constructor(public name: string) { } }; //ok

You can test the code here

When the change detector of OnPush component of Angular runs?

There are lots posts about how change detector works in Angualr. But I can't find a simple answer about when the change detector runs in OnPush components. I assume you understand how change detection works. If not , here is what you need to know. Angular modify DOM api, if an api trigger an exection of angular function, angular change detection cycle kick off. An angular application is a component tree. Each component will has its own change detector. The change detection start from the root components' change detector, all the way to the bottom component's change detector, asking them to detect change inside their components. By default, all change detectors will detect accordingly, unless the a change detector is manually detached by developer or it belongs to an OnPush component.

Here is a diagram shows when the change detector of OnPush component of Angular runs.

OnPush component does not change what can trigger change detection cycle. It does not when change detection cycle kicks off. It does not change how its parent's change detector runs, and it does not change how its children detector runs. It changes when the its and only its change detector runs. If you are an author of a component, and the component use @Input properties, and you will see there will be lots instance of this component in your application, and also there are lots binding in your component, it will make the performance better to mark the change detection strategy "OnPush" . Otherwise, the default change detection stragegy works just fine.