本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、弱类型异常需要等到运行时才能发现

假如我们在编写代码过程中定义了一个对象，该对象上没有foo的方法。但在后面程序中我们使用ojb.foo()去调用该对象上不存在的方法，此时编辑器并不会有任何报错提示。如果该方法在特列情况下才会去调用，那我们就可能很难去发现这个错误了。

const obj = {}
// 假设特殊情况下才会去调用
setTimeout(() => {
    obj.foo() // TypeError: obj.foo is not a function
}, 1000000)

二、函数功能可能会发生改变

这里我们定义一个两个数求和的函数，在该函数中我们没有对传入参数类型进行校验。那么如果用户传入的不是数字类型而是其他类型的时候，很有可能就会出现不是我们想要的结果。

function sum (a, b) {
    return a + b
}
console.log(sum(100, 200)) // 300
// 这里第二个参数传入的是字符串类型，一个数字与一个字符串相加，这里就会出现藏式转换，数字会被当成字符串进行拼接
console.log(sum(100, '200')) // 100200

三、对象索引器的错误用法

在js普通对象中定义的属性会被自动转换为字符串，就会出现了以下这个现象，obj[true]或obj['true']都能访问到同一个对象属性。如果这里这样使用（obj[true]），另一个地方那样使用（obj['true']）就会造成奇异，使代码可读性降低。

const obj = {}
obj[true] = 200 // 这里属性名会自动转换为字符串
obj[1] = 1
console.log(obj[true]) // 200
console.log(obj['true']) // 200
console.log(obj[1]) // 1
console.log(obj['1']) // 1

四、强类型的优势

下面我们就用TypeScript来对比强类型较弱类型的优势。

1、强类型代码可以使错误更早地暴露

在编码的时候如果我们给一个字符串类型的变量赋值一个数字，编辑器会直接提示。

const str: string = ''
str = 200 // 在编辑器中str会被红色波浪线标出（不能将类型“number”分配给类型“string”）

2、强类型代码会更智能，编码更准确

在编码的过程中，一个变量我们指定了类型后会有相应的智能提示出现。这样可以增强我们的开发体验减少编写时的错误。

function render (element: HTMLElement): void {
    // 有智能提示，可以按tab键自动补全
    element.className = 'container'
    element.innerHtml = 'hello'
}

3、进行重构时会更可靠

假设下面until对象在一个项目中很多地方都引用了，过一段时间后觉得func的命名不好想成fn，改动后所有使用until.func()地方就会报错。

// 改动前
interface untilType {
    func: () => void
}

const until: untilType = {
    func: function (): void {
        console.log('until func')
    }
}

// 改动后
interface untilType {
    fn: () => void
}

const until: untilType = {
    fn: function (): void {
        console.log('until func')
    }
}

until.func() // 若干地方使用了

4、减少了代码层面的不必要的类型判断操作

在ts中直接指定数据类型，如果传入的类型不正确会直接进行报错。

// js
function sum (a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new TypeError('arguments must be a number')
    }
    return a + b
}

function sum (a: number, b: number): number {
    return a + b
}

-EOF-

JavaScript弱类型产生的问题