前面我们讲到过ts的静态类型定义中的函数类型定义，先来回顾下：
const fnA: () => string = () => { return '1' }
const fnB: () => number = () => 6
const fnC: () => boolean = () => true
拓展下：在接口中如何定义函数类型呢？接口后期会讲
interface Ifn {
(one: number, two: number): number
}
let fniA : Ifn
fniA = function (one, two) {
return one + two
}
fniA(2, 4)
console.log(fniA(2, 4)) // 6
接下来我们分别学习下ts中如何对函数参数和函数返回值进行类型定义的
1.ts中函数参数的类型定义 函数的参数可能是一个，也可能是多个，有可能是一个变量，一个对象，一个函数，一个数组等等。
1.函数的参数为单个或多个单一变量的类型定义
function fntA(one, two, three) {
// 参数 "two" 隐式具有 "any" 类型，但可以从用法中推断出更好的类型。
return one + two + three
}
const aResult = fntA(1, '3', true)
修改后：
function fntA(one: number, two: string, three: boolean) {
return one + two + three
}
const aResult1 = fntA(1, '3', true)
// 如果函数的参数为单个或者多个变量的时候，只需要为这些参数进行静态类型下的基础类型定义就行
2.函数的参数为数组的类型定义
function fntB(arr) {
//参数 "arr" 隐式具有 "any" 类型，但可以从用法中推断出更好的类型。
return arr[0]
}
const bResult = fntB([1, 3, 5])
修改后：
function fntB(arr: number[]) {
return arr[0]
}
const bResult1 = fntB([1, 3, 5])
// 如果参数是数组时，只需要为这些变量进行对象类型下的数组类型定义
3.函数的参数为对象的类型定义
function fntC({ one, two }) {
return one + two
}
const cResult = fntC({ one: 6, two: 10 })
修改后：
function fntC({ one, two }: { one: number, two: number }) {
return one + two
}
const cResult1 = fntC({ one: 6, two: 10 })
// 如果参数是对象，只需要为这些变量进行对象类型下的对象类型定义
4.函数的参数为函数的类型定义
function fntD(callback) {
//参数 "callback" 隐式具有 "any" 类型，但可以从用法中推断出更好的类型
callback(true)
}
function callback(bl: boolean): boolean {
console.log(bl)
return bl
}
const dResult = fntD(callback)
修改后：
function fntD(callback: (bl: boolean) => boolean) {
callback(true)
}
function callback(bl: boolean): boolean {
console.log(bl)
return bl
}
const dResult = fntD(callback)
// 如果参数是函数，只需要为参数进行对象类型下的函数类型定义即可
2.ts中函数返回值的类型定义 当函数有返回值时，根据返回值的类型在相应的函数位置进行静态类型定义即可
返回数字：
function getTotal2(one: number, two: number): number {
return one + two;
}
const total2 = getTotal(1, 2);
// 返回值为数字类型
返回布尔值
function getTotal2(one: number, two: number): boolean {
return Boolean(one + two);
}
const total2 = getTotal(1, 2);
// 返回值为布尔类型
返回字符串
function getTotal2(one: string, two: string): string{
return Bone + two;
}
const total2 = getTotal('1', '2');
// 返回值为字符串
返回对象
function getObj(name: string, age: number): { name: string, age: number } {
return {name,age}
}
getObj('小红',16)
// 返回值为对象
返回数组
function getArr(arr: number[]) :number[]{
let newArr = [...arr]
return newArr
}
getArr([1,2,3,4])
// 返回值为数组
函数返回值为underfinde，仅仅时为了在内部实现某个功能，我们就可以给他一个类型注解void，代表没有任何返回值，
function sayName() {
console.log('hello,world')
}
【前端|typescript（四）ts中函数的参数和返回值的类型定义】修改后：
function sayName1(): void {
console.log('无返回值')
}
当函数没有返回值时
// 因为总是抛出异常，所以 error 将不会有返回值
// never 类型表示永远不会有值的一种类型
function error(message: string): never {
throw new Error(message);
}
下一篇: typescript（五）ts中数组类型的定义
推荐阅读
- json|如何将JSON对象转换为Typescript类
- 前端|TypeScript函数参数和返回类型定义
- TypeScript|玩转TypeScript对象、对象作为参数进行函数传递、接口和内置对象[无敌态]
- typescript|【TypeScript】从零开始玩转TypeScript - TypeScript中的函数
- typescript（interface接口，函数型接口、对象型接口、数组形式和域操作符访问对象属性）
- 面试|网络安全工程师面试题整理
- 面试|SpringBoot学习笔记
- 前端|前端 HTML基础
- html|html avi 视频插件,程序猿必备的15款web前端动画插件七