函数-单个定义
目标
对函数中涉及的类型进行约定
函数的类型
函数的类型实际上指的是：函数参数和返回值的类型
格式
// 普通函数 function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { } // 箭头函数 const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }
示例
// 函数声明 function add(num1: number, num2: number): number { return num1 + num2 } // 箭头函数 const add = (num1: number=10, num2: number=20): number => { return num1 + num2 } add（1,'1') // 报错
小结
- 返回值的类型注解写在()的后边
函数-统一定义函数格式
问题
定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘
const add = (a:number,b:number):number =>{ return a + b } const sub = (a:number,b:number):number =>{ return a - b }
分析
把拥有相同形参和实参的函数当做一个整体，来定义
const add1 : (n1:number,n2:number)=>number = (a,b)=>{return a+b }
提炼自定义类型
type Fn = (n1:number,n2:number) =>number const add1 : Fn = (a,b)=>{return a+b }
小结
- 分别指定参数和返回值的类型
- 统一指定函数类型(类型别名来优化， 使用于函数表达式)
函数返回值是void
目标
掌握函数的返回值是void的情况
void 类型
如果函数没有返回值，那么，函数返回值类型为：void
function greet(name: string): void { console.log('Hello', name) // }
如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足
- 不写return
- 写return ，但是后面不接内容
- 写return undefined
// 如果什么都不写，此时，add 函数的返回值类型为： void const add = () => {} // 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同 const add = (): void => {} // 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以 const add = (): undefined => { // 此处，返回的 undefined 是 JS 中的一个值 return undefined }
void和undefined的区别
- 如果函数没有指定返回值，调用结束之后，值是undefined的
- 当不能直接声明返回值是undefined
function add(a:number, b:number): undefined { // 这里的会报错 console.log(a,b) }
小结
没有返回值的函数要指定它的类型是_________
函数-可选参数
目标
掌握可选参数的使用，能用可选参数定义函数
场景
使用函数实现某个功能时，参数可以传也可以不传。
例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]
这种情况下，在给函数参数指定类型时，就用到可选参数了
格式
可选参数：在可选参数名的后面添加 ?（问号）
function mySlice(start?: number, end?: number): void { console.log('起始索引：', start, '结束索引：', end) }
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
可选和默认值的区别
相同点： 调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。
注意：它们不能一起使用。优先使用默认值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZxexvAp-1652532070523)(asset/image-20211123163705731.png)]
对象类型-单独使用
目标
掌握给对象指定类型的描述
格式
const 对象名: { 属性名1：类型1， 属性名2：类型2， 方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型, 方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型 } = { 属性名1: 值1，属性名2：值2 }
可选属性用 ?
const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }
示例
const goodItem:{name: string, price: number, func: ()=>string } = { name: '手机', price: 2000, func:function(){ return '打电话' } }
说明:
- 使用
{}来描述对象结构 - 属性采用
属性名: 类型的形式，如果是多行，可以省略, - 方法采用
方法名(): 返回值类型的形式 - 可选使用 ?
对象类型-类型别名
目标
用类型别名来简化定义对象的类型的方式
思路
把类型注解封装一下，定义类型
示例
// 创建类型别名 type Person = { name: string， age: number sayHi(): void } // 使用类型别名作为对象的类型： let person: Person = { name: '小花', age: 18 sayHi() {} } function f1 (p: Persion) :void { }
小结
- 创建类型别名后，直接使用该类型别名作为变量的类型注解即可
对象类型-练习
创建两个对象： 学生对象 指定对象的类型 - 姓名 - 性别 - 成绩 - 身高 - 学习（） - 打游戏（）
对象类型-接口
目标
掌握接口的使用
场景
当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。
- 类型别名，type
- 接口, interface
格式
interface 接口名 { 属性1: 类型1, 属性2: 类型2, }
示例
interface IGoodItem { name: string, price: number, func: ()=>string } const good1: IGoodItem = { name: '手表', price: 200, func: function() { return '看时间' } } const good2: IGoodItem = { name: '手机', price: 2000, func: function() { return '打电话' } }
解释：
- 使用
interface关键字来声明接口 - 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以
I开头 - 声明接口后，直接使用接口名称作为变量的类型
接口和类型的区别
interface（接口）和 type（类型别名）的对比：
- 相同点：都可以给对象指定类型
- 不同点:
- 接口，只能为对象指定类型。它可以继承。
- 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
推荐：能使用 type 就是用 type
// 接口的写法------------- interface IPerson { name: string, age: number } const user1：IPerson = { name: 'a', age: 20 } // type的写法------------- type Person = { name: string, age: number } const user2：Person = { name: 'b', age: 20 }
接口继承
目标
掌握接口的继承
背景
比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface IPoint2D { x: number; y: number } interface IPoint3D { x: number; y: number; z: number }
分析
如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
继承格式
interface 接口2 extends 接口1 { 属性1： 类型1， // 接口2中特有的类型 ... }
接口继承的示例
interface Point2D { x: number; y: number } // 继承 Point2D interface Point3D extends Point2D { z: number }
解释：
- 使用
extends(继承)关键字实现了接口 Point3D 继承 Point2D - 继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)
小结
- 接口继承的关键字是______
- 继承的作用是___
- 如果复杂的类型没有涉及继承关系，就可以直接使用____，如果涉及了继承可以使用___
元组
目标
掌握元组类型的使用
场景
固定结构的数据， 例如
- 使用经纬度坐标来标记位置信息
- 使用x,y来记录鼠标的位置
可以使用数组来记录坐标
let position: number[] = [116.2317, 39.5427] // 数组的元素都是数值类型
问题
使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字，而类似于经纬度只能有两个数字。
元组 Tuple
元组是另一种特殊的数组：
- 它确切地包含多少个元素
- 特定索引对应的类型
let position: [number, number] = [39.5427, 116.2317]
解释：
- 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
- 该示例中，元素有两个元素，每个元素的类型都是 number
示例
模拟定义useState。
useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。
function useState(n: number): [number, (number)=>void] { const setN = (n1) => { n = n1 } return [n, setN] } const [num ,setNum] = useState(10)
字面量类型
思考
let str1 = 'hello 武汉' const str2 = 'hello 武汉'
问： str1是什么类型？ str2是什么类型？
通过 TS 类型推论机制，可以得到答案：
- 变量 str1 的类型为：string
- 变量 str2 的类型为：‘Hello TS’
解释
- str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
- str2 是一个常量(const)，它的值不能变化只能是 ‘hello 武汉’，所以，它的类型为:‘hello 武汉’
- 注意：此处的 ‘Hello TS’，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
字面量类型
任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhpuvNp6-1652532070525)(asset/image-20211123190033005.png)]
说明：
- 上面的let a等价于const
- 简写为 const a = ‘abc’
字面量：{ name: 'jack' }[]1820'abc'falsefunction() {}
字面量的作用
单个字面量没有什么用处，它一般和联合类型一起使用 ， 用来表示一组明确的可选值列表
示例1
比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个
// 使用自定义类型: type Direction = 'up' | 'down' | 'left' | 'right' function changeDirection(direction: Direction) { console.log(direction) } // 调用函数时，写上''，就会有类型提示： changeDirection('up')
解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
优势：相比于 string 类型，使用字面量类型更加精确、严谨
示例2
redux 中的actiontype
type ActionType = 'ADD_TODO' | 'DEL_TODO' function reducer(type:ActionType) { if(type === 'ADD_TODO') }
示例3
性别取值只能有两个
let gender: 'girl' | 'boy' = 'boy' gender = 'abc' // 报错
小结
字面量类型约定：只能取某些个特定的值。一般和联合类型一起使用。
