在线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——总结函数类型的定义方法
发布评论