还不学TypeScript？

前端小菜鸡，持续学习中。

TS是由微软推出的一款强类型语言，是JS语言的超集，并且最终会被编译成纯JavaScript。如图。

 由于JS是弱类型语言，定义变量后并不表明该变量属于何种数据类型，意味着变量类型可被随意更换，对于大型项目来说，维护困难，TS语言解决了这一问题，扩展了JS数据类型，并且引入了interfaces和generics的概念。但我觉得对于几百行代码来说，使用ts和js差别不大，选取对自身来说更熟练语言进行编写更好。下面一起来学习下ts基础。

基础数据类型

// ts支持几乎相同的所有js数据类型

// boolean 布尔类型
let bool:boolean = false;

// number 数字类型(除十进制和十六进制之外, ts支持ES2015中新增的二进制和八进制)
let num:number = 1;
let num2:number = 0xf00d;

// string 字符串类型
let str:string = '翠花在学习，路过点个赞';

// Array 数组 两种方式定义数组

// 第一种 变量名后边跟组成该数组元素的类型然后连接[]
let list: number[] = [1,2,3,4,5]; 
// 第二种 数组泛型
let list: Array<string> = ["1","2","3","4","5"];

// Tuple 元组(已知类型和数量的数组)
let tup: [boolean,string] = [true,"123"];

// Enum 枚举
enum Name {John, Amy, Sarah}
let c: Name = Name.John;

// Any 任意类型
let notSure: any = 4;
notSure = {id:1};

//Void 函数无返回值时可使用
function fun(): void {
    console.log("This guy doesn't have Value");
}

//Null和Undefined  用处不大
let u: undefined = undefined;
let n: null = null;

//Never 可用于抛出错误或死循环

// Object 非原始数据类型
let obj: object = {name:'龙江翠花'}

变量声明

let和const是JS在ES6之后引入的，但TS本身就支持let和const定义变量，不建议使用var会导致变量提升问题。

接口

interface是TS较之JS引入的重要概念之一，那么它的作用是什么呢？总而言之一句话，——就是确定值必须包含的属性以及这些属性的类型。对值进行类型检查也是TS的核心原则之一。

下面先用普通代码理解一下interface。

// 普通代码

function typeCheck(mustHave: { bool: boolean , name:string }):void {
    console.log(mustHave,"输出")
}

let obj = {beautiful:"yes",name:'龙江翠花请你点个赞',bool:false,}
typeCheck(obj);//  传入参数必须为对象且必须包含name是string类型和bool类型是boolean，

我们用Vscode运行一下这段代码，注意浏览器不识别TS代码，TS最终会被编译成JS文件。

用Vscode先全局安装一下TypeScript npm i typescript -g ，可以用tsc -v 查看一下是否安装成功。tsc --init生成tsconfig.json将输出文件改成.js就可以了。这里可以用Vscode下一个插件Code Runner帮助运行ts文件。

输出结果：

 我们用interface改写一下代码

//interface改写

interface must {
    bool: boolean, 
    name:string
 }
 function typeCheck(mustHave: must):void {
     console.log(mustHave,"输出")
 }
 let obj = {name:'龙江翠花请你点个赞',bool:true,}
 typeCheck(obj);

interface所规定的属性和类型是必须的，但是顺序可以随意。

理解了interface，再来学习一下它的几个写法。首先，传入值的属性可选且可以设置为只读。

对于readonly，也可以定义变量的时候使用，如 let a: readonly number[] =[1,2,3];   ，但此修饰符只可修饰数组和元组。 让我们想一想

const似乎和readonly有着相同的作用，那么这二者的使用场景分别是什么呢？官网给出的回答是

——该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly。

其次可以定义函数传参类型以及确定返回值，如果不标返回值，类型检查会报错。

 泛型

generics的作用是啥呢？Let's think about it！

对于上述我们写过的函数，如果我们不能确定传入参数的类型呢，那么就可能定义为Any。返回值的类型也无法确定呢，也可能定义为Any。这样虽然可以解决，但是却失去了TS类型检查和保护这一重要原则。

泛型的可以很好的解决这一问题。

// 泛型用法
//class中使用
class People<type>{
    name:string;
    age:number;
    money: (yearMoney:type,num:type) => type;
}
let person = new People<number>();
person.money = function (yearMoney,num) {
    return yearMoney*num
}
person.name='龙江翠花';
person.age=18;
person.money(10000000000,12);
console.log(`这个人叫${person.name},年龄${person.age},
年薪${person.money(10000000000,12)}万`);

 

 以上仅对TS较之JS重点部分进行概述。

 OK，更多重点内容请关注TypeScript官网，路过点个赞呗。