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


    概述

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

    类型的概念

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

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

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

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

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

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

    addOne('hello') // 报错

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

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

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

    动态类型和静态类型

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

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

    请看下面的 JavaScript 代码。

    1. // 例一
    2. let x = 1;
    3. x = 'hello';
    4. // 例二
    5. let y = { foo: 1 };
    6. delete y.foo;
    7. y.bar = 2;

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

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

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

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

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

    1. // 例一
    2. let x = 1;
    3. x = 'hello';
    4. // 例二
    5. let y = { foo: 1 };
    6. delete y.foo;
    7. y.bar = 2;

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

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

    静态类型的优点

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

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

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

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

    2)有利于发现错误

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

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

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

    1. const a = 0;
    2. const b = true;
    3. const result = a + b; // 报错

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

    1. function hello() {
    2. return 'hello world';
    3. }
    4. hello().find('hello'); // 报错

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

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

    4)提供了代码文档

    5)有助于代码重构

    静态类型的缺点

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

    2)增加了变成工作量

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

    3)更高的学习成本

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

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

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

    5)兼容性问题

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

  • 相关阅读:
    【Leetcode】191.位1的个数
    JavaScript系列(一):浏览器及内核介绍
    Django数据删除方法
    50分钟的Java面试,常见的问题都问到了
    Win11快速助手在哪里?Win11打开快速助手的方法
    Django Swagger文档库drf-spectacular
    Python Interpreter安装(各版本均可参考)
    解决ASP.NET Core的中间件无法读取Response.Body的问题
    vue路由传参
    组件自定义事件
  • 原文地址:https://blog.csdn.net/weixin_46872121/article/details/133844740