Cấu hình này rất quan trọng "lib" nó giúp chạy js trực tiếp trong trình duyệt (ok) 😍

https://stackoverflow.com/questions/50986494/what-does-the-typescript-lib-option-really-do

Hãy nhớ rằng, TS không bao giờ chèn polyfill độn vào mã của bạn. Đó không phải là mục tiêu của nó.

Target cho TS biết thông số kỹ thuật ES nào bạn muốn mã cuối cùng/mã biên dịch hỗ trợ. Nếu bạn định cấu hình nó là ES5, TS sẽ biên dịch xuống các tính năng cú pháp thành ES5, do đó bất kỳ hàm mũi tên nào () => {} trong mã của bạn sẽ được chuyển đổi thành hàm () {}.

Bất cứ điều gì bạn chọn cho mục tiêu đều ảnh hưởng đến giá trị mặc định của lib, giá trị này sẽ cho TS biết định nghĩa kiểu nào cần đưa vào dự án của bạn. Nếu bạn có "target": "es5", giá trị mặc định của lib sẽ là ["dom", "es5", "ScriptHost"]. Giá trị này giả định các tính năng chức năng nào mà trình duyệt sẽ hỗ trợ khi chạy. Việc thêm các thứ vào lib chỉ để làm TS hài lòng - bạn vẫn cần tự nhập polyfill vào dự án.

Ví dụ: Bạn cần hỗ trợ IE11 nhưng bạn cũng muốn sử dụng promises. IE11 hỗ trợ ES5, nhưng promises là một tính năng của ES6. Bạn nhập polyfill promises, nhưng TS vẫn báo lỗi. Bây giờ bạn chỉ cần cho TypeScript biết rằng mã của bạn sẽ nhắm mục tiêu đến ES5 và có thể sử dụng promises trong cơ sở mã một cách an toàn:

"target": "es5",
"lib": ["dom", "es5", "ScriptHost", "es2015.promise"]

Typescript không có bất kỳ kiểu tích hợp nào, tất cả các kiểu đều xuất phát từ một tập hợp các định nghĩa cơ sở (nằm trong thư mục lib trong thư mục cài đặt Typescript). Theo mặc định, mục tiêu xác định các lib nào được bao gồm. Ví dụ, tài liệu nêu:

Lưu ý: Nếu --lib không được chỉ định, danh sách librare mặc định sẽ được đưa vào. Các thư viện mặc định được đưa vào là:

--target ES5: DOM,ES5,ScriptHost
--target ES6: DOM,ES6,DOM.Iterable,ScriptHost

Ý tưởng cơ bản là trong khi mục tiêu xử lý các tính năng ngôn ngữ (cụ thể hơn là các tính năng ngôn ngữ nào cần được biên dịch xuống, ví dụ: for-of hoặc các hàm mũi tên), thì tùy chọn lib xử lý các tiện ích mà môi trường thời gian chạy có (tức là các đối tượng tích hợp trông như thế nào, chúng là gì).

Lý tưởng nhất là nên sử dụng các thư viện mặc định cho một mục tiêu nhất định. Tuy nhiên, chúng ta có thể có một môi trường hỗ trợ một số tiện ích thời gian chạy nhưng không hỗ trợ các tính năng ngôn ngữ hoặc chúng ta có thể nhắm mục tiêu thời gian chạy với phiên bản es thấp hơn và poly-fill một số tiện ích thời gian chạy, điều này thường có thể thực hiện được đối với một số thứ (ví dụ: Promises).

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es2015",
      "dom",
      "scripthost"
    ],
    "strict": true,
    "esModuleInterop": true
  }
}

app.ts

class TodoItem {
  private readonly _creationTimestamp: number;
  private readonly _identifier: string;
  constructor(private _description: string, identifier?: string) {
    this._creationTimestamp = new Date().getTime();
    if (identifier) {
      this._identifier = identifier;
    } else {
      // this is just for the example; for any real project, use
      // UUIDs instead: https://www.npmjs.com/package/uuid
      this._identifier = Math.random().toString(36).substr(2, 9);
    }
  }
  get creationTimestamp(): number {
    return this._creationTimestamp;
  }
  get identifier(): string {
    return this._identifier;
  }
  get description(): string {
    return this._description;
  }
}
class TodoList {
  private _todoList: ReadonlyArray<TodoItem> = [];
  constructor(todoList?: TodoItem[]) {
    // first we make sure that we have received a valid array
    // reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
    if (Array.isArray(todoList) && todoList.length) {
      this._todoList = this._todoList.concat(todoList);
    }
  }
  get todoList(): ReadonlyArray<TodoItem> {
    return this._todoList
  }
  addTodo(todoItem: TodoItem) {
    if (todoItem) {
      // the value is "truthy":
      // not null, not undefined, not NaN, not an empty string, not 0, not false
      this._todoList = this._todoList.concat(todoItem);
    }
  }
  removeTodo(itemId: string) {
    if (itemId) {
      this._todoList = this._todoList.filter(item => {
        if (item.identifier === itemId) {
          return false; // drop
        } else {
          return true; // keep
        }
      });
    }
  }
}
interface TodoListView {
  render(todoList: ReadonlyArray<TodoItem>): void;
  getInput(): TodoItem;
  getFilter(): string;
  clearInput(): void;
  filter(): void;
}
class HTMLTodoListView implements TodoListView {
  private readonly todoInput: HTMLInputElement;
  private readonly todoListDiv: HTMLDivElement;
  private readonly todoListFilter: HTMLInputElement;
  constructor() {
    this.todoInput = document.getElementById('todoInput') as HTMLInputElement;
    this.todoListDiv = document.getElementById('todoListContainer') as HTMLDivElement;
    this.todoListFilter = document.getElementById('todoFilter') as HTMLInputElement;
    // defensive checks
    if (!this.todoInput) {
      throw new Error("Could not find the todoInput HTML input element. Is the HTML correct?");
    }
    if (!this.todoListDiv) {
      throw new Error("Could not find the todoListContainer HTML div. Is the HTML correct?");
    }
    if (!this.todoListFilter) {
      throw new Error("Could not find the todoFilter HTML input element. Is the HTML correct?");
    }
  }
  clearInput(): void {
    this.todoInput.value = '';
  }
  getFilter(): string {
    return this.todoListFilter.value.toUpperCase();
  }
  getInput(): TodoItem {
    const todoInputValue: string = this.todoInput.value.trim();
    const retVal: TodoItem = new TodoItem(todoInputValue);
    return retVal;
  }
  render(todoList: ReadonlyArray<TodoItem>): void {
    console.log("Updating the rendered todo list");
    // we sort the given list
    const sortedTodoList = todoList.slice(0, todoList.length).sort((a, b) => {
      if (a.description < b.description) {
        return -1;
      } else if (a.description === b.description) {
        return 0;
      } else {
        return 1;
      }
    });
    this.todoListDiv.innerHTML = '';
    this.todoListDiv.textContent = ''; // Edge, ...
    const ul = document.createElement('ul');
    ul.setAttribute('id', 'todoList');
    this.todoListDiv.appendChild(ul);
    sortedTodoList.forEach(item => {
      const li = document.createElement('li');
      li.setAttribute('class', 'todo-list-item');
      li.innerHTML = `<a href='#' onclick='todoIt.removeTodo("${item.identifier}")'>${item.description}</a>`;
      ul.appendChild(li);
    });
  }
  filter(): void {
    console.log("Filtering the rendered todo list");
    const todoListHtml: HTMLUListElement = document.getElementById('todoList') as HTMLUListElement
    if (todoListHtml == null) {
      console.log("Nothing to filter");
      return;
    }
    const todoListFilterText = this.getFilter();
    todoListHtml.childNodes.forEach((item) => {
      let itemText: string | null = item.textContent;
      if (itemText !== null) {
        itemText = itemText.toUpperCase();
        if (itemText.startsWith(todoListFilterText)) {
          (item as HTMLLIElement).style.display = "list-item";
        } else {
          (item as HTMLLIElement).style.display = "none";
        }
      }
    });
  }
}
interface TodoListController {
  addTodo(): void;
  filterTodoList(): void;
  removeTodo(identifier: string): void;
}
class TodoIt implements TodoListController {
  private readonly _todoList: TodoList = new TodoList();
  constructor(private _todoListView: TodoListView) {
    console.log("TodoIt");
    if (!_todoListView) {
      throw new Error("The todo list view implementation is required to properly initialize TodoIt!");
    }
  }
  addTodo(): void {
    // get the value from the view
    const newTodo = this._todoListView.getInput();
    // verify that there is something to add
    if ('' !== newTodo.description) {
      console.log("Adding todo: ", newTodo);
      // add the new item to the list (i.e., update the model)
      this._todoList.addTodo(newTodo);
      console.log("New todo list: ", this._todoList.todoList);
      // clear the input
      this._todoListView.clearInput();
      // update the rendered todo list
      this._todoListView.render(this._todoList.todoList);
      // filter the list if needed
      this.filterTodoList();
    }
  }
  filterTodoList(): void {
    this._todoListView.filter();
  }
  removeTodo(identifier: string): void {
    if (identifier) {
      console.log("item to remove: ", identifier);
      this._todoList.removeTodo(identifier);
      this._todoListView.render(this._todoList.todoList);
      this.filterTodoList();
    }
  }
}
class EventUtils {
  static isEnter(event: KeyboardEvent): boolean {
    let isEnterResult = false;
    if (event !== undefined && event.defaultPrevented) {
      return false;
    }
    if (event == undefined) {
      isEnterResult = false;
    } else if (event.key !== undefined) {
      isEnterResult = event.key === 'Enter';
    } else if (event.keyCode !== undefined) {
      isEnterResult = event.keyCode === 13;
    }
    return isEnterResult;
  }
}
const view = new HTMLTodoListView();
const todoIt = new TodoIt(view);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TodoIt</title>
</head>
<body id="todoIt" style="text-align: center">
  <h1>TodoIt</h1>
  <h2>Add new items</h2>
  <p>
    What needs to be done?
    <input type="text" id="todoInput" title="What should be added to the todo list?"
      onkeyup="if(EventUtils.isEnter(event)) { todoIt.addTodo() }" onblur="todoIt.addTodo()" />
    <input type="button" value="Add todo" onclick="todoIt.addTodo()" />
  </p>
  <h2>Current todo list</h2>
  <p>Filter: <input type="text" id="todoFilter" title="Filter for the todo list" onkeyup="todoIt.filterTodoList()"
      onblur="todoIt.filterTodoList()" /></p>
  <div id="todoListContainer">Nothing to do, hurray!</div>
  <script src="./app.js"></script>
</body>
</html>

app.ts

class TodoItem {
  private readonly _creationTimestamp: number;
  private readonly _identifier: string;
  constructor(private _description: string, identifier?: string) {
    this._creationTimestamp = new Date().getTime();
    if (identifier) {
      this._identifier = identifier;
    } else {
      // this is just for the example; for any real project, use
      // UUIDs instead: https://www.npmjs.com/package/uuid
      this._identifier = Math.random().toString(36).substr(2, 9);
    }
  }
  get creationTimestamp(): number {
    return this._creationTimestamp;
  }
  get identifier(): string {
    return this._identifier;
  }
  get description(): string {
    return this._description;
  }
}
class TodoList {
  private _todoList: ReadonlyArray<TodoItem> = [];
  constructor(todoList?: TodoItem[]) {
    // first we make sure that we have received a valid array
    // reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
    if (Array.isArray(todoList) && todoList.length) {
      this._todoList = this._todoList.concat(todoList);
    }
  }
  get todoList(): ReadonlyArray<TodoItem> {
    return this._todoList
  }
  addTodo(todoItem: TodoItem) {
    if (todoItem) {
      // the value is "truthy":
      // not null, not undefined, not NaN, not an empty string, not 0, not false
      this._todoList = this._todoList.concat(todoItem);
    }
  }
  removeTodo(itemId: string) {
    if (itemId) {
      this._todoList = this._todoList.filter(item => {
        if (item.identifier === itemId) {
          return false; // drop
        } else {
          return true; // keep
        }
      });
    }
  }
}
interface TodoListView {
  render(todoList: ReadonlyArray<TodoItem>): void;
  getInput(): TodoItem;
  getFilter(): string;
  clearInput(): void;
  filter(): void;
}
class HTMLTodoListView implements TodoListView {
  private readonly todoInput: HTMLInputElement;
  private readonly todoListDiv: HTMLDivElement;
  private readonly todoListFilter: HTMLInputElement;
  constructor() {
    this.todoInput = document.getElementById('todoInput') as HTMLInputElement;
    this.todoListDiv = document.getElementById('todoListContainer') as HTMLDivElement;
    this.todoListFilter = document.getElementById('todoFilter') as HTMLInputElement;
    // defensive checks
    if (!this.todoInput) {
      throw new Error("Could not find the todoInput HTML input element. Is the HTML correct?");
    }
    if (!this.todoListDiv) {
      throw new Error("Could not find the todoListContainer HTML div. Is the HTML correct?");
    }
    if (!this.todoListFilter) {
      throw new Error("Could not find the todoFilter HTML input element. Is the HTML correct?");
    }
  }
  clearInput(): void {
    this.todoInput.value = '';
  }
  getFilter(): string {
    return this.todoListFilter.value.toUpperCase();
  }
  getInput(): TodoItem {
    const todoInputValue: string = this.todoInput.value.trim();
    const retVal: TodoItem = new TodoItem(todoInputValue);
    return retVal;
  }
  render(todoList: ReadonlyArray<TodoItem>): void {
    console.log("Updating the rendered todo list");
    // we sort the given list
    const sortedTodoList = todoList.slice(0, todoList.length).sort((a, b) => {
      if (a.description < b.description) {
        return -1;
      } else if (a.description === b.description) {
        return 0;
      } else {
        return 1;
      }
    });
    this.todoListDiv.innerHTML = '';
    this.todoListDiv.textContent = ''; // Edge, ...
    const ul = document.createElement('ul');
    ul.setAttribute('id', 'todoList');
    this.todoListDiv.appendChild(ul);
    sortedTodoList.forEach(item => {
      const li = document.createElement('li');
      li.setAttribute('class', 'todo-list-item');
      li.innerHTML = `<a href='#' onclick='todoIt.removeTodo("${item.identifier}")'>${item.description}</a>`;
      ul.appendChild(li);
    });
  }
  filter(): void {
    console.log("Filtering the rendered todo list");
    const todoListHtml: HTMLUListElement = document.getElementById('todoList') as HTMLUListElement
    if (todoListHtml == null) {
      console.log("Nothing to filter");
      return;
    }
    const todoListFilterText = this.getFilter();
    todoListHtml.childNodes.forEach((item) => {
      let itemText: string | null = item.textContent;
      if (itemText !== null) {
        itemText = itemText.toUpperCase();
        if (itemText.startsWith(todoListFilterText)) {
          (item as HTMLLIElement).style.display = "list-item";
        } else {
          (item as HTMLLIElement).style.display = "none";
        }
      }
    });
  }
}
interface TodoListController {
  addTodo(): void;
  filterTodoList(): void;
  removeTodo(identifier: string): void;
}
class TodoIt implements TodoListController {
  private readonly _todoList: TodoList = new TodoList();
  constructor(private _todoListView: TodoListView) {
    console.log("TodoIt");
    if (!_todoListView) {
      throw new Error("The todo list view implementation is required to properly initialize TodoIt!");
    }
  }
  addTodo(): void {
    // get the value from the view
    const newTodo = this._todoListView.getInput();
    // verify that there is something to add
    if ('' !== newTodo.description) {
      console.log("Adding todo: ", newTodo);
      // add the new item to the list (i.e., update the model)
      this._todoList.addTodo(newTodo);
      console.log("New todo list: ", this._todoList.todoList);
      // clear the input
      this._todoListView.clearInput();
      // update the rendered todo list
      this._todoListView.render(this._todoList.todoList);
      // filter the list if needed
      this.filterTodoList();
    }
  }
  filterTodoList(): void {
    this._todoListView.filter();
  }
  removeTodo(identifier: string): void {
    if (identifier) {
      console.log("item to remove: ", identifier);
      this._todoList.removeTodo(identifier);
      this._todoListView.render(this._todoList.todoList);
      this.filterTodoList();
    }
  }
}
class EventUtils {
  static isEnter(event: KeyboardEvent): boolean {
    let isEnterResult = false;
    if (event !== undefined && event.defaultPrevented) {
      return false;
    }
    if (event == undefined) {
      isEnterResult = false;
    } else if (event.key !== undefined) {
      isEnterResult = event.key === 'Enter';
    } else if (event.keyCode !== undefined) {
      isEnterResult = event.keyCode === 13;
    }
    return isEnterResult;
  }
}
const view = new HTMLTodoListView();
const todoIt = new TodoIt(view);

➜  typescript yarn build
yarn run v1.22.22
$ tsc
Done in 5.19s.
➜  typescript

app.js

"use strict";
var TodoItem = /** @class */ (function () {
  function TodoItem(_description, identifier) {
    this._description = _description;
    this._creationTimestamp = new Date().getTime();
    if (identifier) {
      this._identifier = identifier;
    }
    else {
      // this is just for the example; for any real project, use
      // UUIDs instead: https://www.npmjs.com/package/uuid
      this._identifier = Math.random().toString(36).substr(2, 9);
    }
  }
  Object.defineProperty(TodoItem.prototype, "creationTimestamp", {
    get: function () {
      return this._creationTimestamp;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(TodoItem.prototype, "identifier", {
    get: function () {
      return this._identifier;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(TodoItem.prototype, "description", {
    get: function () {
      return this._description;
    },
    enumerable: false,
    configurable: true
  });
  return TodoItem;
}());
var TodoList = /** @class */ (function () {
  function TodoList(todoList) {
    this._todoList = [];
    // first we make sure that we have received a valid array
    // reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
    if (Array.isArray(todoList) && todoList.length) {
      this._todoList = this._todoList.concat(todoList);
    }
  }
  Object.defineProperty(TodoList.prototype, "todoList", {
    get: function () {
      return this._todoList;
    },
    enumerable: false,
    configurable: true
  });
  TodoList.prototype.addTodo = function (todoItem) {
    if (todoItem) {
      // the value is "truthy":
      // not null, not undefined, not NaN, not an empty string, not 0, not false
      this._todoList = this._todoList.concat(todoItem);
    }
  };
  TodoList.prototype.removeTodo = function (itemId) {
    if (itemId) {
      this._todoList = this._todoList.filter(function (item) {
        if (item.identifier === itemId) {
          return false; // drop
        }
        else {
          return true; // keep
        }
      });
    }
  };
  return TodoList;
}());
var HTMLTodoListView = /** @class */ (function () {
  function HTMLTodoListView() {
    this.todoInput = document.getElementById('todoInput');
    this.todoListDiv = document.getElementById('todoListContainer');
    this.todoListFilter = document.getElementById('todoFilter');
    // defensive checks
    if (!this.todoInput) {
      throw new Error("Could not find the todoInput HTML input element. Is the HTML correct?");
    }
    if (!this.todoListDiv) {
      throw new Error("Could not find the todoListContainer HTML div. Is the HTML correct?");
    }
    if (!this.todoListFilter) {
      throw new Error("Could not find the todoFilter HTML input element. Is the HTML correct?");
    }
  }
  HTMLTodoListView.prototype.clearInput = function () {
    this.todoInput.value = '';
  };
  HTMLTodoListView.prototype.getFilter = function () {
    return this.todoListFilter.value.toUpperCase();
  };
  HTMLTodoListView.prototype.getInput = function () {
    var todoInputValue = this.todoInput.value.trim();
    var retVal = new TodoItem(todoInputValue);
    return retVal;
  };
  HTMLTodoListView.prototype.render = function (todoList) {
    console.log("Updating the rendered todo list");
    // we sort the given list
    var sortedTodoList = todoList.slice(0, todoList.length).sort(function (a, b) {
      if (a.description < b.description) {
        return -1;
      }
      else if (a.description === b.description) {
        return 0;
      }
      else {
        return 1;
      }
    });
    this.todoListDiv.innerHTML = '';
    this.todoListDiv.textContent = ''; // Edge, ...
    var ul = document.createElement('ul');
    ul.setAttribute('id', 'todoList');
    this.todoListDiv.appendChild(ul);
    sortedTodoList.forEach(function (item) {
      var li = document.createElement('li');
      li.setAttribute('class', 'todo-list-item');
      li.innerHTML = "<a href='#' onclick='todoIt.removeTodo(\"".concat(item.identifier, "\")'>").concat(item.description, "</a>");
      ul.appendChild(li);
    });
  };
  HTMLTodoListView.prototype.filter = function () {
    console.log("Filtering the rendered todo list");
    var todoListHtml = document.getElementById('todoList');
    if (todoListHtml == null) {
      console.log("Nothing to filter");
      return;
    }
    var todoListFilterText = this.getFilter();
    todoListHtml.childNodes.forEach(function (item) {
      var itemText = item.textContent;
      if (itemText !== null) {
        itemText = itemText.toUpperCase();
        if (itemText.startsWith(todoListFilterText)) {
          item.style.display = "list-item";
        }
        else {
          item.style.display = "none";
        }
      }
    });
  };
  return HTMLTodoListView;
}());
var TodoIt = /** @class */ (function () {
  function TodoIt(_todoListView) {
    this._todoListView = _todoListView;
    this._todoList = new TodoList();
    console.log("TodoIt");
    if (!_todoListView) {
      throw new Error("The todo list view implementation is required to properly initialize TodoIt!");
    }
  }
  TodoIt.prototype.addTodo = function () {
    // get the value from the view
    var newTodo = this._todoListView.getInput();
    // verify that there is something to add
    if ('' !== newTodo.description) {
      console.log("Adding todo: ", newTodo);
      // add the new item to the list (i.e., update the model)
      this._todoList.addTodo(newTodo);
      console.log("New todo list: ", this._todoList.todoList);
      // clear the input
      this._todoListView.clearInput();
      // update the rendered todo list
      this._todoListView.render(this._todoList.todoList);
      // filter the list if needed
      this.filterTodoList();
    }
  };
  TodoIt.prototype.filterTodoList = function () {
    this._todoListView.filter();
  };
  TodoIt.prototype.removeTodo = function (identifier) {
    if (identifier) {
      console.log("item to remove: ", identifier);
      this._todoList.removeTodo(identifier);
      this._todoListView.render(this._todoList.todoList);
      this.filterTodoList();
    }
  };
  return TodoIt;
}());
var EventUtils = /** @class */ (function () {
  function EventUtils() {
  }
  EventUtils.isEnter = function (event) {
    var isEnterResult = false;
    if (event !== undefined && event.defaultPrevented) {
      return false;
    }
    if (event == undefined) {
      isEnterResult = false;
    }
    else if (event.key !== undefined) {
      isEnterResult = event.key === 'Enter';
    }
    else if (event.keyCode !== undefined) {
      isEnterResult = event.keyCode === 13;
    }
    return isEnterResult;
  };
  return EventUtils;
}());
var view = new HTMLTodoListView();
var todoIt = new TodoIt(view);

What does the TypeScript "lib" option really do?

Ask QuestionAsked 6 years, 7 months agoModified 7 months agoViewed 10k timesReport this ad42

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). For instance "Specify library files to be included in the compilation", which explains absolutely nothing.

typescript

Share Improve this questionFollowedited Jun 30, 2024 at 3:27 Machavity♦31.6k2727 gold badges9595 silver badges105105 bronze badgesasked Jun 22, 2018 at 11:01 Morten H Pedersen86311 gold badge88 silver badges99 bronze badgesAdd a comment

2 Answers

Sorted by: Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 69

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"]

Share Improve this answerFollowedited Dec 14, 2021 at 17:36answered Aug 13, 2019 at 8:56 cleison1,57311 gold badge1414 silver badges1515 bronze badges

14This is by far the clearest, most concise answer I've read on this topic. Thanks! – Ersin Akinci CommentedMar 27, 2020 at 20:42

Add a commentReport this ad20

Typescript does not have any built-in types all types come from a set of base definitions (located in the lib folder in the typescript install directory). By default the target defines which libs are included. For example the docs state:

Note: If --lib is not specified a default list of librares are injected. The default libraries injected are:
► For --target ES5: DOM,ES5,ScriptHost
► For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

The basic idea is that while target is deals with language features (more specifically which language features need to be down compiled, ex: for-of, or arrow functions), the lib option deals with what facilities the runtime environment has (ie. what built-in objects look like, what they are).

Ideally the default libs for a given target should be used. We may, however, have an environment which supports some of the runtime facilities but not the language features, or we may target runtime with a lower es version and poly-fill some of the runtime facilities, which can be in general done for some things (ex: Promises).

Share Improve this answerFollowedited Jun 20, 2020 at 9:12 CommunityBot111 silver badgeanswered Jun 22, 2018 at 12:02 Titian Cernicova-Dragomir249k3737 gold badges458458 silver badges388388 bronze badges

But the libs also influence what features are available on the Typescript side? (Like Promise()) Why doesn't TS just polygons that always? Is that to declare non-TS facilities available in target environment? – Morten H Pedersen CommentedJun 23, 2018 at 13:01
2Well, Promise is a type so what I said applies. Typescript tries to have a minimal presence in the generated code. You want polyfills you need to add those yourself – Titian Cernicova-Dragomir CommentedJun 23, 2018 at 13:08
Thanks. Was not able to find it really explained anywhere on typescriptlang.org – Morten H Pedersen CommentedJun 23, 2018 at 14:35
+1 For the list of default values. It is a shame that specifying just one library, such as es2021, nullifies the inclusion of everything else. One error corrected, 480 new ones created. This list saved a lot of hassle. – CharlieHanson CommentedJan 3, 2022 at 18:16

PreviousTypescript Gheatsheet Git NextCấu hình import các module không cần dấu . (ok)

Last updated 1 day ago