1、TypeScript简介

  1. TypeScript 是 JavaScript 的超集。
  2. 它对 JS 进行了扩展，向 JS 中引入了类型的概念，并添加了许多新的特性。
  3. TS 代码需要通过编译器编译为 JS，然后再交由 JS 解析器执行。
  4. TS 完全兼容 JS，换言之，任何的 JS 代码都可以直接当成 TS 使用。
  5. 相较于 JS 而言，TS 拥有静态类型，更加严格的语法，更强大的功能；TS 可以在代码执行前就完成代码的检查，减小了运行时异常出现的几率；TS 代码可以编译为任意版本的 JS 代码，可有效解决不同 JS 运行环境的兼容问题；同样的功能，TS 的代码量要大于 JS，但由于 TS 的代码结构更加清晰，变量类型更加明确，在后期代码的维护中 TS 却远远胜于 JS。

2、TypeScript 开发环境搭建

  1. 下载 Node.js
  • 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
  • 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
  1. 安装 Node.js
  2. 使用 npm 全局安装 typescript
  • 进入命令行
  • 输入：npm i -g typescript
  • 安装过程中可能出现的问题：npm 全局安装 TypeScript 出错
  1. 创建一个 ts 文件
  2. 使用 tsc 对 ts 文件进行编译
  • 进入命令行
  • 进入 ts 文件所在目录
  • 执行命令：tsc xxx.ts

3、基本类型

  • 类型声明
  • 类型声明是 TS 非常重要的一个特点。
  • 通过类型声明可以指定 TS 中变量（参数、形参）的类型。
  • 指定类型后，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错。
  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值。
  • 语法：
let 变量: 类型;
let 变量: 类型 = 值;
 let 变量 = 值;  // 自动检测数据类型（简写）
function fn(参数: 类型, 参数: 类型): 类型{
    ...
}
  • 自动类型判断
  • TS 拥有自动的类型判断机制。
  • 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断变量的类型。
  • 所以，如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明。
  • 类型：

类型

例子

描述

number

1, -33, 2.5

任意数字

string

‘hi’, “hi”, hi

任意字符串

boolean

true、false

布尔值true或false

字面量

其本身

限制变量的值就是该字面量的值

any

*

任意类型

unknown

*

类型安全的any

void

空值（undefined）

没有值（或undefined）

never

没有值

不能是任何值

object

{name:‘孙悟空’}

任意的JS对象

array

[1,2,3]

任意JS数组

tuple

[4,5]

元素，TS新增类型，固定长度数组

enum

enum{A, B}

枚举，TS中新增类型

  • number：任意数字
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
  • boolean：布尔值true或false
let isDone: boolean = false;
  • string：任意字符串
let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;
  • 字面量：限制变量的值就是该字面量的值
  • 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围。
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;

// 直接使用字面量进行类型的声明，变量a的值只能是10
let a: 10;
a = 10;
// a = 11;  // 提示错误

// 可以使用 |（或） 来连接多个类型（联合类型）
let b: 'male' | 'female';
b = 'male';
b = 'female';

let c: string | boolean;
c = true;
c = 'hello';
  • any：任意类型
// any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
// let d: any;  // 显示设置any类型
// 声明变量如果不指定变量，则TS解析器会自动判断变量的类型为any（隐式的any）
let d;
d = 10;
d = 'hello';
d = true;
  • unknown：类型安全的any
// unknown 表示未知类型的值, 实际上就是一个类型安全的any
let e: unknown;
e = 10;
e = 'hello';
e = true;

let s: string;
let d;
// d的类型为any,它可以赋值给任意变量
s = d;

e = 'hello';
// unknown 类型的变量，不能直接赋值给其它变量
if (typeof e === "string") {
	s = e;
}
// s = e;

let notSure: unknown = 4;
notSure = 'hello';
  • void：没有值（或undefined）
let unusable: void = undefined;
// function fn(num): string | number {
//     if (num > 0) {
//         return '123';
//     } else {
//         return 123;
//     }
// }

// void 用来表示空，以函数为例，就表示函数没有返回值
function fn(): void {
	return;
}
  • never：不能是任何值
// never 表示永远不会返回结果
function error(message: string): never {
  throw new Error(message);
}
  • object（没啥用）：任意的JS对象
let obj: object = {};
// object 表示一个js对象
let a: object;
a = {};
a = function () { };

// {} 用来指定对象中可以包含哪些属性
// 语法： {属性名：属性值，属性名：属性值}
// 在属性名后边加上？，表示该属性时可选的
let b: { name: string, age?: number };
b = { name: '孙悟空', age: 18 };

// [propName: string]:any 表示任意类型的属性
let c: { name: string, [propName: string]: any };
c = { name: '猪八戒', age: 18, gender: '男' };

/**
 * 设置函数结构类型声明：
 * 语法：(形参:类型, 形参:类型, ...) => 返回值类型 
 * */
let d: (a: number, b: number) => number;
d = function (n1, n2) {
	return n1 + n2;
}
  • array：任意JS数组
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
/**
 * 数组的类型声明：
 *     1. 类型[]
 *     2. Array<类型> 
 * */

// string[] 表示字符串数组
let e: string[];
e = ['a', 'b', 'c'];

// number[] 或者 Array<number> 都表示数值数组
let f: number[];
let g: Array<number>;
g = [1, 2, 3];
  • tuple：元素，TS新增类型，固定长度数组
/**
 * tuple 元组：固定长度的数组
 * 语法：[类型, 类型, 类型, ...] 
 * */
let x: [string, number];
x = ["hello", 10];
  • enum：枚举，TS中新增类型
enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;

// 枚举
enum Gender {
	Male,
	Female,
}

let i: { name: string, gender: Gender };
i = { name: '孙悟空', gender: Gender.Male };
console.log(i.gender === Gender.Male);  // true

// & 表示同时
let j: { name: string } & { age: number };
j = { name: '孙悟空', age: 18 };

// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5;   // 声明myType的类型
let k: myType;
let l: myType;

k = 2;
  • 类型断言
  • 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：
  • 语法：
  • 变量 as 类型
  • <类型>变量
  • 第一种
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
  • 第二种
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;