快速上手TypeScript

566 阅读3分钟

本文基于:为什么你应当使用 TypeScript? TS 十分钟快速入门_哔哩哔哩_bilibili

安装 TypeScript 转译器 tsc

npm install tsc -g

tsc 命令的使用

tsc code.ts

此时,你的文件夹会生成一个新的 code.js 的文件,你可以使用 node.js 或者将js文件嵌入到 html 中在浏览器执行.

VsCode 中的配置 tsconfig.json

{
  "compilerOptions":{
    "watch": true,
    "removeComments": true,
    "target": "es5",
    "noImplicitAny": ture,
    "strictNullCheckks": true
    ...
  }
}

watch: 自动监测源文件的修改并编译代码
removeComments: 删除源文件中的注释
target: 指定想要编译的目标js版本
noImplicitAny: 更加严格的代码验证,不允许动态类型
strictNullCheckks: 不允许赋予变量 nullundefined , 除非显示指定

TypeScript 的使用

类型限定

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

如以上代码所示:在变量后面追加一个 冒号 并填写一个数据类型就可以限定形参的数据类型,最基本的数据类型包括:number, string, boolean, any 这几种. 在加入了类型限定后,TypeScript 就会自动帮我们检查不合法数据类型的传入:

image.png

可选参数

如果你希望函数内的某个参数是可以省略的,可以在类型限定的 冒号 符前面增添一个 问号 ?

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

image.png

标记返回值类型

类型标注同样可以用在函数返回值上,如果一个函数没有返回值,可以将其标记为 void 类型,将类型名前加一个 冒号 写在 函数声明 后 大括号前:

function sayHi(): void {
  alert("Hi~");
}

如果在变量声明时赋予初值,或是函数的返回值是确定的话,则不需要对变量或函数加以类型限定符,编译器会根据初值或返回值自行推导。

数组元组

数组声明:

/* 一维数组 */
let arr: number[];

arr = [1, 2, 3];

/* 二维数组 */
let arrOfArray: number[][];

arrOfArray = [
  [1, 2, 3],
  [4, 5, 6],
];

元组:元素的 个数类型 确定的数组

let point: [number, number, number];

point = [1, 2, 3];

如果希望第三个元素可以省略,只需要在第三个元素后面加上 ?

let point: [number, number, number?];

point = [1, 2, 3];
point = [1, 2];

这样, point 就可以表示二维或者三维坐标.

联合类型

有时候,我们可能希望变量的类型是多种类型中的任意一种,则可以这样声明:

let color: number | string;

color = "red";
color = 0xff0000;

这样, color 既可以表示数字,也可以表示字符串。

限制变量取值

在用变量表示类型时,我们希望其取值仅限定为 male female

 let gender: "male" | "female";

 let dice: 1 | 2 | 3 | 4 | 5 | 6;
 //这里表示dice只可以取数字 1~6

使用这种技巧可以实现类似 C++ 或者 Java 中的 枚举 数据类型.

接口 interface

如果我们想限定一个对象的类型,那么可以使用 interface 关键字来定义一个接口:

interface User {
  name: string;
  id: number;
}

以上定义了一个名为 User 的接口,其有且只有 nameid 两个属性,在使用其来实例化一个对象时,这个对象中缺少或者多出了一些属性,编译器都会报错:

image.png

类型别名

如果你需要用到一些比较复杂的类型,可以使用 type 关键字来为你所定义的类型起一个别名:

type UserID = number | string;

function getUserInfo(userId: UserID) {
  //...
}

这样如果我们再其他地方用到相同的类型,可以直接使用别名来避免代码的重复。