买了个域名 如何建网站,网络营销专业,wordpress 删除页眉,wordpress和网站区别系列文章目录
TypeScript 从入门到进阶系列
TypeScript 从入门到进阶之基础篇(一) ts基础类型篇TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇TypeScript 从入门到进阶之基础篇(三) 元组类型篇TypeScript 从入门到进阶之基础篇(四) symbol类型篇TypeScript 从入门到进阶…
系列文章目录
TypeScript 从入门到进阶系列
TypeScript 从入门到进阶之基础篇(一) ts基础类型篇TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇TypeScript 从入门到进阶之基础篇(三) 元组类型篇TypeScript 从入门到进阶之基础篇(四) symbol类型篇TypeScript 从入门到进阶之基础篇(五) 枚举类型篇 持续更新中… 文章目录 系列文章目录TypeScript 从入门到进阶系列前言一、联合类型二、交叉类型类型(断言 、推论、别名) 面试常问1、类型断言重点1.1、 尖括号语法1.2、 as语法 2、类型推论3、类型别名 前言 在一到五章我们学习了在TypeScript 中 定义和使用各种类型 ,本章我们来学习TypeScript 在 类型断言 、推论、别名| 联合类型 | 交叉类型 请注意 本章内容 可能会出现在你面试时的面试题 是面试题常问的内容 一、联合类型 在 TypeScript 中联合类型是指可以同时具有多个类型的类型。它使用 | 符号来表示多个类型之间的联合关系。 联合类型的变量可以接受其中任意一个类型的值。 例如可以定义一个变量它可以接受 string 或 number 类型的值
let myVariable: string | number;这样myVariable 变量可以被赋值为一个字符串或一个数字如下所示
myVariable Hello World;
myVariable 123;联合类型在函数参数、返回值以及变量声明等场景中非常有用。它可以增加代码的灵活性使得代码更加健壮和可维护。
二、交叉类型 在TypeScript中交叉类型Intersection Types是一种组合多个类型的方式。交叉类型可以将多个类型合并成一个类型从而具备合并类型的所有特性。 交叉类型使用符号表示例如type A B C;表示类型A是同时具备类型B和类型C的属性和方法。
交叉类型的作用是将多个类型的特性合并在一起使得一个对象具备多个类型的属性和方法。举个例子假设有一个接口A表示可触发事件的对象以及一个接口B表示可拖拽的对象可以通过交叉类型将两个接口合并成一个新的接口C表示既可以触发事件又可拖拽的对象。
interface A {on(event: string, callback: () void): void;
}interface B {drag(): void;
}type C A B;const obj: C {on(event, callback) {// 触发事件的逻辑},drag() {// 拖拽的逻辑}
};通过上述例子可以看出交叉类型可以让对象具备多个类型的特性并且可以通过类型注解来保证对象满足合并类型的要求。
类型(断言 、推论、别名) 面试常问
1、类型断言重点 在 TypeScript 中类型断言Type Assertion是一种告诉编译器某个值的类型的方式。类型断言可以在编译时确定某个值的类型方便进行类型检查和类型推断。 有两种形式的类型断言
1.1、 尖括号语法
let str: any hello;
let length: number (stringstr).length;在尖括号内指定要断言的类型在这个例子中断言 str 是一个字符串类型。编译器会将 str 的类型视为 string从而可以调用 length 属性。
1.2、 as语法
let str: any hello;
let length: number (str as string).length;使用 as 关键字将要断言的类型放在 as 的后面。这个例子与上面的例子是等效的。 需要注意的是类型断言只会在编译时起作用不会改变原始值的类型。所以在进行类型断言时要确保断言的类型是正确的否则可能会导致类型错误。 2、类型推论 在TypeScript中类型推论是指 TypeScript编译器自动根据变量的初始值推断其类型的过程。当你声明一个变量并赋予初始值时TypeScript编译器会根据这个初始值的类型来推断该变量的类型。 例如当你声明一个变量并直接赋值一个数字时
let num 10;//注意 如果你定义了一个类型 但没有给其赋值
//那么 a 的类型为 any
let a;TypeScript 编译器会根据初始值 10 推断出 num 的类型为 number。这样在后续的代码中你就可以使用 num 作为一个数字类型的变量并且编译器会对相关的类型进行检查。
又例如vue3中 ref 的使用 在赋值时会自动推论类型
const boolref(true)
const strref(类型)类型推论的好处是可以减少手动类型注解的工作量并且使代码更简洁。然而当初始值无法明确推断出类型时你可能需要手动添加类型注解来指定变量的类型。
3、类型别名 在 TypeScript 中类型别名Type Alias允许我们给一个类型起一个新的名字。通过使用类型别名我们可以用一个简洁的名称来表示复杂的类型。 类型别名可以用来命名任何类型包括原始类型如字符串、数字等联合类型交叉类型对象类型等。比如
type MyString string;
type MyNumber number;
type MyBoolean boolean;// 联合类型
type MyUnion string | number;// 交叉类型
type MyIntersection MyNumber MyBoolean;// 对象类型
type MyObject {prop1: string;prop2: number;
};使用类型别名可以增加代码的可读性和可维护性特别是在处理复杂的类型时。类型别名的语法是 type 关键字加上一个名称后面紧跟等号和类型定义。
类型别名还可以用于定义泛型类型函数类型等。通过使用类型别名我们可以将复杂的类型定义简化为一个具有描述性的名称提高代码的可读性和可理解性。
