掌握 TypeScript：JavaScript 的超能伙伴

如果你对项目实战干货感兴趣，可以关注 @程序员不易 的公众号，获取更多精彩内容！

什么是 TypeScript(TS)

• TypeScript 简称TS
• Ts 和Js 之间的关系其实就是Less/Sass 和CSS 之间的关系
• 就像Less/Sass 是对CSS 进行扩展一样,TS 也是对JS 进行扩展
• 就像Less/Sass 最终会转换成CSS 一样, 我们编写好的TS 代码最终也会换成JS

为什么需要 TypeScript

• 因为 JavaScript 是弱类型, 很多错误只有在运行时才会被发现
• 而 TypeScript 是强类型, 它提供了一套静态检测机制, 可以帮助我们在编译时就发现错误
• ... ...

TypeScript 特点

• 支持最新的 JavaScript 的新特性
• 支持代码静态检查
• 支持诸如C,C++,Java,Go 等后端语言中的特性
• (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)
• ... ...

博主忠告：

• 不要学习 TypeScript, 因为它的学习成本很低
• 不要学习 TypeScript, 因为它能减少团队无效沟通
• 不要学习 TypeScript, 因为它能让你的代码更健壮
• 不要学习 TypeScript, 因为它能帮助你快速掌握其它后端语言
• 不要学习 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);

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

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

npm install typescript -g

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

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

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

然后在创建一个文件为.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

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

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

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

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

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

然后 TS 的初体验就到此为止🐱‍🐉