Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does the TypeScript "lib" option really do?

Tags:

typescript

lib

I have still not been able to find good answer for this. The "target" option defines, what version of Javascript the result will run on. The "lib" option is less clearly described anywhere. Seems like it is a more granular way to describe the target environment, but then it seems strange it affects what you can write in the .ts source files. Thought TS what as superset of JS, so why does it affect whether, e.g., Promise() is available or not? This seems like it does not only define the target but also affect what functions you have available in Typescript. Can someone explain that clearly or direct to an answer (there is none at typescriptlang.org or in the books I have looked at, e.g., "Specify library files to be included in the compilation", which explains absolutely nothing.

like image 667
Morten H Pedersen Avatar asked Jun 22 '18 11:06

Morten H Pedersen


People also ask

What is Lib in TypeScript?

TypeScript includes a default set of type definitions for built-in JS APIs (like Math ), as well as type definitions for things found in browser environments (like document ).

What does Tsconfig do?

The tsconfig. json file specifies the root files and the compiler options required to compile the project. JavaScript projects can use a jsconfig. json file instead, which acts almost the same but has some JavaScript-related compiler flags enabled by default.

What is include in Tsconfig?

tsconfig include The include property specifies the files to be included in the TypeScript project. You can either include files or file paths like ./src/** to specify what should be included.

What is target Tsconfig?

The target setting changes which JS features are downleveled and which are left intact. For example, an arrow function () => this will be turned into an equivalent function expression if target is ES5 or lower.


1 Answers

Remember, TS never injects polyfills in your code. It's not its goal. Complementing the accepted anwer:

target tells TS which ES specification you want the final/transpiled code to support. If you configure it as ES5, TS will down compile the syntactic features to ES5, so any arrow functions () => {} in your code will be transformed to function () {}.

Whatever you choose for target affects the default value of lib which in turn tells TS what type definitions to include in your project. If you have "target": "es5", the default value of lib will be ["dom", "es5", "ScriptHost"]. It's assuming which functional features the browser will support at runtime. Adding things to lib it's just to make TS happy - you still need to import the polyfill yourself in the project.

So in short: configure target first, and if you need any extra polyfill in your project OR you know your browser(s) will support this little extra feature, lib is how to make TS happy about it.

Example: You need to support IE11 but also you would like to use promises. IE11 supports ES5, but promises is an ES6 feature. You import a promises polyfill, but TS is still giving an error. Now you just need to tell TypeScript that your code will target ES5 and it's safe to use promises in the codebase:

"target": "es5", "lib": ["dom", "es5", "ScriptHost", "es2015.promise"] 
like image 112
cleison Avatar answered Nov 24 '22 06:11

cleison