TypeScript 前置

TypeScript 可以理解成 JavaScript 的超集，因为大伙（为了省事）频繁的使用任意值 any，因此它也被戏称为 AnyScript，在我看来，TypeScript 转换为 JavaScript 的过程就像是一种 Debug 过程，目的是为了让浏览器更安全的运行（对浏览器加载脚本进行了限制）

使用方法：

• 一般项目 NPM 安装 TypeScript
  • npm init -y，初始化 package.json 文件
  • npm install -D typescript ts-node，下载所需库
  • tsc --init，生成 tsconfig.json 文件
  • tsc test.ts，转换 TypeScript 为 JavaScript 文件（使得浏览器认识）
• 如果用 Vite 创建的 Vue3 框架项目，则不需要额外安装 TypeScript 的库

参考资料：

• JavaScript
• 快速上手 TypeScript

可能有用的资料：

• TypeScript 参考教程
• 为什么你应当使用 TypeScript? TS 十分钟快速入门
• 1个项目学会TypeScript核心基础语法
• 深入理解 TypeScript
• 5分钟了解 TypeScript

TypeScript 基础

基本数据类型与数组

对象（接口）

对象的类型定义通常采用大驼峰命名法（如 UserItem），这是为了跟普通变量进行区分（通常使用小驼峰写法，如 userItem），对象的类型定义有两个语法支持： type 和 interface，这里只介绍常用的 interface

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: [],
    },
    {
      name: "Tom",
      age: 20,
      enjoyFoods: ["chicken", "cake"],
      friendList: [],
    },
  ],
};

② 接口的继承

interface UserItem {
  name: string;
  age: number;
  enjoyFoods: string[];
  friendList?: UserItem[];
}

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

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

// 现在的 admin 就非常精简了
const admin: Admin2 = {
  name: "Petter",
  age: 18,
  permissionLevel1: 123,
  permissionLevel2: 456,
};

类的继承

关于类的基本用法请看 ES6 中的类，这里主要讲解使用 interface 继承类

class UserBase {
  name: string
  constructor(userName: string) {
    this.name = userName
  }
  // 这是一个方法
  getName() {
    console.log(this.name)
  }
}

// 接口继承类的时候也可以去掉类上面的方法
interface User extends Omit<UserBase, 'getName'> {
  age: number
}

// 最终只保留数据属性，不带有方法
const petter: User = {
  name: 'Petter',
  age: 18,
}

联合类型

很简单的概念，直接看示例更加明了：

function counter(count: number | string) {
  console.log(`The current count is: ${count}.`);
}

// 不论传数值还是字符串，都可以达到的目的
counter(1); // The current count is: 1.
counter("2"); // The current count is: 2.

PS：上面 counter 函数用到了模板字符串，具体细节可以看这篇文章

// 比如在实际的业务场景中，Vue 的路由在不同的数据结构里也有不同的类型，有时候需要通过路由实例来判断是否符合要求的页面
import type { RouteRecordRaw, RouteLocationNormalizedLoaded } from 'vue-router'

function isArticle(
  route: RouteRecordRaw | RouteLocationNormalizedLoaded
): boolean {
  // ...
}

类型断言

同样是很简单的概念，直接看示例：

// 对单人或者多人打招呼，这里使用了联合类型
function greet(name: string | string[]): string | string[] {
  if (Array.isArray(name)) {
    return name.map((n) => `Welcome, ${n}!`)
  }
  return `Welcome, ${name}!`
}

// 已知此时应该是 string[] ，所以用类型断言将其指定为 string[]
// 如果不用类型断言，会导致 greetings 的类型依然为 string | string[]
const greetings = greet(['Petter', 'Tom', 'Jimmy']) as string[]

// 现在可以正常使用 join 方法
const greetingSentence = greetings.join(' ')
console.log(greetingSentence)

函数

① 函数的基本写法

// 写法一：函数声明
function sum1(x: number, y: number): number {
  return x + y
}

// 写法二：函数表达式
const sum2 = function(x: number, y: number): number {
  return x + y
}

// 写法三：箭头函数
const sum3 = (x: number, y: number): number => x + y

// 写法四：对象上的方法
const obj = {
  sum4(x: number, y: number): number {
    return x + y
  }
}

② 函数的可选参数

// 注意 isDouble 这个入参后面有个 ? 号，表示可选
function sum(x: number, y: number, isDouble?: boolean): number {
  return isDouble ? (x + y) * 2 : x + y
}

// 这样传参都不会报错，因为第三个参数是可选的
sum(1, 2) // 3
sum(1, 2, true) // 6

PS：可选参数必须排在必传参数的后面

③ 无返回值的函数

// 注意这里的返回值类型
function sayHi(name: string): void {
  console.log(`Hi, ${name}!`)
}

sayHi('Petter') // Hi, Petter!

PS：void 和 null 、 undefined 不可以混用，如果的函数返回值类型是 null ，那么是真的需要 return 一个 null 值

④ 异步函数的返回值

// 注意这里的返回值类型
function queryData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World')
    }, 3000)
  })
}

queryData().then((data) => console.log(data))

⑤ 不需要显示指定类型（函数和对象）

// 函数
function sum(x: number, y: number) {
  return x + y;
}
const value = sum(1, 2);

// 对象的接口
interface Obj {
  // 不需要显式的定义出来
  sum: (x: number, y: number) => number
}

// 声明一个对象
const obj: Obj = {
  sum(x: number, y: number): number {
    return x + y
  }
}

PS：之所以不用显示指定类型，是因为这种情况 TypeScript 会自动推导出它的类型

⑥ 函数重载

function greet(name: string): string; // 传入 string 返回值必定是 string
function greet(name: string[]): 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!' ]

任意值

如果实在不知道应该如何定义一个变量的类型， TypeScript 也允许使用任意值 any

// 这里的入参显式指定了 any
function getFirstWord(msg: any) {
  // 这里使用了 String 来避免程序报错
  console.log(String(msg).split(" ")[0]);
}

getFirstWord("Hello World");
getFirstWord(123);

PS：使用 any 的目的是让在开发的过程中，可以不必在无法确认类型的地方消耗太多时间，不代表不需要注意代码的健壮性，一旦使用了 any ，代码里的逻辑请务必考虑多种情况进行判断或者处理兼容

类型推论

说白了就是 TypeScript 能够自动推理出的类型，因此可以省略部分代码的写法

// 相当于 msg: string
let msg = 'Hello World'

// 所以要赋值为 number 类型时会报错
msg = 3 // Type 'number' is not assignable to type 'string'


// 相当于 getRandomNumber(): number
function getRandomNumber() {
  return Math.round(Math.random() * 10)
}

// 相当于 num: number
const num = getRandomNumber()


// 此时相当于 foo: any
let foo

// 所以可以任意改变类型
foo = 1 // 1
foo = true // true

PS：我的看法是，使用 VSCode 时 Prettier 插件会实时检测 TypeScript 的代码，如果写得有问题会出现红色波浪线，因此可以先按照 JavaScript 思路写，提示错误了再去修改（添加类型），但必要的时候，该写上的还是要写上