JSX is an embeddable XML-like syntax.\nIt is meant to be transformed into valid JavaScript, but the semantics of that transformation are implementation-specific.\nJSX came to popularity with the React library but has since seen other applications.\nTypeScript 1.6 supports embedding, type checking, and optionally compiling JSX directly into JavaScript.
\n.tsx file extension and as operatorTypeScript 1.6 introduces a new .tsx file extension.\nThis extension does two things: it enables JSX inside of TypeScript files, and it makes the new as operator the default way to cast (removing any ambiguity between JSX expressions and the TypeScript prefix cast operator).\nFor example:
\ntsvar x = <any> foo;\n// is equivalent to:\nvar x = foo as any;
To use JSX-support with React you should use the React typings. These typings define the JSX namespace so that TypeScript can correctly check JSX expressions for React. For example:
\nts/// <reference path=\"react.d.ts\" />\n\ninterface Props {\n name: string;\n}\n\nclass MyComponent extends React.Component<Props, {}> {\n render() {\n return <span>{this.props.foo}</span>\n }\n}\n\n<MyComponent name=\"bar\" />; // OK\n<MyComponent name={0} />; // error, `name` is not a number
JSX element names and properties are validated against the JSX namespace.\nPlease see the [[JSX]] wiki page for defining the JSX namespace for your framework.
TypeScript ships with two JSX modes: preserve and react.
preserve mode will keep JSX expressions as part of the output to be further consumed by another transform step. Additionally the output will have a .jsx file extension.react mode will emit React.createElement, does not need to go through a JSX transformation before use, and the output will have a .js file extension.See the [[JSX]] wiki page for more information on using JSX in TypeScript.
\nTypeScript 1.6 introduces intersection types, the logical complement of union types.\nA union type A | B represents an entity that is either of type A or type B, whereas an intersection type A & B represents an entity that is both of type A and type B.
\ntsfunction extend<T, U>(first: T, second: U): T & U {\n let result = <T & U> {};\n for (let id in first) {\n result[id] = first[id];\n }\n for (let id in second) {\n if (!result.hasOwnProperty(id)) {\n result[id] = second[id];\n }\n }\n return result;\n}\n\nvar x = extend({ a: \"hello\" }, { b: 42 });\nvar s = x.a;\nvar n = x.b;
\ntstype LinkedList<T> = T & { next: LinkedList<T> };\n\ninterface Person {\n name: string;\n}\n\nvar people: LinkedList<Person>;\nvar s = people.name;\nvar s = people.next.name;\nvar s = people.next.next.name;\nvar s = people.next.next.next.name;
\ntsinterface A { a: string }\ninterface B { b: string }\ninterface C { c: string }\n\nvar abc: A & B & C;\nabc.a = \"hello\";\nabc.b = \"hello\";\nabc.c = \"hello\";
See issue #1256 for more information.
\nLocal class, interface, enum, and type alias declarations can now appear inside function declarations. Local types are block scoped, similar to variables declared with let and const. For example:
\ntsfunction f() {\n if (true) {\n interface T { x: number }\n let v: T;\n v.x = 5;\n }\n else {\n interface T { x: string }\n let v: T;\n v.x = \"hello\";\n }\n}
The inferred return type of a function may be a type declared locally within the function. It is not possible for callers of the function to reference such a local type, but it can of course be matched structurally. For example:
\n\ntsinterface Point {\n x: number;\n y: number;\n}\n\nfunction getPointFactory(x: number, y: number) {\n class P {\n x = x;\n y = y;\n }\n return P;\n}\n\nvar PointZero = getPointFactory(0, 0);\nvar PointOne = getPointFactory(1, 1);\nvar p1 = new PointZero();\nvar p2 = new PointZero();\nvar p3 = new PointOne();
Local types may reference enclosing type parameters and local class and interfaces may themselves be generic. For example:
\n\ntsfunction f3() {\n function f<X, Y>(x: X, y: Y) {\n class C {\n public x = x;\n public y = y;\n }\n return C;\n }\n let C = f(10, \"hello\");\n let v = new C();\n let x = v.x; // number\n let y = v.y; // string\n}
TypeScript 1.6 adds support for ES6 class expressions. In a class expression, the class name is optional and, if specified, is only in scope in the class expression itself. This is similar to the optional name of a function expression. It is not possible to refer to the class instance type of a class expression outside the class expression, but the type can of course be matched structurally. For example:
\n\ntslet Point = class {\n constructor(public x: number, public y: number) { }\n public length() {\n return Math.sqrt(this.x * this.x + this.y * this.y);\n }\n};\nvar p = new Point(3, 4); // p has anonymous class type\nconsole.log(p.length());
TypeScript 1.6 adds support for classes extending arbitrary expression that computes a constructor function. This means that built-in types can now be extended in class declarations.
\nThe extends clause of a class previously required a type reference to be specified. It now accepts an expression optionally followed by a type argument list. The type of the expression must be a constructor function type with at least one construct signature that has the same number of type parameters as the number of type arguments specified in the extends clause. The return type of the matching construct signature(s) is the base type from which the class instance type inherits. Effectively, this allows both real classes and “class-like” expressions to be specified in the extends clause.
Some examples:
\n\nts// Extend built-in types\n\nclass MyArray extends Array<number> { }\nclass MyError extends Error { }\n\n// Extend computed base class\n\nclass ThingA {\n getGreeting() { return \"Hello from A\"; }\n}\n\nclass ThingB {\n getGreeting() { return \"Hello from B\"; }\n}\n\ninterface Greeter {\n getGreeting(): string;\n}\n\ninterface GreeterConstructor {\n new (): Greeter;\n}\n\nfunction getGreeterBase(): GreeterConstructor {\n return Math.random() >= 0.5 ? ThingA : ThingB;\n}\n\nclass Test extends getGreeterBase() {\n sayHello() {\n console.log(this.getGreeting());\n }\n}
abstract classes and methodsTypeScript 1.6 adds support for abstract keyword for classes and their methods. An abstract class is allowed to have methods with no implementation, and cannot be constructed.
\ntsabstract class Base {\n abstract getThing(): string;\n getOtherThing() { return 'hello'; }\n}\n\nlet x = new Base(); // Error, 'Base' is abstract\n\n// Error, must either be 'abstract' or implement concrete 'getThing'\nclass Derived1 extends Base { }\n\nclass Derived2 extends Base {\n getThing() { return 'hello'; }\n foo() {\n super.getThing();// Error: cannot invoke abstract members through 'super'\n }\n}\n\nvar x = new Derived2(); // OK\nvar y: Base = new Derived2(); // Also OK\ny.getThing(); // OK\ny.getOtherThing(); // OK
With TypeScript 1.6, type aliases can be generic. For example:
\n\ntstype Lazy<T> = T | (() => T);\n\nvar s: Lazy<string>;\ns = \"eager\";\ns = () => \"lazy\";\n\ninterface Tuple<A, B> {\n a: A;\n b: B;\n}\n\ntype Pair<T> = Tuple<T, T>;
TypeScript 1.6 enforces stricter object literal assignment checks for the purpose of catching excess or misspelled properties. Specifically, when a fresh object literal is assigned to a variable or passed as an argument for a non-empty target type, it is an error for the object literal to specify properties that don’t exist in the target type.
\n\ntsvar x: { foo: number };\nx = { foo: 1, baz: 2 }; // Error, excess property `baz`\n\nvar y: { foo: number, bar?: number };\ny = { foo: 1, baz: 2 }; // Error, excess or misspelled property `baz`
A type can include an index signature to explicitly indicate that excess properties are permitted:
\n\ntsvar x: { foo: number, [x: string]: any };\nx = { foo: 1, baz: 2 }; // Ok, `baz` matched by index signature
TypeScript 1.6 adds support for generators when targeting ES6.
\nA generator function can have a return type annotation, just like a function. The annotation represents the type of the generator returned by the function. Here is an example:
\n\ntsfunction *g(): Iterable<string> {\n for (var i = 0; i < 100; i++) {\n yield \"\"; // string is assignable to string\n }\n yield * otherStringGenerator(); // otherStringGenerator must be iterable and element type assignable to string\n}
A generator function with no type annotation can have the type annotation inferred.\nSo in the following case, the type will be inferred from the yield statements:
\n\ntsfunction *g() {\n for (var i = 0; i < 100; i++) {\n yield \"\"; // infer string\n }\n yield * otherStringGenerator(); // infer element type of otherStringGenerator\n}
async functionsTypeScript 1.6 introduces experimental support of async functions when targeting ES6.\nAsync functions are expected to invoke an asynchronous operation and await its result without blocking normal execution of the program.\nThis accomplished through the use of an ES6-compatible Promise implementation, and transposition of the function body into a compatible form to resume execution when the awaited asynchronous operation completes.
An async function is a function or method that has been prefixed with the async modifier. This modifier informs the compiler that function body transposition is required, and that the keyword await should be treated as a unary expression instead of an identifier.\nAn Async Function must provide a return type annotation that points to a compatible Promise type. Return type inference can only be used if there is a globally defined, compatible Promise type.
\ntsvar p: Promise<number> = /* ... */;\nasync function fn(): Promise<number> {\n var i = await p; // suspend execution until 'p' is settled. 'i' has type \"number\"\n return 1 + i;\n}\n\nvar a = async (): Promise<number> => 1 + await p; // suspends execution.\nvar a = async () => 1 + await p; // suspends execution. return type is inferred as \"Promise<number>\" when compiling with --target ES6\nvar fe = async function(): Promise<number> {\n var i = await p; // suspend execution until 'p' is settled. 'i' has type \"number\"\n return 1 + i;\n}\n\nclass C {\n async m(): Promise<number> {\n var i = await p; // suspend execution until 'p' is settled. 'i' has type \"number\"\n return 1 + i;\n }\n\n async get p(): Promise<number> {\n var i = await p; // suspend execution until 'p' is settled. 'i' has type \"number\"\n return 1 + i;\n }\n}
While not strictly a language change, nightly builds are now available by installing with the following command:
\nnpm install -g typescript@next\nStarting from release 1.6 TypeScript compiler will use different set of rules to resolve module names when targeting ‘commonjs’.\nThese rules attempted to model module lookup procedure used by Node.\nThis effectively mean that node modules can include information about its typings and TypeScript compiler will be able to find it.\nUser however can override module resolution rules picked by the compiler by using --moduleResolution command line option. Possible values are:
The instance side of an ambient class declaration can be extended using an interface declaration The class constructor object is unmodified.\nFor example:
\n\ntsdeclare class Foo {\n public x : number;\n}\n\ninterface Foo {\n y : string;\n}\n\nfunction bar(foo : Foo) {\n foo.x = 1; // OK, declared in the class Foo\n foo.y = \"1\"; // OK, declared in the interface Foo\n}
TypeScript 1.6 adds a new way to narrow a variable type inside an if block, in addition to typeof and instanceof.\nA user-defined type guard functions is one with a return type annotation of the form x is T, where x is a declared parameter in the signature, and T is any type.\nWhen a user-defined type guard function is invoked on a variable in an if block, the type of the variable will be narrowed to T.
\ntsfunction isCat(a: any): a is Cat {\n return a.name === 'kitty';\n}\n\nvar x: Cat | Dog;\nif(isCat(x)) {\n x.meow(); // OK, x is Cat in this block\n}
exclude property support in tsconfig.jsonA tsconfig.json file that doesn’t specify a files property (and therefore implicitly references all *.ts files in all subdirectories) can now contain an exclude property that specifies a list of files and/or directories to exclude from the compilation.\nThe exclude property must be an array of strings that each specify a file or folder name relative to the location of the tsconfig.json file.\nFor example:
\n\njson{\n \"compilerOptions\": {\n \"out\": \"test.js\"\n },\n \"exclude\": [\n \"node_modules\",\n \"test.ts\",\n \"utils/t2.ts\"\n ]\n}
The exclude list does not support wilcards. It must simply be a list of files and/or directories.
--init command line optionRun tsc --init in a directory to create an initial tsconfig.json in this directory with preset defaults.\nOptionally pass command line arguments along with --init to be stored in your initial tsconfig.json on creation.