TypeScript 2.2 adds support for the ECMAScript 2015 mixin class pattern (see MDN Mixin description and “Real” Mixins with JavaScript Classes for more details) as well as rules for combining mixin construct signatures with regular construct signatures in intersection types.
\nA mixin constructor type refers to a type that has a single construct signature with a single rest argument of type any[] and an object-like return type. For example, given an object-like type X, new (...args: any[]) => X is a mixin constructor type with an instance type X.
A mixin class is a class declaration or expression that extends an expression of a type parameter type. The following rules apply to mixin class declarations:
extends expression must be constrained to a mixin constructor type.any[] and must use the spread operator to pass those parameters as arguments in a super(...args) call.Given an expression Base of a parametric type T with a constraint X, a mixin class class C extends Base {...} is processed as if Base had type X and the resulting type is the intersection typeof C & T.\nIn other words, a mixin class is represented as an intersection between the mixin class constructor type and the parametric base class constructor type.
When obtaining the construct signatures of an intersection type that contains mixin constructor types, the mixin construct signatures are discarded and their instance types are mixed into the return types of the other construct signatures in the intersection type.\nFor example, the intersection type { new(...args: any[]) => A } & { new(s: string) => B } has a single construct signature new(s: string) => A & B.
\ntsclass Point {\n constructor(public x: number, public y: number) {}\n}\n\nclass Person {\n constructor(public name: string) {}\n}\n\ntype Constructor<T> = new(...args: any[]) => T;\n\nfunction Tagged<T extends Constructor<{}>>(Base: T) {\n return class extends Base {\n _tag: string;\n constructor(...args: any[]) {\n super(...args);\n this._tag = \"\";\n }\n }\n}\n\nconst TaggedPoint = Tagged(Point);\n\nlet point = new TaggedPoint(10, 20);\npoint._tag = \"hello\";\n\nclass Customer extends Tagged(Person) {\n accountBalance: number;\n}\n\nlet customer = new Customer(\"Joe\");\ncustomer._tag = \"test\";\ncustomer.accountBalance = 0;
Mixin classes can constrain the types of classes they can mix into by specifying a construct signature return type in the constraint for the type parameter.\nFor example, the following WithLocation function implements a subclass factory that adds a getLocation method to any class that satisfies the Point interface (i.e. that has x and y properties of type number).
\ntsinterface Point {\n x: number;\n y: number;\n}\n\nconst WithLocation = <T extends Constructor<Point>>(Base: T) =>\n class extends Base {\n getLocation(): [number, number] {\n return [this.x, this.y];\n }\n }
object typeTypeScript did not have a type that represents the non-primitive type, i.e. any thing that is not number, string, boolean, symbol, null, or undefined. Enter the new object type.
With object type, APIs like Object.create can be better represented. For example:
\ntsdeclare function create(o: object | null): void;\n\ncreate({ prop: 0 }); // OK\ncreate(null); // OK\n\ncreate(42); // Error\ncreate(\"string\"); // Error\ncreate(false); // Error\ncreate(undefined); // Error
new.targetThe new.target meta-property is new syntax introduced in ES2015.\nWhen an instance of a constructor is created via new, the value of new.target is set to be a reference to the constructor function initially used to allocate the instance.\nIf a function is called rather than constructed via new, new.target is set to undefined.
new.target comes in handy when Object.setPrototypeOf or __proto__ needs to be set in a class constructor. One such use case is inheriting from Error in NodeJS v4 and higher.
\ntsclass CustomError extends Error {\n constructor(message?: string) {\n super(message); // 'Error' breaks prototype chain here\n Object.setPrototypeOf(this, new.target.prototype); // restore prototype chain\n }\n}
This results in the generated JS
\n\njsvar CustomError = (function (_super) {\n __extends(CustomError, _super);\n function CustomError() {\n var _newTarget = this.constructor;\n var _this = _super.apply(this, arguments); // 'Error' breaks prototype chain here\n _this.__proto__ = _newTarget.prototype; // restore prototype chain\n return _this;\n }\n return CustomError;\n})(Error);
new.target also comes in handy for writing constructable functions, for example:
\ntsfunction f() {\n if (new.target) { /* called via 'new' */ }\n}
Which translates to:
\n\njsfunction f() {\n var _newTarget = this && this instanceof f ? this.constructor : void 0;\n if (_newTarget) { /* called via 'new' */ }\n}
null/undefined in operands of expressionsTypeScript 2.2 improves checking of nullable operands in expressions. Specifically, these are now flagged as errors:
\n+ operator is nullable, and neither operand is of type any or string.-, *, **, /, %, <<, >>, >>>, &, |, or ^ operator is nullable.<, >, <=, >=, or in operator is nullable.instanceof operator is nullable.+, -, ~, ++, or -- unary operator is nullable.An operand is considered nullable if the type of the operand is null or undefined or a union type that includes null or undefined.\nNote that the union type case only only occurs in --strictNullChecks mode because null and undefined disappear from unions in classic type checking mode.
Types with a string index signature can be indexed using the [] notation, but were not allowed to use the ..\nStarting with TypeScript 2.2 using either should be allowed.
\ntsinterface StringMap<T> {\n [x: string]: T;\n}\n\nconst map: StringMap<number>;\n\nmap[\"prop1\"] = 1;\nmap.prop2 = 2;
This only apply to types with an explicit string index signature.\nIt is still an error to access unknown properties on a type using . notation.
TypeScript 2.2 adds support for using spread on a JSX element children.\nPlease see facebook/jsx#57 for more details.
\n\ntsfunction Todo(prop: { key: number, todo: string }) {\n return <div>{prop.key.toString() + prop.todo}</div>;\n}\n\nfunction TodoList({ todos }: TodoListProps) {\n return <div>\n {...todos.map(todo => <Todo key={todo.id} todo={todo.todo} />)}\n </div>;\n}\n\nlet x: TodoListProps;\n\n<TodoList {...x} />
jsx: react-nativeReact-native build pipeline expects all files to have a .js extensions even if the file contains JSX syntax.\nThe new --jsx value react-native will persevere the JSX syntax in the output file, but give it a .js extension.