第三节：TypeScript类型补充和函数详解(参数、返回值、类型、参数【可选/默认】、剩余参数、this、重载)
一. TypeScript类型补充
1. 类型断言
有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions） ，TypeScript只允许类型断言转换为 更具体 或者 不太具体 的类型版本，此规则可防止不可能的强制转换。
符号：as
// 1.类型断言 as const el = document.getElementById("why") as HTMLImageElement el.src = "url地址" // 2.另外案例: Person是Student的父类 class Person { } class Student extends Person { studying() { } } function sayHello(p: Person) { (p as Student).studying() } const stu = new Student() sayHello(stu)
2. 非空断言
我们确定传入的参数是有值的，这个时候我们可以使用非空类型断言。非空断言使用的是 ! ，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测
符号：！
// message? -> undefined | string function printMessageLength(message?: string) { // if (message) { // console.log(message.length) // } // vue3源码中很多这种写法 console.log(message!.length) } printMessageLength("aaaa") printMessageLength("hello world")
3. 可选链
可选链事实上并不是TypeScript独有的特性，它是ES11（ES2020）中增加的特性：
符号 ?.
它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行， 虽然可选链操作是ECMAScript提出的特性，但是和TypeScript一起使用更版本。
// 定义类型 type Person = { name: string friend?: { name: string age?: number, girlFriend?: { name: string } } } // 声明对象 const info: Person = { name: "why", friend: { name: "kobe", girlFriend: { name: "lily" } } } // 另外一个文件中 console.log(info.name) // console.log(info.friend!.name) console.log(info.friend?.name) console.log(info.friend?.age) console.log(info.friend?.girlFriend?.name)
4. !!运算符
将一个其他类型转换成boolean类型；类似于Boolean(变量)的方式；
const message = "Hello World" // const flag = Boolean(message) // console.log(flag) const flag = !!message console.log(flag)
5. ??运算符
它是ES11增加的新特性；
空值合并操作符（??）是一个逻辑操作符，当操作符的左侧是 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数 。
let msg1: string | null = 'hello ts'; let msg2: string | null = null; const result1 = msg1 ?? 'hello js'; // 上面等价于 const result2 = msg1 ? msg1 : 'hello js'; console.log(result1); console.log(result2); const result3 = msg2 ?? 'hello js'; // 上面等价于 const result4 = msg2 ? msg2 : 'hello js'; console.log(result3); console.log(result4);
6. 字面量
字面量类型（说白了就是自己声明了一个类型）
// 1. 如下，这里声明的字面量类型为 'hello ts' let msg1: 'hello ts' = 'hello ts'; // msg1='hhh'; //报错，类型错误，因为这里的类型是hello ts //2. 字面量类型的意义, 就是必须结合联合类型 type Alignment = 'left' | 'right' | 'center' let align: Alignment = 'left' align = 'right' align = 'center'
7. 类型缩小
在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为 缩小;
常见的类型保护有如下几种：
A. typeof
B. 平等缩小（比如===、!==）
C. instanceof (检查一个值是否是另一个值的“实例” )
D. in
// 1.typeof的类型缩小 type IDType = number | string function printID(id: IDType) { if (typeof id === 'string') { console.log(id.toUpperCase()) } else { console.log(id) } } // 2.平等的类型缩小(=== == !== !=/switch) type Direction = "left" | "right" | "top" | "bottom" function printDirection(direction: Direction) { // 1.if判断 // if (direction === 'left') { // console.log(direction) // } else if () // 2.switch判断 // switch (direction) { // case 'left': // console.log(direction) // break; // case ... // } } // 3.instanceof 检查一个值是否是另一个值的“实例” function printTime(time: string | Date) { if (time instanceof Date) { console.log(time.toUTCString()) } else { console.log(time) } } class Student { studying() { } } class Teacher { teaching() { } } function work(p: Student | Teacher) { if (p instanceof Student) { p.studying() } else { p.teaching() } } const stu = new Student() work(stu) // 4. in（用于确定对象是否具有带名称的属性：in运算符，如果指定的属性在指定的对象或其原型链中，则in 运算符返回true；） type Fish = { swimming: () => void } type Dog = { running: () => void } function walk(animal: Fish | Dog) { if ('swimming' in animal) { animal.swimming() } else { animal.running() } } const fish: Fish = { swimming() { console.log("swimming") } } walk(fish)
二. TypeScript函数详解
1. 函数自身 参数类型 和 返回值类型
// 1. 函数的参数类型 function sum1(num1: number, num2: number) { return num1 + num2; } // 2. 函数的返回值类型 // 添加返回值的类型注解，这个注解出现在函数列表的后面： function sum2(num1: number, num2: number): number { return num1 + num2; } // 和变量的类型注解一样，我们通常情况下不需要返回类型注解，因为TypeScript会根据 return 返回值推断函数的返回类型： function sum3(num1: number, num2: number) { return num1 + num2; }
2. 作为参数的函数类型
可以编写函数类型的表达式（Function Type Expressions），来表示函数类型；
格式为： (n:xx,m:xx)=>xxx， 括号里的是参数名和参数类型，=>后面的是返回值类型，比如： (num1: number, num2: number) => void，代表的就是一个函数类型：
A. 接收两个参数的函数：num1和num2，并且都是number类型；
B. 并且这个函数是没有返回值的，所以是void；
// 案例1-函数作为参数进行传递 function calc(m1: number, m2: number, fn: (num1: number, num2: number) => number) { return fn(m1, m2); } const result1 = calc(10, 20, function (m, n) { return m - n; }) console.log(result1); const result2 = calc(10, 20, function (m, n) { return m * n; }); console.log(result2); // 案例2--定义常量时, 编写函数的类型 type myAddFnType = (num1: number, num2: number) => number; const Add1: myAddFnType = (m, n) => { return m + n; } console.log(Add1(10, 20));
3. 参数可选类型
符号：？
可选类型需要在必传参数的后面
function foo(x: number, y?: number) { if (y) { console.log(x+y); } else { console.log(x); } } foo(20, 30) foo(20)
4. 参数默认值
从ES6开始，JavaScript是支持默认参数的，TypeScript也是支持默认参数的：
格式： 直接 = 号 ，写上默认值就行了
//通常我们写的顺序： 必传参数 - 有默认值的参数 - 可选参数 function foo(y: number, x: number = 20, z?:number) { console.log(x, y) } foo(30)
5. 剩余参数
从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。 ts也支持
/* @totalNum: 默认初始值 @nums：数组 */ function sum(totalNum: number, ...nums: number[]) { let total = totalNum; for (const num of nums) { total += num; } return total; } console.log(sum(10,100)) console.log(sum(10,100,200)) console.log(sum(10,100,200,300))
6. this的默认推导
// this是可以被推导出来 info对象(TypeScript推导出来) const info = { name: "ypf", eating() { console.log(this.name + " is eating") } } info.eating()
7. this的不明确类型
type ThisType = { name: string }; function eating(this: ThisType, message: string) { console.log(this.name + " eating", message); } const info = { name: "why", eating: eating, }; // 隐式绑定 info.eating("哈哈哈"); // 显示绑定 eating.call({name: "kobe"}, "呵呵呵") eating.apply({name: "james"}, ["嘿嘿嘿"])
8. 函数重载
函数的重载: 函数的名称相同, 但是参数不同的几个函数, 就是函数的重载
function add(num1: number, num2: number): number; // 没函数体 function add(num1: string, num2: string): string; function add(num1: any, num2: any): any { if (typeof num1 === 'string' && typeof num2 === 'string') { return num1.length + num2.length } return num1 + num2 } const result1 = add(20, 30) const result2 = add("abc", "cba") console.log(result1) console.log(result2) // 在函数的重载中, 实现函数是不能直接被调用的 // add({name: "why"}, {age: 18}) // 实现方式二: 函数的重载 function getLength(args: string): number; function getLength(args: any[]): number; function getLength(args: any): number { return args.length } console.log(getLength("abc")) console.log(getLength([123, 321, 123]))
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
