TypeScript

数据类型

原始数据类型：string, number, boolean, bigint, symbol, null, undefined

sonst num: number = 1
const str = 'Hello World' // 这样也不会报错，因为 TS 会推导类型

数组：number[], UserItem[]

const strs: string[] = ['Hello World', 'Hi World']
const nums = [1, 2, 3] // 自动推导类型

接口和类

接口：interface

// 定义用户对象的类型
interface UserItem {
  name: string
  age: number
  enjoyFoods: string[]
  friendList?: UserItem[] // ? 表示可选属性
}

// 在声明变量的时候将其关联到类型上
const petter: UserItem = {
  name: 'Petter',
  age: 18,
  enjoyFoods: ['rice', 'noodle', 'pizza'],
  friendList: [
    {
      name: 'Marry',
      age: 16,
      enjoyFoods: ['pizza', 'ice cream'],
      friendList: [],
    }
  ]
}

继承：extends

// 这里继承了 UserItem 的所有属性类型，并追加了一个权限等级属性
interface Admin extends UserItem {
  permissionLevel: number
}

const admin: Admin = {
  name: 'Petter',
  age: 18,
  enjoyFoods: ['rice', 'noodle', 'pizza'],
  friendList: [
    {
      name: 'Marry',
      age: 16,
      enjoyFoods: ['pizza', 'ice cream'],
      friendList: [],
    }
  ],
  permissionLevel: 1
}

部分继承：使用 Omit 帮助类型

// 这里在继承 UserItem 类型的时候，删除了两个多余的属性
interface Admin extends Omit<UserItem, 'enjoyFoods' | 'friendList'> {
  permissionLevel: number
}

// 现在的 admin 就非常精简了
const admin: Admin = {
  name: 'Petter',
  age: 18,
  permissionLevel: 1,
}

类：class

// 定义一个类
class User {
  // constructor 上的数据需要先这样定好类型
  name: string

  // 入参也要定义类型
  constructor(userName: string) {
    this.name = userName
  }

  getName() {
    console.log(this.name)
  }
}

// 通过 new 这个类得到的变量，它的类型就是这个类
const petter: User = new User('Petter')
petter.getName() // Petter

类和接口之间也可以互相继承

联合类型：string | number

const ele: HTMLElement | null = document.querySelector('main') // ele 既可以是 HTMLElement，又可以是 null

函数

函数：

function sum1(x: number, y: number): number {
  return x + y
}

function sum(x: number, y: number, isDouble?: boolean): number { // 可选参数必须在必选参数后面
  return isDouble ? (x + y) * 2 : x + y
}

function sayHi(name: string): void { // 无返回值
  console.log(`Hi, ${name}!`)
}

函数重载：

function greet(name: string): string  // 对 string 类型的重载
function greet(name: string[]): string[]  // 对 string[] 类型的重载
function greet(name: string | string[]) { // 真正的函数体，此时可以省略返回类型
  if (Array.isArray(name)) {
    return name.map((n) => `Welcome, ${n}!`)
  }
  return `Welcome, ${name}!`
}

// 单个问候语，此时只有一个类型 string
const greeting = greet('Petter')
console.log(greeting) // Welcome, Petter!

// 多个问候语，此时只有一个类型 string[]
const greetings = greet(['Petter', 'Tom', 'Jimmy'])
console.log(greetings)
// [ 'Welcome, Petter!', 'Welcome, Tom!', 'Welcome, Jimmy!' ]

npm 包

一些早期的 npm 包是使用 JavaScript 写的，无法直接引入到 TypeScript 项目里。开源社区维护了一套 @types 类型包，提供这些包的 TypeScript 版本。

@types 类型包的命名格式为 @types/<package-name>，如 @types/md5。

类型断言

类型断言可以让 TypeScript 不再检查变量的类型，而是直接使用你指定的类型。

// 原本要求 age 也是必须的属性之一
interface User {
  name: string
  age: number
}

// 但是类型断言过程中，遗漏了
const petter = {} as User
petter.name = 'Petter'

// TypeScript 依然可以运行下去，但实际上的数据是不完整的
console.log(petter) // { name: 'Petter' }

编译

直接运行 TypeScript 程序：

npm install -g ts-node  # 安装依赖
ts-node main.ts         # 运行

编译为 JavaScript：

npm install -g typescript  # 安装依赖
tsc --init                 # 初始化 TypeScript 项目

编辑 TypeScript 项目配置文件 tsconfig.json：

{
  "compilerOptions": {
    "target": "es6",   // JavaScript 版本
    "module": "es6",   // 模块规范
    "outDir": "./dist" // 输出目录
  }
}

编译：

tsc