《TypeScript》系列之对比JavaScript，TypeScript的优势

概述

TypeScript是微软公司开发的一种基于JavaScript语言的编程语言，它的目的并不是创造一种全新的语言，而是增强JavaScript的功能，使其更适合多人合作的企业级项目。TypeScript可以看做是JavaScript的超集，即它继承了后者的全部语法，所有的JavaScript脚本都可以当做TypeScript脚本（有可能报错），此外它再增加了一些自己的语法。TypeScript对JavaScript添加的最主要部分，就是一个独立的类型系统。

类型的概念

类型指的是一组具有相同特征的值，如果两个值具有某种共同的特征，就可以说，它们属于同一种类型。

举例来说，123和456这两个值，共同特征就是都能进行数值运算，所以都属于“数值”（number）类型。

可以这样理解，类型是认为添加的一种编程约束和用法提示。主要目的是在软件开发过程中，为编译器和开发工具提供更多的验证和帮助

下面是一段简单的 TypeScript 代码，演示一下类型系统的作用。

function addOne(n:number) {
  return n + 1;
}

上面示例中，函数addOne()有一个参数n，类型为数值（number），表示这个位置只能使用数值，传入其他类型的值就会报错。

addOne('hello') // 报错

上面示例中，函数addOne()传入了一个字符串hello，TypeScript 发现类型不对，就报错了，指出这个位置只能传入数值，不能传入字符串。

JavaScript语言就没有这个功能，不会检查类型对不对。开发阶段很可能发现不了这个问题，代码也许就会原样发布，导致用户在使用时遇到错误。

作为比较，TypeScript是在开发阶段报错，这样有利于提早发现错误，避免使用时报错，另一方面，函数定义里面加入类型，具有提示作用，可以告诉开发者这个函数怎么用。

动态类型和静态类型

前面说了，TypeScript 的主要功能是为 JavaScript 添加类型系统。大家可能知道，JavaScript 语言本身就有一套自己的类型系统，比如数值123和字符串Hello。

但是，JavaScript 的类型系统非常弱，而且没有使用限制，运算符可以接受各种类型的值。在语法上，JavaScript 属于动态类型语言。

请看下面的 JavaScript 代码。

// 例一
let x = 1;
x = 'hello';

// 例二
let y = { foo: 1 };
delete y.foo;
y.bar = 2;

 上面的例一，变量x声明时，值的类型是数值，但是后面可以改成字符串。所以，无法提前知道变量的类型是什么，也就是说，变量的类型是动态的。

上面的例二，变量y是一个对象，有一个属性foo，但是这个属性是可以删除掉，并且还可以新增其他属性。所以，对象有什么属性，这个属性还在不在，也是动态，没法提前知道。

正式因为存在这些动态变化，所以JavaScript的类型系统是动态，不具有很强的约束。这对于提前发现代码错误，非常不利。

TypeScript引入了一个更强大、更严格的类型系统，属于静态类型语言。

上面的代码在TypeScript里面都会报错。

// 例一
let x = 1;
x = 'hello';

// 例二
let y = { foo: 1 };
delete y.foo;
y.bar = 2;

上面实例中，例一的报错是因为变量赋值时，TypeScript以及推断确定了类型，后面就不允许再赋值为其他类型的值。即变量的类型是静态。例二的报错时因为对象的属性也是静态的，不允许随意增删。

TypeScript的作用，就是为JavaScript引入这种静态类型特征。

静态类型的优点

静态类型的很多好处，这也就是TypeScript想要达到的目的。

1）有利于代码的静态分析

有了静态类型，不必要运行代码，就可以确定变量的类型，从而推断代码有么有错误，这个就较多代码的静态分析。

这对于大型项目非常重要，单单在开发阶段运行静态检查，就可以发现很多问题，避免交付有问题的代码，大大降低了线上风险。

2）有利于发现错误

由于每个值、每个变量、每个运算符都有严格的类型约束，TypeScript就能轻松发现拼写错误、语义错误和方法调用错误，节省程序员的时间。

let obj = { message: '' };
console.log(obj.messege); // 报错

上面实例中，不小心把message拼错了，写成message。TypeScript就会报错，指出没有定义过这个属性。JavaScript遇到这种情况是不报错的。

const a = 0;
const b = true;
const result = a + b; // 报错

上面的实时合法的JavaScript代码，但是没有意义，不应该将数值a与布尔值b相加。TypeScript就会直接报错，提示运算符+不能用于数值和布尔值的相加。

function hello() {
  return 'hello world';
}

hello().find('hello'); // 报错

上面实例中，hello()返回的是一个字符串，TypeScript发现字符串没有find()方法， 所以就报错了。如果是JavaScrip，只有到运行阶段才会报错。

3）更好的IDE支持，做到语法提示和自动补全

4）提供了代码文档

5）有助于代码重构

静态类型的缺点

1）丧失了动态类型代码的灵活性

2）增加了变成工作量

        - 有了类型之后，程序员不仅需要编写功能，还需要编写类型声明，确保类型正确。这增加了不少工作量，又是会显著做场项目的开发时间

3）更高的学习成本

        - 类型系统通常比较复杂，要学习更多东西，要求开发者付出更高的学习成本

4）引入了独立的编译步骤

        - 原生的JavaScript代码，可以直接在JavaScript引起运行，添加类型系统之后，就多出了一个单独编译步骤，检查类型是否正确，并将TypeScript代码转成 JavaScript代码，这样才能运行。

5）兼容性问题

        - TypeScript依赖JavaScript生态，需要用到很多外部模块。但是，过去大部分 JavaScript 项目都没有做 TypeScript 适配，虽然可以自己动手做适配，不过使用时难免还是会有一些兼容性问题。