写点什么

TypeScript | 第三章:函数、泛型和枚举

用户头像
梁龙先森
关注
发布于: 2020 年 12 月 23 日
TypeScript | 第三章:函数、泛型和枚举

TypeScript系列学习笔记:

TypeScript | 第一章:环境搭建及基础数据类型

TypeScript | 第二章:类、接口和之间的关系

TypeScript | 第四章:命名空间和模块

TypeScript | 第五章:高级类型

TypeScript | 第六章:理解声明合并,以及编写声明文件

TypeScript | 第七章:配置文件说明

一、函数

1. 函数的声明和定义

和JavaScript一样,TypeScript函数可以创建有名字的函数和匿名函数。

// 命名函数 Named Function
function sum(x:number,y:number){ // 返回类型没声明:通过ts类型推断省去
return x+y
}
// 匿名函数 Anonymous function
let sum = function(x:number,y:number):number{
return x+y
}
// 下面列3种函数类型的定义,没有具体的实现 ,调用的时候再书写方法体
let sum1:(x:number,y:number)=>number; // 变量定义函数类型
type sum2 = (x:number,y:number)=>number; // 类型别名定义函数类型
interface sum3{ // 接口定义函数类型
(x:number,y:number):number
}
2. 函数的参数

TypeScript里,传递给函数的参数个数必须与函数期望的参数个数是一致的,编译器会检查是否为每个参数都传入了值。

// 1. 参数个数与函数期望的参数个数需一致
function add(x:number,y:number){
return x+y;
}
add(1) // 报错,参数少了
add(1,2,3) // 报错,参数多了
/*
* 2. 可选参数
* a、"?"可选参数可传可不传,不传值为undefined
* b、可选参数必须在必选参数之后
*/
function buildName(firstName:string,lastName?:string){
if(lastName){
return firstName+' '+lastName
}
return firstName
}
/*
* 3. 参数默认值
*/
function sum(x:number,y=0,z:number,q=1){
return x+y+z+q;
}
// 必选参数前,默认参数是不可省略的,不存在用undefined,之后是可省略的
sum(1,undefined,3)
/*
* 4. 剩余参数:参数不固定
*/
function sum(x:number,...rest:number[]){
return x+rest.reduce((pre,cur)=>pre+cur);
}
3. 函数的重载

函数名称相同,参数个数、类型不同,称为函数重载。

function sum(...rest:number[]):number;
function sum(...rest:string[]):string;
function sum(...rest:any[]):any{ //ts要求实现个最宽泛的
let first = rest[0];
if(typeof first==='string'){
return rest.join('');
}
if(typeof first==='number'){
return rest.reduce((pre,cur)=>pre+cur);
}
}
//从重载函数至上而下查找匹配,所以最常匹配的写在最上面
sum(1,2);
sum('a','b');

二、泛型

泛型可以用来创建可重用的组件,一个组件支持多种类型的数据,考虑可重用性。

泛型的好处:

  1. 函数和类可以轻松支持多种类型,增强程序的扩展性。

  2. 不必写多条函数重载,冗长的联合声明,增强代码可读性。

  3. 灵活控制类型之间的约束。

1. 泛型类型

泛型:不预先确定的数据类型,具体的类型在使用的时候才能确定

// 看实现函数log的几种方式
// 函数重载
function log(value:string):string;
function log(value:string[]):string[];
function log(value:any){
return value;
}
// 联合类型
function log(value:string|string[]):string|string[]{
return value;
}
// any类型:丢失类信息,类型之间的约束关系
function log(value:any){
return value;
}
// 泛型:可读性,扩展性更强
function log<T>(value:T):T{
return value
}
log<string[]>(['a','b'])
log(['a','b'])
// 类型别名
type log = <T>(value:T)=>T; // 定义泛型函数类型:
let logger:log = log;
2. 泛型类

泛型变量“T”,只表示类型而不是值。。

// 泛型变量放在类后面,约束所有类的成员,但泛型不能应用于类的静态成员
class print<T>{
run(value:T){
return value
}
}
let p = new print<number>() // 声明泛型变量的类型:number
p.run(1) // 只能是number 类型
let p1 = new print() // 没有声明泛型变量的类型,可以传任何类型1
p1.run(1) // 正确
p1.run('2') // 正确
3. 泛型接口
// 泛型接口
interface log{
<T>(value:T):T
}

//泛型约束了接口所有成员,实现的时候必须指定一个类型
interface log<T = string>{ //设置默认类型,string
(value:T):T
}

function logFun<T>(arg:T){
return arg;
}

let mylog:log<number> = logFun;
mylog(1);
4. 泛型约束

泛型约束:类具备某些特性

interface Length{
length:number
}
//T继承Length接口,让value有length属性
function print<T extends Length>(value:T):T{
console.log(value,value.length);
return value;
}
print(1) // 错误,数字无Length属性
print([1]); // 正确,数组有Length属性
print('123'); // 正确,字符串有Length属性
print({length:2}); // 正确,对象有Length属性

三、枚举

枚举:一组有名字的常量组合

1. 数字枚举
//数字枚举:可以进行反向映射
enum Role{
Reporter,
Developer,
Maintainer,
Owner,
Guest
}
let value = Role.Reporter //0,后面的递增,运行环境下是个对象
let name = Role[value] // 'Report' 原理:反向映射 value-->key
enum Enum{
A = 1, // 定义了初始值,后续值+1
B
}
let b = Enum.B // 2
2. 字符串枚举
//字符串枚举:不可以进行反向映射
enum Message{
Success = '恭喜你,成功了',
Fail = '抱歉,失败了'
}
3. 异构枚举
//异构枚举:数字枚举和字符串枚举混用,不建议使用
enum Answer{
N,
Y = 'Yes'
}
4. 枚举成员
//枚举成员
//枚举成员的值定义后不可修改,只读类型
//枚举成员分类:1.const常量枚举 2. computed需要被计算的枚举成员
enum Char{
//cosnt
a,
b = Char.a,
c = 1+3,
//computed
d = Math.random(),
e = '123'.length,
//computed后面的枚举成员需要赋初始值
f = 1,
}
//枚举类型
enum E{a,b}
enum F{a=0,b=1}
enum G{a='apple',b='banana'}
let e:E = 3; //任意number类型赋值给枚举类型,
let f:F = 3; //取值可以超出枚举成员的定义
//e === f; 两种不同类型的枚举不允许比较
let e1:E.a
let e2:E.b
let e3:E.a = 1;
//e1 === e2 不相同枚举成员不允许比较
e1 === e3 //相同枚举成员类型可以比较
let g1:G = G.b;
let g2:G.a = G.a; //只能赋值G.a

四、总结

至此我们完成了TypeScript的函数、泛型和枚举学习。



发布于: 2020 年 12 月 23 日阅读数: 59
用户头像

梁龙先森

关注

寒江孤影,江湖故人,相逢何必曾相识。 2018.03.17 加入

1月的计划是:重学JS,点个关注,一起学习。

评论

发布
暂无评论
TypeScript | 第三章:函数、泛型和枚举