这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战
前言🎉
- 虽然之前有学过
TypeScript但是平时业务上面都还是用JavaScript来开发导致逐渐对TypeScript生疏了。 - 借此更文活动的机会再来一起学习一下
TypeScript的知识吧。
数组的类型🌋
[类型 + 方括号]表示法
- 在
TypeScript中我们定义一个数组的类型可以使用类型+方括号的形式 在JavaScript的写法
let student = ['小明', '小红', '小刚', '小智'];
在TypeScript的写法
let student:string[] = ['小明','小红','小刚','小智'];
- 如果给一个数组定义了类型后，这个数组里面的值不应该出现其他类型的值。
let student:string[] = ['小明','小红',123,'小智']; // 报错
- 当然我们如果对这个已经约定好了类型的数组进行增加修改也必须按照类型来规范，比如
let student:string[] = ['小明','小红','小刚','小智'];
student.push('小李');
student.push(123); //报错 123是number类型不可以赋值给string类型的数组
接口表示数组
- 在上一篇中我们讲到了接口并用接口来描述了对象的形状，其实接口也可以用来描述数组。
interface StudentArray {
[index: number]: string;
}
let student:StudentArray = ['小明','小红','小刚','小智'];
- 上面可以看到我们定义了一个接口表示索引的类型是数字时，那么值的类型必须是字符串型。
- 当然这种定义的方法其实用的还是比较少的因为比
[类型 + 方括号]表示法复杂多了。
任意数组
- 我们之前说到如果不确定的类型可以使用
any来定义，对于数组其实也有相同的用法。 在JavaScript的写法
let students = ['小明',23,'小红',25,'小刚','小智'];
在TypeScript的写法
let students:any[] = ['小明',23,'小红',25,'小刚','小智'];
- 我们可以看到当我们用
any来定义一个数组时,数组里面的值就不受限制了可以为任意类型。
函数的类型🏔️
函数声明
- 在一个函数中是会有返回值的，所以我们在定义类型的时候不仅要把参数类型规定好也要把返回值的类型给规定好。
function add(x: number, y: number): number {
return x + y;
}
- 上面我们简单声明了一个函数，在这个函数中我们对
xy进行了规定，规定为number，那我们的返回值x+y理所当然也应该为number，所以我们要在函数名称后面一起把返回值给规定为number。 - 我们可以理解为
:前的类型是为了规定参数，:后的类型是为了规定返回值，当我们使用函数的时候传的参数与定义时对不上是会报错的。
函数表达式
- 我们在写一个函数表达式的时候一般是这样的。
let add=function(x: number, y: number): number {
return x + y;
}
- 这样写一般是没问题的，但是左侧的
add我们是通过右边的xy相加而得出结论他是数字型，那我们如果可以在编译前就约定好类似是不是更加规范呢，所以我们可以这样写：
let add:(x: number, y: number)=>number=function(x: number, y: number): number {
return x + y;
}
- 用惯了
ES6的小伙伴可能会有点懵，这里的箭头非ES6的箭头，这里的箭头代表左边输入类型右边是输出类型，上面的这个add函数后面用(x: number, y: number)=>number定义了一个输入number类型的x和number类型y并输出了number类型的值的这么一个规范。
接口表示函数
- 我们用接口表示过对象和数组的形状，当然也可以用来表示函数的形状。
interface AddFunc {
(x: number, y: number): number;
}
let add:AddFunc=function(x: number, y: number): number {
return x + y;
}
- 如上所示我们定义了一个接口形状为函数形状，
:左边为输入的类型，右边为输出的类型，add函数就是使用这个接口来定义规范的。
可选参数
- 在上面我们说到使用函数的时候传的参数与定义时对不上是会报错的。
- 那我们有没有可能放宽一点限制让我们使用函数的时候选择
可用可不用呢？我们可以使用可选参数。
function add(x: number, y?: number): number {
if(y){
return x + y
}else{
return x
}
}
add(8,15)
add(8)
- 在上面我们用
?:代表y参数可选，然后在函数内部对有无y参数进行处理return不同的值。 - 值得一提的是
可选参数必须是放在必需参数的后面
参数默认值
- 我们可以给参数设定默认值并将它设为可选参数。
function add(x: number, y: number=16): number {
return x + y
}
add(8,15)
add(8)
- 这时候给
y设了一个默认值16并且它是可选参数，这时候就不会局限于可选参数必须是放在必需参数的后面
function add(y: number=16,x: number): number {
return x + y
}
add(8,15)
add(undefined,8) //不报错
拓展运算符
- 在
ES6中我们经常用...来表示数组。
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
- 在
TypeScript函数中我们可以使用...来代表剩余的参数。
function push(array: any[], ...items: any[]) {
items.forEach(function(item) {
array.push(item);
});
}
let a = [];
push(a, 1, 2, 3);
- 在上面的代码中
items是一个数组我们可以使用...来接收剩余的1,2,3的参数，而使用了...的参数必须为最后一个参数。
重载
- 重载的意思可以理解为当一个函数接收不同数量或类型的参数时，对应的函数内部会有不同的逻辑处理方式。
function add(x: number): number;
function add(x: string): string;
function add(x: number | string): number | string | void{
if (typeof x === 'number') {
return 23
} else if (typeof x === 'string') {
return '23岁'
}
}
- 如上我们前面两个定义了函数的类型，最后一个定义并实现了
add函数，add可以接收number类型和string类型分别做出不同的处理。
写在最后👋
- 本文也算是记录一下
TypeScript的学习，接下来我会持续输出TypeScript相关的知识，大家可以一起来学习。 - 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛
