TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码 开源于 GitHub 上

TypeScript特点

• 始于JavaScript,归于TypeScript
• 强大的类型系统
• 先进的JavaScript

安装TypeScript

命令行运行如下命令，全局安装 TypeScript

npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)

tsc -V

编写TypeScript程序

(()=>{
    // str 这个参数是 String 类型的
    function sayHi(str){
        return '你好啊' + str
    }
    let text = '测试'
    console.log(sayHi(text))
})();

手动编译代码

tsc helloworld.ts

配置自动编译代码

• 生成配置文件

  tsc --init

• 修改配置文件

  {
    "compilerOptions": {
      "outDir":"./js", // [!code ++] // 编译后 js 文件存放位置
      "strict":false,  // [!code ++] // 关闭严格模式
     }
  }

类型注解

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。

TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

function greeter (person: string) {
  return 'Hello, ' + person
}
let user = 'Yee'
console.log(greeter(user))

接口

在 TypeScript 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句

// 定义接口
interface Person {
  firstName: string
  lastName: string
}

// 定义方法
function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {
  firstName: 'Yee',
  lastName: 'Huang'
}

console.log(greeter(user))

类

// 定义类
class User {
  fullName: string
  firstName: string
  lastName: string
	
   // 定义构造函数
  constructor (firstName: string, lastName: string) {
    this.firstName = firstName
    this.lastName = lastName
    this.fullName = firstName + ' ' + lastName
  }
}

// 定义接口
interface Person {
  firstName: string
  lastName: string
}

// 定义方法
function greeter (person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

// 实例化对象
let user = new User('Yee', 'Huang')

console.log(greeter(user))

使用 Vite 打包 TypeScript

• 安装依赖

  yarn add -D vue-tsc
  yarn add -D typescript

• 配置打包命令

  {
    "scripts": {
      "build": "vue-tsc --noEmit && vite build"
    }
  }

• 运行 / 打包

  # 运行
  yarn dev
  # 打包
  yarn build