TypeScript 1.5 supports ECMAScript 6 (ES6) modules.\nES6 modules are effectively TypeScript external modules with a new syntax: ES6 modules are separately loaded source files that possibly import other modules and provide a number of externally accessible exports.\nES6 modules feature several new export and import declarations.\nIt is recommended that TypeScript libraries and applications be updated to use the new syntax, but this is not a requirement.\nThe new ES6 module syntax coexists with TypeScript’s original internal and external module constructs and the constructs can be mixed and matched at will.
\nIn addition to the existing TypeScript support for decorating declarations with export, module members can also be exported using separate export declarations, optionally specifying different names for exports using as clauses.
\ntsinterface Stream { ... }\nfunction writeToStream(stream: Stream, data: string) { ... }\nexport { Stream, writeToStream as write }; // writeToStream exported as write
Import declarations, as well, can optionally use as clauses to specify different local names for the imports. For example:
\ntsimport { read, write, standardOutput as stdout } from \"./inout\";\nvar s = read(stdout);\nwrite(stdout, s);
As an alternative to individual imports, a namespace import can be used to import an entire module:
\n\ntsimport * as io from \"./inout\";\nvar s = io.read(io.standardOutput);\nio.write(io.standardOutput, s);
Using from clause a module can copy the exports of a given module to the current module without introducing local names.
\ntsexport { read, write, standardOutput as stdout } from \"./inout\";
export * can be used to re-export all exports of another module. This is useful for creating modules that aggregate the exports of several other modules.
\ntsexport function transform(s: string): string { ... }\nexport * from \"./mod1\";\nexport * from \"./mod2\";
An export default declaration specifies an expression that becomes the default export of a module:
\n\ntsexport default class Greeter {\n sayHello() {\n console.log(\"Greetings!\");\n }\n}
Which in turn can be imported using default imports:
\n\ntsimport Greeter from \"./greeter\";\nvar g = new Greeter();\ng.sayHello();
A “bare import” can be used to import a module only for its side-effects.
\n\ntsimport \"./polyfills\";
For more information about module, please see the ES6 module support spec.
\nTypeScript 1.5 adds support to ES6 destructuring declarations and assignments.
\nA destructuring declaration introduces one or more named variables and initializes them with values extracted from properties of an object or elements of an array.
\nFor example, the following sample declares variables x, y, and z, and initializes them to getSomeObject().x, getSomeObject().y and getSomeObject().z respectively:
\ntsvar { x, y, z } = getSomeObject();
Destructuring declarations also works for extracting values from arrays:
\n\ntsvar [x, y, z = 10] = getSomeArray();
Similarly, destructuring can be used in function parameter declarations:
\n\ntsfunction drawText({ text = \"\", location: [x, y] = [0, 0], bold = false }) {\n // Draw text\n}\n\n// Call drawText with an object literal\nvar item = { text: \"someText\", location: [1,2,3], style: \"italics\" };\ndrawText(item);
Destructuring patterns can also be used in regular assignment expressions.\nFor instance, swapping two variables can be written as a single destructuring assignment:
\n\ntsvar x = 1;\nvar y = 2;\n[x, y] = [y, x];
namespace keywordTypeScript used the module keyword to define both “internal modules” and “external modules”;\nthis has been a bit of confusion for developers new to TypeScript.\n“Internal modules” are closer to what most people would call a namespace; likewise, “external modules” in JS speak really just are modules now.
\n\nNote: Previous syntax defining internal modules are still supported.
\n
Before:
\n\ntsmodule Math {\n export function add(x, y) { ... }\n}
After:
\n\ntsnamespace Math {\n export function add(x, y) { ... }\n}
let and const supportES6 let and const declarations are now supported when targeting ES3 and ES5.
\ntsconst MAX = 100;\n\n++MAX; // Error: The operand of an increment or decrement\n // operator cannot be a constant.
\ntsif (true) {\n let a = 4;\n // use a\n}\nelse {\n let a = \"string\";\n // use a\n}\n\nalert(a); // Error: a is not defined in this scope.
TypeScript 1.5 adds support to ES6 for..of loops on arrays for ES3/ES5 as well as full support for Iterator interfaces when targeting ES6.
\nThe TypeScript compiler will transpile for..of arrays to idiomatic ES3/ES5 JavaScript when targeting those versions:
\n\ntsfor (var v of expr) { }
will be emitted as:
\n\njsfor (var _i = 0, _a = expr; _i < _a.length; _i++) {\n var v = _a[_i];\n}
\n\nTypeScript decorators are based on the ES7 decorator proposal.
\n
A decorator is:
\n\n\nFor more information, please see the Decorators proposal.
\n
Decorators readonly and enumerable(false) will be applied to the property method before it is installed on class C.\nThis allows the decorator to change the implementation, and in this case, augment the descriptor to be writable: false and enumerable: false.
\ntsclass C {\n @readonly\n @enumerable(false)\n method() { ... }\n}\n\nfunction readonly(target, key, descriptor) {\n descriptor.writable = false;\n}\n\nfunction enumerable(value) {\n return function (target, key, descriptor) {\n descriptor.enumerable = value;\n };\n}
Initializing an object with dynamic properties can be a bit of a burden. Take the following example:
\n\ntstype NeighborMap = { [name: string]: Node };\ntype Node = { name: string; neighbors: NeighborMap; };\n\nfunction makeNode(name: string, initialNeighbor: Node): Node {\n var neighbors: NeighborMap = {};\n neighbors[initialNeighbor.name] = initialNeighbor;\n return { name: name, neighbors: neighbors };\n}
Here we need to create a variable to hold on to the neighbor-map so that we can initialize it.\nWith TypeScript 1.5, we can let the compiler do the heavy lifting:
\n\ntsfunction makeNode(name: string, initialNeighbor: Node): Node {\n return {\n name: name,\n neighbors: {\n [initialNeighbor.name]: initialNeighbor\n }\n };\n}
UMD and System module outputIn addition to AMD and CommonJS module loaders, TypeScript now supports emitting modules UMD (Universal Module Definition) and System module formats.
Usage:
\n\n\ntsc —module umd
\n
and
\n\n\ntsc —module system
\n
ES6 introduces escapes that allow users to represent a Unicode codepoint using just a single escape.
\nAs an example, consider the need to escape a string that contains the character ’𠮷‘.\nIn UTF-16/UCS2, ’𠮷’ is represented as a surrogate pair, meaning that it’s encoded using a pair of 16-bit code units of values, specifically 0xD842 and 0xDFB7.\nPreviously this meant that you’d have to escape the codepoint as \"\\uD842\\uDFB7\".\nThis has the major downside that it’s difficult to discern two independent characters from a surrogate pair.
With ES6’s codepoint escapes, you can cleanly represent that exact character in strings and template strings with a single escape: \"\\u{20bb7}\".\nTypeScript will emit the string in ES3/ES5 as \"\\uD842\\uDFB7\".
In TypeScript 1.4, we added support for template strings for all targets, and tagged templates for just ES6.\nThanks to some considerable work done by @ivogabe, we bridged the gap for for tagged templates in ES3 and ES5.
\nWhen targeting ES3/ES5, the following code
\n\ntsfunction oddRawStrings(strs: TemplateStringsArray, n1, n2) {\n return strs.raw.filter((raw, index) => index % 2 === 1);\n}\n\noddRawStrings `Hello \\n${123} \\t ${456}\\n world`
will be emitted as
\n\njsfunction oddRawStrings(strs, n1, n2) {\n return strs.raw.filter(function (raw, index) {\n return index % 2 === 1;\n });\n}\n(_a = [\"Hello \\n\", \" \\t \", \"\\n world\"], _a.raw = [\"Hello \\\\n\", \" \\\\t \", \"\\\\n world\"], oddRawStrings(_a, 123, 456));\nvar _a;
/// <amd-dependency path=\"x\" /> informs the compiler about a non-TS module dependency that needs to be injected in the resulting module’s require call;\nhowever, there was no way to consume this module in the TS code.
The new amd-dependency name property allows passing an optional name for an amd-dependency:
\nts/// <amd-dependency path=\"legacy/moduleA\" name=\"moduleA\"/>\ndeclare var moduleA: MyType;\nmoduleA.callStuff();
Generated JS code:
\n\njsdefine([\"require\", \"exports\", \"legacy/moduleA\"], function (require, exports, moduleA) {\n moduleA.callStuff();\n});
tsconfig.jsonAdding a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project.\nThe tsconfig.json file specifies the root files and the compiler options required to compile the project. A project is compiled in one of the following ways:
\njson{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"noImplicitAny\": true,\n \"sourceMap\": true\n }\n}
See the tsconfig.json wiki page for more details.
\n--rootDir command line optionOption --outDir duplicates the input hierarchy in the output.\nThe compiler computes the root of the input files as the longest common path of all input files;\nand then uses that to replicate all its substructure in the output.
Sometimes this is not desirable, for instance inputs FolderA\\FolderB\\1.ts and FolderA\\FolderB\\2.ts would result in output structure mirroring FolderA\\FolderB\\.\nNow if a new file FolderA\\3.ts is added to the input, the output structure will pop out to mirror FolderA\\.
--rootDir specifies the input directory to be mirrored in output instead of computing it.
--noEmitHelpers command line optionThe TypeSript compiler emits a few helpers like __extends when needed.\nThe helpers are emitted in every file they are referenced in.\nIf you want to consolidate all helpers in one place, or override the default behavior, use --noEmitHelpers to instructs the compiler not to emit them.
--newLine command line optionBy default the output new line character is \\r\\n on Windows based systems and \\n on *nix based systems.\n--newLine command line flag allows overriding this behavior and specifying the new line character to be used in generated output files.
--inlineSourceMap and inlineSources command line options--inlineSourceMap causes source map files to be written inline in the generated .js files instead of in a independent .js.map file.\n--inlineSources allows for additionally inlining the source .ts file into the .js file.