https://www.tslang.cn/docs/home.html 快速入门指南
https://ts.xcatliu.com/introduction/what-is-typescript.html

什么是 TypeScript

首先,我对 TypeScript 的理解如下:
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上。
其次引用官网的定义:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

翻译成中文即是:

TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

TypeScript 增加了代码的可读性和可维护性

  • 类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了
  • 可以在编译阶段就发现大部分错误,这总比在运行时候出错好
  • 增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等

    TypeScript 非常包容

  • TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可

  • 即使不显式的定义类型,也能够自动做出类型推论
  • 可以定义从简单到复杂的几乎一切类型
  • 即使 TypeScript 编译报错,也可以生成 JavaScript 文件
  • 兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取

安装篇

npm install -g typescript
创建一个.ts文件

  1. // vi greeter.ts
  2. function greeter(person) {
  3. return "Hello, " + person;
  4. }
  5. let user = 'Jane User';
  6. document.body.innerHTML = greeter(user);

tsc greeter.ts // 执行此命令会生成 greeter.js文件

  1. // vi greeter.ts
  2. function greeter(person : string) {
  3. return "Hello, " + person;
  4. }
  5. let user = [1, 2, 3];
  6. document.body.innerHTML = greeter(user);
  7. /* 再次执行 tsc greeter.ts 此时控制台会抛出错误。
  8. greeter.ts(7,26): error TS2345:
  9. Argument of type 'number[]' is not assignable to parameter of type 'string'.
  10. */

基本使用

接口

  1. interface Person {
  2. firstName: string;
  3. lastName: string;
  4. }
  5. function greeter(person: Person) {
  6. return "Hello, " + person.firstName + " " + person.lastName;
  7. }
  8. let user = { firstName: "Jane", lastName: "User" };
  9. document.body.innerHTML = greeter(user);

  1. class Student {
  2. // 成员属性
  3. fullName: string;
  4. // constructor 构造函数
  5. constructor(public firstName, public middleInitial, public lastName) {
  6. this.fullName = firstName + " " + middleInitial + " " + lastName;
  7. }
  8. }
  9. interface Person {
  10. firstName: string;
  11. lastName: string;
  12. }
  13. function greeter(person : Person) {
  14. return "Hello, " + person.firstName + " " + person.lastName;
  15. }
  16. let user = new Student("Jane", "M.", "User"); // 实例化一个对象
  17. document.body.innerHTML = greeter(user);