1.联合类型
- typescript的类型系统允许我们使用多种运算符,从现有类型中构建新类型
- 联合类型(Union Type)
- 联合类型是由两个或者多个其他类型组成的类型
- 表示可以是这些类型中的任何一个值
- 联合类型中的每一个类型被称之为联合成员(union‘s members)
let foo: number | string = 'abc'
foo = 123
function printID(id: number | string) {
if (typeof id == 'string') {
console.log(id.length)
} else {
console.log(id)
}
}
printID(123)
printID('abc')
2.类型别名
// 类型别名:type
type MyNumber = number
const age: MyNumbe
- [ ] List item
r = 18
type IdType = number | string
function printID(id: IdType) {
console.log(id)
}
printID(123)
3.接口的声明
- type和interface中的区别
- type类型使用范围更广,接口类型只能用来声明对象
- 在声明对象时,interface可以多次声明
- type不允许两个相同的名称的别名同时存在
- interface可以多次声明同一个接口名称
- interface支持继承
- interface可以被类实现
- 总结
- 如果是非对象类型定义使用type,如果是对象类型的声明那么使用interface
// 1.区别一:type类型使用范围更广,接口类型只能用来声明对象
type MyNumber = number
type IdType = number | string
// 2.区别二:在声明对象时,interface可以多次声明
// 2.1 type不允许两个相同的名称的别名同时存在
type PointType1 = {
x: number
y: number
}
type PointType1 = {
z?: number
}
// 2.2. interface可以多次声明同一个接口名称
interface PointType {
x: number
y: number
}
interface PointType {
z?: number
}
const point: PointType = {
x: 10,
y: 10,
z: 200,
}
// 3.interface支持继承
interface IPerson {
name: string
age: number
}
interface IKun extends IPerson {
kouhao: string
}
const ikun1: IKun = {
kouhao: '你干嘛,哎呦',
name: 'kobe',
age: 30,
}
// 4.interface可以被类实现
class Person implements IPerson {}
// 总结:如果是非对象类型定义使用type,如果是对象类型的声明那么使用interface
4.交叉类型(Intersection Types)
- 交叉类似表示需要满足多个类型的条件
- 交叉类型使用 & 符号
// 交叉类型:两种(多种)类型要同时满足
type NewType = number & string
interface IKun {
name: string
age: string
}
interface ICoder {
name: string
coding: () => void
}
const info: IKun & ICoder = {
name: 'why',
age: '18',
coding: function () {
console.log('coding')
},
}
5.类型断言 as
- 断言的规则
- 断言只能断言成更加具体的类型,或者不太具体(any/unknow)类型
- TS类型检测来说是正确的,但是这个代码本身不太正确
// 使用类型断言
const imgEl = document.querySelector('.img') as HTMLImageElement
imgEl.src = 'xxx'
imgEl.alt = 'yyy'
// 类型断言的规则:断言只能断言成更加具体的类型,或者不太具体(any/unknow)类型
const age: number = 28
const age2 = age as number
// TS类型检测来说是正确的,但是这个代码本身不太正确
const age3 = age as any
const age4 = age3 as string
6.非空类型断言!
非空类型断言使用的是!,表示可以确定某个标识符是有值的,跳过ts在编译阶段对它的检测
// 定义接口
interface IPerson {
name: string
age: number
friend?: {
name: string
}
}
const info: IPerson = {
name: 'why',
age: 18,
}
// 访问属性:可选链:?
console.log(info.friend?.name)
// 属性赋值:
// 解决方案一:类型缩小
if (info.friend) {
info.friend.name = 'kobe'
}
// 解决方案二:非空类型断言(有点危险,只有确保friend一定有值的情况,才能使用)
info.friend!.name = 'kobe'
7、字面量类型的基本使用
// 1.字面量的基本使用
const name = "why";
let age: 18 = 18;
// 2.将多个字面量类型联合起来
type Direction = "left" | "right" | "up" | "down";
const d1: Direction = "left";
// 例子:封装请求方法
type MethodType = "get" | "post";
function request(url: string, method: MethodType) {}
request("http://codercba.com/api/aaa", "get");
// TS细节
const info = {
url: "xxxx",
method: "post",
};
// 下面的做法是错误:info.method获取的是string类型
// request(info.url, info.method);
// 解决方案一:info.method进行类型断言
request(info.url, info.method as "post");
// 解决方案二:直接让info对象类型是一个字面量类型
const info1: { url: string; method: "post" | "get" } = {
url: "xxxx",
method: "post",
};
request(info1.url, info1.method);
const info2 = {
url: "xxxx",
method: "post",
} as const;
// xxxx本身就是string类型
request(info2.url, info2.method);
8、类型缩小
- 什么是类型缩小
- 类型缩小的英文是Type Narrowing
- 我们可以通过类似于 typeof padding===‘number’的判断语句,来改变Typescript的执行方法
- 在给定的执行路径中,我们可以缩小比声明时更小的类型,这个过程称之为缩小(Narrowing)
- 而我们编写的typeof padding===‘number’可以称之为类型保护(type guards)
- 常见的类型保护
- typeof
- 平等缩小(比如===、!==)
- instanceof
- in
- 等等
// 1.typeof使用最多的
function printID(id: number | string) {
if (typeof id == "string") {
console.log(id.length, id.split(""));
} else {
console.log(id);
}
}
// 2.平等缩小 ===/!==:方向类型判断
type Direction = "left" | "right" | "up" | "down";
function switchDirection(direction: Direction) {
if (direction == "left") {
console.log("左", "角色向左移动");
} else if (direction == "right") {
console.log("右", "角色向右移动");
} else if (direction == "up") {
console.log("上", "角色向上移动");
} else if (direction == "down") {
console.log("下", "角色向下移动");
}
}
// instanceof: 传入一个日期,打印日期
function printDate(date: string | Date) {
if (date instanceof Date) {
console.log(date.getTime());
} else {
console.log(date);
}
}
//in: 判断是否有某一个属性
interface ISwim {
swim: () => void;
}
interface IRun {
run: () => void;
}
function move(animal: ISwim | IRun) {
if ("swim" in animal) {
animal.swim();
} else if ("run" in animal) {
animal.run();
}
}
const fish: ISwim = {
swim: function () {},
};
const dog: IRun = {
run: function () {},
};