耀极客论坛

 找回密码
 立即注册
查看: 2978|回复: 0

一文了解什么是TypeScript?

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 02:34:02 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了什么是TypeScript,TypeScript是JavaScript的超集,它可以编译成纯JavaScript代码,TypeScript可以运行在浏览器环境、Node.js环境或者ECMAScript3或者更高的JavaScript的引擎中,下面我们就进入文章一起学习TypeScript的详细内容吧
  前言:

  TypeScript是JavaScript的超集,它可以编译成纯JavaScript代码。
  那为什么会出现TypeScript这门语言,主要是因为现在的JavaScript可以开发很多复杂的项目,但是JavaScript又缺乏其可靠性,在使用的时候需要我们为了代码的健壮性需要添加很多业务逻辑去判断。
  TypeScript可以运行在浏览器环境、Node.js环境或者ECMAScript3或者更高的JavaScript的引擎中。

1.JavaScript的问题

  JavaScript的问题主要有如下几个:
  JavaScript的类型异常只有在运行的时候才可以发现。
  因为JavaScript的函数的类型是不明确的,有可能导致函数的最终功能导致出现问题,
  如下这段代码:
  1. function sum(x, y){
  2.   return x + y
  3. }
  4. sum(100, '100') // 100100
复制代码
2.TypeScript的优势

       
  • JavaScript是动态类型的编程语言,所谓的动态类型,就是在编译时候时候才知道其数据类型是Number 还是String;而TypeScript是静态类型的编程语言,所谓的静态类型就是编写的时候就知道其数据类型是什么,比例定义一个变量
  1. let num: number = 6;
复制代码
  num这个变量从头到尾只能是number类型,如果将字符串赋值给他就会抛出异常。
  所以说,TypeScript的优势如下:
       
  • 在开发过程中,就可以定位的错误的地方,方便我们检查错误。   
  • TypeScript属于渐进式的编程语言,如果不懂其语法可以完全将其当做JavaScript来用。   
  • 减少了我们在开发过程中的不必要的类型检查。   
  • 静态类型的代码提示是要优于静态类型代码提示的。   
  • 在进行项目重构的时候会更加简单。   
  • 静态类型的代码语义化比动态类型更好,可读性更好。

3.TypeScript的缺点

  TypeScript并不是只有优点,没有缺点的,它的缺点都是相对于JavaScript来说,
  具体如下几点:
       
  • 相对于JavaScript来说,TypeScript本身增加了许多的概念。例如泛型、接口等概念。   
  • 使用TypeScript开发在短期内会增加一些成本,但是对于一个需要长期维护的项目,TypeScript能够减少其维护成本。   
  • 可能和一些库结合的不是很完美。

4.TypeScript的运行环境

  TypeScript是运行是建立在Node.js环境基础之上的,所以需要先安装一下Node.js。
  安装Node.js等一系列操作以忽略
  安装TypeScript的命令如下:
  1. npm install -g typescript@3.6.4
复制代码
  这里我通过@指定版本号,也可以不指定版本号
  安装完TypeScript后,还需要安装一个ts-node的工具,如果安装该工具话是不能直接运行TS代码的,需要将TS的代码编成JavaScript后才能执行。
  执行流程如下:
  1. # 编译 TS 代码
  2. tsc demo.ts
  3. # 编译后会得到 demo.js 文件,然后就可以运行了
复制代码
  如果安装了node-ts工具后,就可以直接执行TS代码了。
  具体步骤如下:
  1. # 1. 全局安装
  2. npm install -g ts-node@8.4.1
  3. # 2. 运行代码
  4. ts-node demo.ts
复制代码
  值得注意的是安装之后的目录一定需要在环境变量中,不然会报错的。

5.作用域问题

  我们在项目中执行ts文件时,如果不同文件中存在相同的变量名是会抛出异常的 ,
  示例代码如下:
  1. a.ts
  2. let str: string = 'Hello World'
复制代码
  1. b.ts
  2. let str: string = '一碗周'
复制代码
  此时就会抛出一个异常,即无法重新声明块范围变量“str”,如果编辑器是VScode的话,鼠标悬停到变量名会进行提示。
  解决这个问题的方式有两种,第一种是为每个文件创建一个立即执行函数(即匿名函数),保证每个文件都拥有单独的作用域。
  示例代码如下:
  1. (function() {
  2.   let str: string = '一碗周'
  3. }){}
复制代码
  第二种方式是使用export将当前文件作为模块导出。示例代码如下:
  1. let str: string = '一碗周'
  2. export {}
复制代码
  到此这篇关于什么是TypeScript?的文章就介绍到这了,更多相关TypeScript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:19 , Processed in 0.062314 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表