What is tslib?
The tslib package is a runtime library for TypeScript that includes helper functions used by TypeScript emitted code when using various advanced features of the language such as async/await, for...of, spread, rest, and decorators. It is intended to be used with TypeScript's `importHelpers` flag to reduce code duplication and save on bundle size.
What are tslib's main functionalities?
Async/Await
Provides a helper function for handling asynchronous operations using async/await syntax in environments that do not natively support these features.
__awaiter(this, void 0, void 0, function* () { const result = yield someAsyncFunction(); return result; })
Spread and Rest
Offers a helper function to handle spread and rest operations with arrays, allowing for the combination and copying of arrays.
__spreadArrays([1, 2], [3, 4])
Decorators
Includes helper functions for applying decorators to classes and methods, which are a TypeScript feature for adding annotations and a meta-programming syntax for class declarations and members.
__decorate([decoratorsArray], target, key, desc)
Generators
Provides a helper function for working with generators and the yield keyword, enabling the use of generator functions in environments that do not support them natively.
__generator(this, function (_a) { switch (_a.label) { case 0: _a.trys.push([0, 2, , 3]); return [4 /*yield*/, someGeneratorFunction()]; case 1: _a.sent(); return [3 /*break*/, 3]; case 2: _a.sent(); return [3 /*break*/, 3]; case 3: return [2 /*return*/]; } });
Other packages similar to tslib
core-js
A modular standard library for JavaScript, core-js includes polyfills for ECMAScript features. It is similar to tslib in that it provides functionality to support newer language features on older environments, but it is more comprehensive and includes polyfills for a wider range of ECMAScript features.
babel-runtime
Part of the Babel toolchain, babel-runtime is similar to tslib in that it provides a set of helpers for Babel-transpiled code to avoid duplicating helper code across multiple files. It is used in conjunction with Babel's transform-runtime plugin.
regenerator-runtime
A standalone runtime for Regenerator-compiled generator and async functions. It is similar to tslib in providing support for generators and async functions, but it is focused specifically on the transformation of these features by the Regenerator compiler.
tslib
This is a runtime library for TypeScript that contains all of the TypeScript helper functions.
This library is primarily used by the --importHelpers
flag in TypeScript.
When using --importHelpers
, a module that uses helper functions like __extends
and __assign
in the following emitted file:
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
exports.x = {};
exports.y = __assign({}, exports.x);
will instead be emitted as something like the following:
var tslib_1 = require("tslib");
exports.x = {};
exports.y = tslib_1.__assign({}, exports.x);
Because this can avoid duplicate declarations of things like __extends
, __assign
, etc., this means delivering users smaller files on average, as well as less runtime overhead.
For optimized bundles with TypeScript, you should absolutely consider using tslib
and --importHelpers
.
Installing
For the latest stable version, run:
npm
npm install tslib
npm install tslib@^1
npm install tslib@1.6.1
yarn
yarn add tslib
yarn add tslib@^1
yarn add tslib@1.6.1
bower
bower install tslib
bower install tslib@^1
bower install tslib@1.6.1
JSPM
jspm install tslib
jspm install tslib@^1
jspm install tslib@1.6.1
Usage
Set the importHelpers
compiler option on the command line:
tsc --importHelpers file.ts
or in your tsconfig.json:
{
"compilerOptions": {
"importHelpers": true
}
}
For bower and JSPM users
You will need to add a paths
mapping for tslib
, e.g. For Bower users:
{
"compilerOptions": {
"module": "amd",
"importHelpers": true,
"baseUrl": "./",
"paths": {
"tslib" : ["bower_components/tslib/tslib.d.ts"]
}
}
}
For JSPM users:
{
"compilerOptions": {
"module": "system",
"importHelpers": true,
"baseUrl": "./",
"paths": {
"tslib" : ["jspm_packages/npm/tslib@2.x.y/tslib.d.ts"]
}
}
}
Deployment
- Choose your new version number
- Set it in
package.json
and bower.json
- Create a tag:
git tag [version]
- Push the tag:
git push --tags
- Create a release in GitHub
- Run the publish to npm workflow
Done.
Contribute
There are many ways to contribute to TypeScript.
Documentation