1、TypeScript简介
- TypeScript 是 JavaScript 的超集。
- 它对 JS 进行了扩展,向 JS 中引入了类型的概念,并添加了许多新的特性。
- TS 代码需要通过编译器编译为 JS,然后再交由 JS 解析器执行。
- TS 完全兼容 JS,换言之,任何的 JS 代码都可以直接当成 TS 使用。
- 相较于 JS 而言,TS 拥有静态类型,更加严格的语法,更强大的功能;TS 可以在代码执行前就完成代码的检查,减小了运行时异常出现的几率;TS 代码可以编译为任意版本的 JS 代码,可有效解决不同 JS 运行环境的兼容问题;同样的功能,TS 的代码量要大于 JS,但由于 TS 的代码结构更加清晰,变量类型更加明确,在后期代码的维护中 TS 却远远胜于 JS。
2、TypeScript 开发环境搭建
-
下载 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
-
安装 Node.js
-
使用 npm 全局安装 typescript
- 进入命令行
- 输入:
npm i -g typescript
- 安装过程中可能出现的问题:npm 全局安装 TypeScript 出错
-
创建一个 ts 文件
-
使用 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;
-
-