体验TypeScript-摩杜云开发者社区

首先来看看没有使用 Ts 之前的写法其中会存在那些问题，注意点, 由于 JS 是弱类型的，所以只要定义了一个变量, 就可以往这个变量中存储任意类型的数据，也正是因为如此, 所以会给我们带来一个问题：

let val;
val = 123;
val = "123";
val = true;
val = [1, 3, 5];

例如我现在定义一个函数，接收两个参数，而我期望参数1，a是一个数组, 参数二，b是一个数值然后将参数一的长度加上参数二的值进行返回出去代码如下：

function test(a, b) {
    return a.length + b;
}

let res = test([1, 3, 5], 10);
console.log(res);

如上呢，是正常的情况如果我第一个参数不给数组当然编译器它是不会报错的，例如如下：

function test(a, b) {
    return a.length + b;
}

let res = test(1, 10);
console.log(res);

但是在运行期间会有问题运行结果如下图所示：

体验TypeScript

那么这个时候就体现了 JS 这个弱类型语言的缺点了，紧接着来看看利用 Ts 来进行解决该问题，首先如果要使用 Ts 就先需要安装一下 Ts 把 Ts 进行全局安装进行使用即可，安装命令如下：

npm install typescript -g

体验TypeScript

注意点, 由于 TS 并不是一门新的语言, 而是对 JS 的扩展, 所以我们可以在 TS 文件中直接编写 JS 代码, TS 支持类型注解, 我们可以通过类型注解来告诉系统, 变量中将来只能存储什么类型的数据，例如如下我定义一个变量，该变量我只想存储数值类型的数据该如何编写呢代码如下：

let val: number;
val = 123;
val = "123";
val = true;
val = [1, 3, 5];

通过下图可发现，直接在编译器当中就报错了：

体验TypeScript

然后在创建一个文件为 .ts 结尾的文件如下，创建 index.ts 然后在该文件当中利用 Ts 当中的类型注解来解决如上利用 JS 编写的弊端：

function test(a: any[], b: number) {
    return a.length + b;
}

let res = test([1, 3, 5], 2);
console.log(res);

Ts 和 Less/Sass 一样需要进行编译成 JS 内容进行运行，编译命令如下：

tsc .\index.ts

体验TypeScript

然后在运行编译之后的 JS 文件即可如下，右键编译之后的 JS 文件点击 run：

体验TypeScript

当然了运行结果就不贴图了，然后再来看看传递其它参数类型的效果即可：

function test(a: any[], b: number) {
    return a.length + b;
}

let res = test(1, 2);
console.log(res);

然后利用如上编译命令进行编译发现报错了：

体验TypeScript