js之强类型与弱类型-六虎

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

前言

作为一名前端，肯定都对下面这句话理解很深：

JavaScript 是一种弱类型（或称动态类型）语言，即变量的类型是不确定的。

弱类型为我们开发提供了一些便利，但是也给我们带来了一些不宜排查的隐患！

弱类型的好处是十分灵活，可以写出非常简洁的代码。但是，对于大型项目来说，强类型更有利，可以降低系统的复杂度，在编译时就发现类型错误，减轻程序员的负担。

这里我们实现一个非常简单的加法函数

function add(sum1,sum2){
    return sum1+sum2
}

这里我们就很简单的实现了一些，这时候就有同学要发问了，这会有什么问题呢？让我们来看看几个特别的案例

let test1 = add(100,100)
let test2 = add(100,'100')

这里的两个例子就很明白的确定了这个地方，弱类型的缺点，没有强类型的监测，我们没有办法确定传入的参数是什么类型，如果我们需要进行校验就需要做很多的判断！

所以一直有人尝试，让 JavaScript 变成强类型语言。在官方最终支持强类型之前，本文介绍两种现在就可用的解决方案

Vue2.0版本就是用Flow进行编译的，React 也是哦

$ npm install --global flow-bin

Flow 的用法很多，我只举几个例子。前文介绍的两种工具，只能检查声明了类型的变量，而 Flow 可以推断变量类型。

/* @flow */
function foo(x) {
  return x*10;
}
foo("Hello, world!");

上面是的代码第一行是注释，表明需要使用 Flow 检查变量类型。

$ flow check
hello.js:7:5,19: string
This type is incompatible with
/hello.js:4:10,13: number

运行 flow check 命令，得到报错信息：预期函数 foo 的参数是一个数值，但是实际为一个字符串。

Flow 也支持变量的类型声明。

/* @flow */
function foo(x: string, y: number): string {
  return x.length * y;
}
foo("Hello", 42);

当然还可以有这种类型的校验

function foo(callback:(string,number) => void) {
   callback('-',0)
}
foo(function(str,n) {
    无返回值
})

学习使用flow主要是为了我们之后阅读源码更加方便，推荐一下这个网站www.saltycrane.com/cheat-sheet…

TypeScript 是微软2012年推出的一种编程语言，属于 JavaScript 的超集，可以编译为 JavaScript 执行。它的最大特点就是支持强类型和 ES6 Class。

安装：

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。

大部分 JavaScript 代码都只需要经过少量的修改（或者完全不用修改）就变成 TypeScript 代码，这得益于 TypeScript 强大的类型推论，即使不去手动声明变量 foo 的类型，也能在变量初始化时自动推论出它是一个 number 类型。

例如这样的js：

let foo = 1;
foo.split(' ');

完整的 TypeScript 代码是这样的：

let foo: number = 1;
foo.split(' ');

关于tsconfig.json，请参阅官方手册（中文版）。