这是我参与「第四届青训营」笔记创作活动的的第6天

什么是TypeScript？

TypeScript的作者是[安德斯·海尔斯伯格]，[C#]的[首席架构师]。它是[开源]和跨平台的编程语言。它是[JavaScript]的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的[面向对象编程]。

TypeScript扩展了[JavaScript]的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

上文摘自百度百科，在我看来，TypeScript就是对JavaScript的一种约束与扩展，使得JavaScript更易于使用且更加安全，避免出现本能在编译期通过类型就能避免的错误。

为什么要TypeScript？

就如上面所说，TypeScript能使我们更加从容方便的使用JavaScript，提高了项目代码的可读性和可维护性，在大型项目中提高了项目的稳定性和开发效率。

TypeScript有什么？

一、基础类型

第一行为原始的TS代码

第二行为编译的JS代码

Boolean 类型

let isDone: boolean = false;
// ES5：var isDone = false;

Number 类型

let count: number = 10;
// ES5：var count = 10;

String 类型

let name: string = "Semliker";
// ES5：var name = 'Semlinker';

Array 类型

let list: number[] = [1, 2, 3];
// ES5：var list = [1,2,3];

let list: Array<number> = [1, 2, 3]; // Array<number>泛型语法
// ES5：var list = [1,2,3];

Enum 类型

enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}

let dir: Direction = Direction.UP;

上面的枚举示例代码经过编译后会生成以下代码：

"use strict";
var Direction;
(function (Direction) {
  Direction[(Direction["UP"] = 0)] = "UP";
  Direction[(Direction["DOWN"] = 1)] = "DOWN";
  Direction[(Direction["LEFT"] = 2)] = "LEFT";
  Direction[(Direction["RIGHT"] = 3)] = "RIGHT";
})(Direction || (Direction = {}));
var dir = Direction.UP;

当然我们也可以设置 NORTH 的初始值，比如:

enum Direction {
  UP = 3,
  DOWN,
  LEFT,
  RIGHT,
}

Any 类型

let notSure: any = 666;
notSure = "Semlinker";
notSure = false;

Unknown 类型

let value: unknown;

value = true; // OK
value = 42; // OK
value = "Hello World"; // OK
value = []; // OK
value = {}; // OK
value = Math.random; // OK
value = null; // OK
value = undefined; // OK
value = new TypeError(); // OK
value = Symbol("type"); // OK

二、复杂类型

Object主要有两种定义方式：

type：

type Foo = {
    a?: string
}

interface：

interface Foo {
    a?: string
}

三、类型断言

通过类型断言可以告诉编译器，“相信我，我知道他是什么”，类型断言好比其他语言里的类型转换。

类型断言有两种形式：

“尖括号” 语法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

as 语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

四、类型守卫

类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。目前主要有四种的方式来实现类型保护：

in 关键字

interface Admin {
  name: string;
  privileges: string[];
}

interface Employee {
  name: string;
  startDate: Date;
}

type UnknownEmployee = Employee | Admin;

function printEmployeeInformation(emp: UnknownEmployee) {
  console.log("Name: " + emp.name);
  if ("privileges" in emp) {
    console.log("Privileges: " + emp.privileges);
  }
  if ("startDate" in emp) {
    console.log("Start Date: " + emp.startDate);
  }
}

typeof 关键字

function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
      return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
      return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

instanceof 关键字

interface Padder {
  getPaddingString(): string;
}

class SpaceRepeatingPadder implements Padder {
  constructor(private numSpaces: number) {}
  getPaddingString() {
    return Array(this.numSpaces + 1).join(" ");
  }
}

class StringPadder implements Padder {
  constructor(private value: string) {}
  getPaddingString() {
    return this.value;
  }
}

let padder: Padder = new SpaceRepeatingPadder(6);

if (padder instanceof SpaceRepeatingPadder) {
  // padder的类型收窄为 'SpaceRepeatingPadder'
}

自定义类型保护的类型谓词

function isNumber(x: any): x is number {
  return typeof x === "number";
}

function isString(x: any): x is string {
  return typeof x === "string";
}

。。。。

TypeScript的应用？

配合打包工具使用：

Webpack配置

安装typescript和ts-loader
配置类似如下：

// 引入路径模块
const path = require("path");

module.exports = {
    // 从哪里开始编译
    entry: "./src/index.ts",
    // 编译到哪里
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    // 配置模块规则
    module: {
        rules: [
            {
                test: /.tsx?$/,    // .ts或者tsx后缀的文件，就是typescript文件
                use: "ts-loader",   // 就是上面安装的ts-loader
                exclude: "/node-modules/" // 排除node-modules目录
            }
        ]
    },
    // 模式
    mode: "development",
}

Vite配置

无需配置，以内置

Typescript｜ 青训营笔记