随着前端技术的普及,JavaScript已然成为最热门的编程语言,但是由于历史遗留问题,以及无需编译、没有类型检查的缘故,导致代码难以维护,尤其对于大型项目,大多数bug,只有运行时才能被发现。

TypeScirpt就是建立在JavaScrip上的一个编程语言,它添加了类型标注,而类型标注也增强了了编辑器的代码提示、自动补全功能,大大提高了开发效率。

TypeScript基本概念

定义数据类型

我们定义一个名为 multiply 的函数,返回值为两个数的乘积。

function multiply(a, b){
    return a*b;
}

在JavaScript当中,我们可能会不小心用以下形式调用该函数。

multiply("1",2);
multiply(1);

因为在JavaScript当中,任何参数都是动态决定的,并且没有被传参的参数也会有默认值undefined,这会导致我们只有在运行的时候才会发现错误。

但是如果使用TypeScript,我们可以在变量后面定义参数的数据类型。

function multiply(a: number,b: number){ //基本数据类型:number、string、boolean、any,不指定类型时候默认为any
    return a*b;
}

这样在编辑器中就会捕获到语法错误。

同样的道理,我们可以在函数后标注参数类型,就可以限定其返回类型,如果标记为void,即为返回空值。

function multiply(a: number,b: number): number{ 
    return a*b;
}//当然,这个函数编译器可以自动推断出其返回值为number,所以在实际使用中,这里可以省略

如果我们想让这个参数是可选的,我们只需要在参数后加入一个即可

function multiply(a: number,b?: number){
    if (b === undefined) b = 0;
    return a*b;
} //此时调用multiply函数,b就是一个可选参数

元组

当我们定义一个数组时候,我们可以进行用如下写法。

// 一维数组
let arr: number[];
arr = [1,2,3];

// 二维数组
let 2darr: number[][];
2darry = [
    [1,2,3];
    [4,5,6];
];

元组是一个与数组很类似的概念,确定元素个数和类型的数组我们称为元组,比如可以用以下元组表示三维坐标

let xyz: [number,number,number]
xyz = [1,2,3];
// 这里也可以使用 ? 来使参数可选
let xyz: [number,number,number?]
xyz = [1,2];
// 这样,xyz既可以表示三维坐标,也可以表示二维坐标

联合变量

有时候我们希望一个变量可以是多种类型的,这时候我们就会用到联合变量。

例如我们希望color既可以用数字表示,也可以用字符串表示。

let color: number|string
color: "white";
color: 0xfffffff;

同理我们也可以用此方法限制变量的取值

let people: "student"|"teacher"
// 当我们给people赋值时,只能赋值“student”或“teacher”

接口

当我们需要限制一个对象的数据类型时,我们可以使用interface来定义一个接口。

interface User{
    name: string;
    id: number;
    sex: "male"|"female"
}

函数签名

我们限定一个函数必须具有特定的参数和返回值时,就可以使用这个方法。

function getUserName(callback: (data: string) => void){    
// ...这里要求函数的参数是个回调函数,回调函数的参数必须为string类型的data,并且返回值为空
}
//下面调用这个函数
getUserName((data) => {
    alert(data);
})

类型别名

我们可以使用type定义一个类型。

type ID = number | string
function getInfo(id :ID){
    // ...即id的类型为number|string
}

TSC

TypeScript是不能直接在浏览器中运行的,所以执行TypeScript需要先将其转换为JavaScript代码,才能运行。所以我们常常会用到转换工具TSC。

我们可以直接使用npm进行安装。

npm install tsc -g

然后便可以使用tsc命令将TypeScript转换为JavaScript。

tsc demo.ts 

之后便会生成一个.js文件。