「TypeScript」入门进阶(一)✈️

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

前言🎉

• 虽然以前有学过TypeScript可是平时业务上面都仍是用JavaScript来开发致使逐渐对TypeScript生疏了。
• 借此更文活动的机会再来一块儿学习一下TypeScript的知识吧。
• 在以前的文章中咱们TypeScript的基础知识过了一遍，是否是发现其实也不会很难呢。
• 本文也是TypeScript进阶篇的第一篇，关于基础篇能够看我以前分享的文章喔~。

类型别名🚤

• 基本语法是 [type 名称 = 类型]
• 类型别名顾名思义就是给一个类型起了另外一个名称，其余地方若是须要用到该类型的时候均可以使用它的别名来代替。

type otherType=number;
let other:otherType;
other=5;
复制代码

• 编译成JavaScript后：

var other;
other = 5;
复制代码

• 值得一提的是咱们给类型起了别名但并非新建了一种类型，因此咱们要遵循它的原始类型。

• 若是咱们将不符合类型的值传给变量则会像上图这样报错。
• 类型定义对象的时候会和接口很像,甚至能够当成接口来使用。

type otherObj={
    name:string
};
interface sthObj{
    name:string
};
let obj1:otherObj={
    name:'掘金'
};
let obj2:sthObj={
    name:'小卢'
};
复制代码

• 这样写是彻底没有问题的，那何时咱们改用别名何时接口呢？由于咱们的type只是起了别名，因此当咱们要给类型拓展的时候就要使用接口了，由于type不能够被继承。类型别名经常使用于联合类型。

字符串字面量类型⛴️

• 基本语法是 [type 名称 = 字符串]
• 字符串字面量类型就是约束变量为某几个字符串其中的一个，若是出现了其余的字符串则会报错。

type sthingFruit= "apple" | "banana" | "mango";
let fruit:sthingFruit;
fruit="apple";
fruit="grapes"; //报错
复制代码

• 在上面的例子中咱们将sthingFruit约束为只能接受 apple banana mango的一个类型，那么其余变量在使用这个类型的时候就只能选择里面容许的值，像上面给他一个grapes是不可取的。

元组🛳️

• 在以前基础的学习中咱们知道，能够用数组来合并相同类型的数据。

let fruit:string[]=['apple','banana',"mango"];
let fruit1:string[]=['apple','banana',25]; //报错 
复制代码

• 能够看到若是给定义了string类型的数组添加number类型的数值，他就会报错不能将类型“number”分配给类型“string”。
• 在JavaScript中的数组没有这些限制，那有没有一种状况咱们TypeScript一个数组中也能够既能够有string类型又有number类型呢？这时候就须要咱们的元组出场了。
• 元组（Tuple）合并了不一样类型的对象，咱们能够这样书写。

let fruit:[string,number,string];
fruit=['apple',25,'banana'];
fruit=['apple',25]; //报错
复制代码

• 咱们能够看到虽然元组能够接受不一样类型的数值，可是赋值的时候他的格式和数量要跟:定义的类型格式数量一致。

• 在元组中咱们能够跟数组同样单一的改变对应的值。

let fruit:[string,number,string];
fruit=['apple',18,'banana'];
fruit[0]='watermelon';
fruit[1]=20;
fruit[3]=21; //报错 类型不对
复制代码

• 咱们也能够单独拿出值来作操做可是也要严格按照类型的规范。
• 虽然在赋值的时候须要严格按照格式和数量，可是若是在后续push的时候是能够添加约束的类型的值的。

let fruit:[string,number];
fruit=['apple',18];
fruit.push('banana');
fruit.push('grapes');
fruit.push('oranges');
复制代码

• 值得注意的是咱们后续若是给元组push的数值必须是以前定义的类型，至关于把类型限制于以前定义的类型的联合类型，正如上面的string number。

写在最后👋

• 本文也算是记录一下TypeScript的学习，接下来我会持续输出TypeScript相关的知识，你们能够一块儿来学习。
• 若是您以为这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛

往期精彩🌅

「TypeScript」入门基础(一)🎯

「TypeScript」入门基础(二)🎯

「TypeScript」入门基础(三)🎯

「TypeScript」入门基础(四)🎯