感谢b站up主奇乐编程学院的分享
感谢尚硅谷TypeScript教程
JS 的缺陷
由于没有编译和类型检查的束缚，JS很灵活，但这种灵活性导致代码难以维护，很多bug在运行时才发现。TS = JS + 类型标注
TSC (TS编译器)
要执行 TS 代码，需要先将它转译成 JS 才行，这个转译器就是 TSC
TS 数据类型
JS 数据类型有8种(数字不服，两空一对象和大整数)：
number、string、boolean、symbol、null、undefined、object、bigint。JS 的数据类型为每个值的具体类型。
TS 的数据类型为一个类型的集合。TS 数据类型为 JS 的8种类型，加上 TS 基本类型： void、never、enum枚举、unknown、any，再加上自定义类型 type和interface，如果不指定变量类型，默认就是any任意类型。
类型声明
指定 TS 中变量（形参和实参）的类型
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
}
自动类型判断
let i = 1; // 不用标注类型
let str = "你好";
TS 描述 对象 的数据类型
- 用
class/constructor描述
面向对象就是程序中所有的操作都需要通过对象来完成。 要想面向对象，操作对象，首先要先定义类，即对象的模型，根据类创建指定类型的对象，再创建对象
class 类名 {
属性名: 类型;
constructor(参数: 类型){
this.属性名 = 参数;
}
方法名(){}
}
class Person{
name: string;
age: number;
constructor(name: string, age: number){
this.name = name;
this.age = age;
}
sayHello(){
console.log(`大家好，我是${this.name}`);
}
}
// 使用类
const p = new Person('孙悟空', 18);
p.sayHello();
- 用
type或interface描述（推荐）
- interface接口
限制对象的类型，接口中指定对象应当包含哪些属性，每个属性的类型
interface User {
name: string;
id: number;
}
- type类型别名
type UserID = number | string;
// 在其他地方用到相同的类型，直接引用别名的类型，避免代码重复
function getUserInfo(userId: UserID){
}
联合类型
变量可以是多种类型中的任意一种。
// | 含义是并
type number = 1 | 1.1 | 1.11 | 2 | 2.01 | ...
type string = a | b | ab | c | abc | ...
let color: number | string;
color = "red"; // 表示 颜色名称
color = Oxff0000; // 表示成 16进制的颜色值
type A1 = number;
type B1 = string;
type C1 = A1 | B1;
const c1: C1 = 42;
TS 描述 函数对象
// 形参类型、返回值类型指定为 number
type FnA = (a: number, b:number) => number
const a: FnA = () =>{
return 1
}
- 可选参数
function multiply(a:number, b?:number){ // b 为可选参数
return a * b;
}
multiply(1, 2);
- 函数没有返回值
void
function sayHi(): void{
alert("嗨!");
}
- 函数类型签名
// 传入一个回调函数来获取用户的名字
function getUserName(callback:(data:string) => void){
getUserName((data)=>{
alert(data);
});
}
TS 描述 数组
let arr: number[];
arr = [1, 2, 3];
let arrOfArray: number[][];
arrOfArray = [
[1, 2, 3],
[4, 5, 6],
];
type A = string[];
const a: A = ['h', 'i'];
// 用泛型类写
type A = Array<string>;
- 元组
数组中元素的个数和类型都是确定的。
let point: [number, number, number];
point = [1, 2, 3]; // 表示三维坐标，有且仅有3个数据构成
let point: [number, number, number?]; // 第3个数字可以省略掉
TS 描述其他对象
用 class 描述
const d: Date = new Date();
const r: RegExp = /ab+c/;
const m: Map<string, number> = new Map();
TS 面试题
TS和JS的区别是什么？有何优势?
- 语法层面：TS = JS + Type类型标注 ( TS 是 JS 的超集)
- 执行环境层面：浏览器、Node.js可以直接执行JS，但不能执行TS（Deno可执行TS）
- 编译层面：TS有编译阶段，JS没有编译阶段，只有转译和lint阶段
- 编写层面：TS更难写一点，但是类型更安全
- 文档层面：TS的代码写出来就是文档，IDE可以完美提示
