TypeScript入门

introduction

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于GitHub上
始于JavaScript，归于JavaScript ｜强大的类型系统｜流行且适用于大型项目和基础库｜极大提高开发效率
现在主流的框架都推荐使用typescript如Vue3、React，其中React与typescript配合的更好一些（现在我也没感受出来，记个TODO）

Installation

全局安装 & 查看版本

npm install -g typescript
tsc -v

Example

VSCode 自动编译配置

1). 生成配置文件tsconfig.json
    tsc --init
2). 修改tsconfig.json配置
    "outDir": "./js", //生成js的路径
    "strict": false, // 是否启用强制类型检查
3). 启动监视任务: 
    终端 -> 运行任务 -> 监视tsconfig.json
之后修改ts文件保存后会重新编译生成js文件

🌰

// 类 成员变量、构造函数
class User {
  fullName: string
  firstName: string
  lastName: string
  
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName
    this.lastName = lastName
    this.fullName = firstName + ' ' + lastName
  }
}

// 接口 这里的interface 类似于 Golang中的interface 可以作为范型来使用
// 用接口来描述拥有两个字段的对象
interface Person {
  firstName: string
  lastName: string
}

// User类中包含了Person接口中定义的两个字段，Person对User是适配的
function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}
let user = new User('Jay', 'Chou')
console.log(greeter(user))

编译生成的javascript

// 类 成员变量、构造函数
var User = /** @class */ (function () {
    function User(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.fullName = firstName + ' ' + lastName;
    }
    return User;
}());
// User类中包含了Person接口中定义的两个字段，Person对User是适配的
function greeter(person) {
    return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
var user = new User('Jay', 'Chou');
console.log(greeter(user));