TypeScript学习笔记

TypeScript

TypeScript有什么用

1. TypeScript出现的目的为了解决JavaScript中的一些缺点，
2. 它是一个以JavaScript为基础构建的语言；
3. 它是JS的一个超集，它扩展了JS，并添加了类型的概念，使JS从动态类型变为静态类型（例如给一个变量赋值为数值之后，它就只能存放数值类型的数据了）。
4. 它可以在任何支持JavaScript的平台中执行。

注意：TS不能被JS解析器直接执行，它需要被编译为JS代码然后才能执行。

TypeScript增加了什么

• 类型
• 支持ES的新特性
• 添加ES不具备的新特性（抽象类、接口等等）
• 丰富的配置选项
• 强大的开发工具

TypeScript开发环境搭建

1. 下载Node.js
2. 安装Node.js
3. 使用npm全局安装TypeScript
   • 安装命令：

     npm install -g typescript
     

4. 创建 TS 文件
5. 使用tsc对ts文件进行编译
   • 使用命令行进入ts文件所在目录
   • 执行命令：

     tsc xxx.ts
     

类型

TypeScript中的数据类型

类型	语法	描述
number	变量：number	任意数字
string	变量：string	任意字符串
boolean	变量：boolean	布尔值
字面量	变量：值	限制变量的值就是该字面量的值
any	变量：any	任意类型
unknown	变量：unknown	类型安全的any
void	变量：void	返回值不能是 null 和 undefined 之外的任何值
never	变量：never	不能是任何值
object	变量：object	任意的JS对象
array	变量：array	任意的JS数组
tuple	变量：tuple	元组，TS新增类型，固定长度的数组
enum	变量：enum	枚举，TS新增类型，列举所有可能的取值

声明类型

类型声明是TypeScript非常重要的一个特点，它通过类型声明可以指定TS中变量（参数、形参）的类型。
指定类型后，当为变量赋值时，TypeScript编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

• 语法：

 let 变量: 类型
 let 变量: 类型 = 值
function fn(参数: 类型, 参数: 类型): 类型 {
  ···
}

由于是将TS代码编译为JS代码，所以根据JS动态类型的特点，即使为变量赋值报错时，编译仍然可以通过

给变量声明类型

在TS中给变量设置类型的方法是使用冒号:后跟数据类型

先声明后使用

在变量声明阶段设置变量的类型，然后再对类型进行赋值。

let num: number;
num = 123;
num = 'str';  // 此时会报错

变量初始化的同时设置类型

在给变量进行初始化的同时为变量设置数据类型

let num: number = 123;  // 此时num变量类型设置为 number,且值为 123
num = 789;
num = 'str';    // 由于将变量 num 的数据类型设置为 number，所以输入字符串类型的值会报错

字面量类型

当给变量设置为字面量类型时，就相当于是限制变量的值为设置的字面量的值

let gender: 'male' | 'female';
// 此时gender的值只能是 male 或者 female,除此之外的任何值都会报错
gender = 'male';
gender = 'female';

给函数及函数的形参设置类型

给函数设置类型就是相当于 给函数返回值设置类型

// 给形参设置类型
function fn(a: number, b: number) {
  
};
// 给函数设置类型
function fn(a, b):number {
  
}
// 两者结合
function fn(a: number, b: number): number {
   
}

给对象中的属性设置类型

由于JavaScript中所有的复杂类型都是对象，所以将变量的类型设置为对象并没有什么作用;主要是为了给对象中的属性设置类型

语法：let obj: object 或者 let obj: {}。

单纯的给变量设置对象类型

let obj: object;
// 由于 函数 和 数组都是对象，所以下面的行为 不会报错
obj = function () {};
obj = [];

给对象的属性设置类型

let obj: {name: string};
obj = {name: 1234};   // 报错：name属性只能是 string 类型

上面的方法只适用于一个对象中只有几个特定的属性，当一个对象的属性数量没有限制时，可以通过给特定属性设置类型，其他属性使用方括号括起来作为可选属性

// obj对象中的 name 和 age 属性设置类型，其他的属性不做限制
let obj: {name: string, age: number, [propName: string]: any};
obj = {
   name: '孙悟空',
   age: 999999,
   gender: 0,
   type: 'monkey'
}

tuple

tuple类型是TS新增的类型，它是相当于一个可以设置固定长度的数组，当数组项无论是超过设置的长度还是少于设置的长度都会报错。

let j: [string,string];   // 定义只有两个 string 类型数组项的数组
j = ['hello']   // 报错：此时数组项少于设定的长度
j = ['hello', 'TypeScript', '123456']   // 报错：此时数组项超过设定的长度
// 正确写法
j = ['hello', 'TypeScript']

enum

enum 枚举类型，它将所有的可能的取值，列举出来，取值只能是被列举出来的值之一。
语法：enum 变量名 { 存放所有可能的值 }

// 设置一个 enum 类型的变量
enum Gender {
  Male ,
  Female
}

let obj: {name: string, gender: Gender};
obj = {
  name: 'monkeysun', 
   // 使用 变量
  gender: Gender.Male
}

any与unknown区别

any类型没有任何限制，该类型的变量可以是任意类型的值。在声明变量而不赋值的时候，如果不设置类型，就相当于隐式的设置了 any 类型 。

unknown类型表示未知类型，该类型的变量没有类型

它们的区别在于，any 类型的变量可以是任何类型，而 unknown 类型的变量在任何时候都没有类型

类型断言

它的作用就是在TS编译器无法判断一个变量的类型时，告诉 TS 编译器，这个变量的实际类型
语法：as 或者 <type>

let a: any;
let b: unknown;
let c: boolean;
c = a as boolean;
b = <string>c;

void与never的区别

void类型用来表示空，在函数中表示没有返回值的函数，除了返回 null 和 undefined 以外的任何值都会报错

never类型在函数中表示函数不能有返回值，即使返回 null 和 undefined 也会报错

// void
function fn(): void {
   return undefined;
}

function fn3(): void {
   return null;
}

// never
function fn2(): never {
  
}

类型的别名

对于一些比较复杂，重复性高的类型设置，可以通过给它们取别名的方法来避免重复写相同的类型设置,当要使用时，可以直接使用别名

语法：type 别名: 类型

// 使用别名前
let a: 1 | 2 | 3 | 4 | 5;
let b: 1 | 2 | 3 | 4 | 5;
a = 2;
b = 5;

使用别名

type myType: 1 | 2 | 3 | 4 | 5;
let a: myType;
let b: myType;
a = 2;
b = 5;

自动类型判断

TypeScript拥有自动类型判断的机制，当一个变量的声明和赋值同时进行时，TS编译器会将当前所赋的值的类型设置为该变量的类型。

let a = 123;  // 变量 a 的类型被自动设置为 number
a = 'str';    // 此时会报错
let str = 'abcd';	// 此时变量 str 的类型为 string