TS——总结函数类型的定义方法

admin管理员组

文章数量:1794759

TS——总结函数类型的定义方法

  在线TS运行

2020.2.26 补充泛型函数定义方式

---

1 函数声明的类型定义 function say(person: string, content: string): boolean { if (person === '' || content === '') return false; console.log(`${person}say:${content}`); return true; } 延伸出——对象方法新写法下的类型定义 const somebody = { say (person: string, content: string): boolean { if (person === '' || content === '') return false; console.log(`${person}say:${content}`); return true; } };

---

补充——泛型函数的定义方式:

泛型的使用为了方便复用函数——复用不同类型输入，但是行为和操作逻辑一致的函数。

function say<T>(operate: T, person: string, content: string): boolean { if (person === '' || content === '') return false; console.log(`${person} ${operate}:${content}`); return true; } 2 函数表达式的类型定义

函数表达式类型的写法有三种：

• 一种类似 1 的写法，将类型定义的代码都嵌入到函数定义里边

const say = function (person: string, content: string): boolean { if (person === '' || content === '') return false; console.log(`${person}say:${content}`); return true; };

补充——加入泛型的定义方式：

const say = function <T> (person: string, content: string, operate: T): boolean { if (person === '' || content === '') return false; console.log(`${person}${operate}:${content}`); return true; };

---

• 一种是先使用 type 别名定义函数的类型，然后借助类型推导，完成对函数的定义。

type sayType = (person: string, content: string) => boolean; var say: sayType = function (person, content) { if (person === '' || content === '') return false; console.log(`${person}say:${content}`); return true; };

补充——加入泛型的定义方式：

type sayType = <T>(operate: T, person: string, content: string) => boolean; var say: sayType = function (operate, person, content) { if (person === '' || content === '') return false; console.log(`${person} ${operate}:${content}`); return true; };

---

• 一种是使用接口定义函数的类型，思路同上，借助类型推导。注意，接口名首字母要用大写。

interface Say { (person: string, content: string): boolean; } const say: Say = function (person, content) { if (person === '' || content === '') return false; console.log(`${person}say:${content}`); return true; };

补充——泛型接口的定义方式：

一种是放在接口大括号的外边，但是在使用接口的使用就一定要将实际用的类型穿进 <> 内。

type sayWhileSimiling = 'gegege' | 'hhhh'; interface Say<T> { (operate:T, person: string, content: string): boolean; } const say: Say<sayWhileSimiling> = function (operate, person, content) { if (person === '' || content === '') return false; console.log(`${person}${operate}:${content}`); return true; };

一种是的在大括号内部，这种情况不需要在接口使用的时候就将实际用的类型穿进去，而是在实际函数调用时再传入。

interface Say { <T>(operate:T, person: string, content: string): boolean; } const say: Say = function (operate, person, content) { if (person === '' || content === '') return false; console.log(`${person}${operate}:${content}`); return true; };

---

延伸出——箭头函数的类型定义方法

箭头函数通常写成函数表达式的形式：

const say = () => {};

所以箭头函数的类型定义，就与函数表达式的非常相似，完全可以使用上边的三种方法定义类型，这里就写出嵌入函数里边的写法：

const say = (person: string, content: string): boolean => { if (person === '' || content === '') return false; console.log(`${person}say:${content}`); return true; };  

补充——箭头函数的泛型定义方式：

const say = <T>(operate:T, person: string, content: string): boolean => { if (person === '' || content === '') return false; console.log(`${person}${operate}:${content}`); return true; };

---

总结：好像函数声明式及其衍生形式只能采用嵌入函数里边的写法，而函数表达式的写法有很多种，比较灵活。

本文标签： 函数定义类型方法TS