一文了解什么是TypeScript?

目录
  • 1.JavaScript的问题
  • 2.TypeScript的优势
  • 3.TypeScript的缺点
  • 4.TypeScript的运行环境
  • 5.作用域问题

前言:

TypeScriptJavaScript的超集,它可以编译成纯JavaScript代码。

那为什么会出现TypeScript这门语言,主要是因为现在的JavaScript可以开发很多复杂的项目,但是JavaScript又缺乏其可靠性,在使用的时候需要我们为了代码的健壮性需要添加很多业务逻辑去判断。

TypeScript可以运行在浏览器环境、Node.js环境或者ECMAScript3或者更高的JavaScript的引擎中。

1.JavaScript的问题

JavaScript的问题主要有如下几个:

JavaScript的类型异常只有在运行的时候才可以发现。

因为JavaScript的函数的类型是不明确的,有可能导致函数的最终功能导致出现问题,

如下这段代码:

function sum(x, y){
  return x + y
}
sum(100, '100') // 100100

2.TypeScript的优势

  • JavaScript是动态类型的编程语言,所谓的动态类型,就是在编译时候时候才知道其数据类型是Number 还是String;而TypeScript是静态类型的编程语言,所谓的静态类型就是编写的时候就知道其数据类型是什么,比例定义一个变量
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的命令如下:

npm install -g typescript@3.6.4

这里我通过@指定版本号,也可以不指定版本号

安装完TypeScript后,还需要安装一个ts-node的工具,如果安装该工具话是不能直接运行TS代码的,需要将TS的代码编成JavaScript后才能执行。

执行流程如下:

# 编译 TS 代码
tsc demo.ts
# 编译后会得到 demo.js 文件,然后就可以运行了

如果安装了node-ts工具后,就可以直接执行TS代码了。

具体步骤如下:

# 1. 全局安装
npm install -g ts-node@8.4.1
# 2. 运行代码
ts-node demo.ts

值得注意的是安装之后的目录一定需要在环境变量中,不然会报错的。

5.作用域问题

我们在项目中执行ts文件时,如果不同文件中存在相同的变量名是会抛出异常的 ,

示例代码如下:

a.ts

let str: string = 'Hello World'
b.ts

let str: string = '一碗周'

此时就会抛出一个异常,即无法重新声明块范围变量“str”,如果编辑器是VScode的话,鼠标悬停到变量名会进行提示。

解决这个问题的方式有两种,第一种是为每个文件创建一个立即执行函数(即匿名函数),保证每个文件都拥有单独的作用域。

示例代码如下:

(function() {
  let str: string = '一碗周'
}){}

第二种方式是使用export将当前文件作为模块导出。示例代码如下:

let str: string = '一碗周'

export {}

到此这篇关于什么是TypeScript?的文章就介绍到这了,更多相关TypeScript内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript 与 TypeScript之间的联系

    目录 1.什么是 JavaScript? 2.JavaScript 有什么用? 3.什么是 TypeScript? 4.TypeScript 有哪些特点? 5.TypeScript 相对于 JavaScript 的用途是什么? 6.我们应该开始使用 TypeScript 吗? 1.什么是 JavaScript? JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言.这是一个高级别的.通常是即时编译的.多范式的. Vanilla JavaScript 是一个名称,用

  • 浅谈TypeScript 索引签名的理解

    目录 1.什么是索引签名 2. 索引签名语法 3. 索引签名的注意事项 3.1不存在的属性 3.2 string 和 number 键 4.索引签名与 Record<Keys, Type>对比 我们用两个对象来描述两个码农的工资: const salary1 = { baseSalary: 100_000, yearlyBonus: 20_000 }; const salary2 = { contractSalary: 110_000 }; 然后写一个获取总工资的函数 function tot

  • 详解 TypeScript 枚举类型

    目录 1. 数字枚举 2. 字符串枚举 3. 反向映射 4. 异构枚举 5. 常量枚举 6. 枚举成员类型和联合枚举类型 (1)枚举成员类型 (2)联合枚举类型 7. 枚举合并 前言: TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好,可以理解枚举就是一个字典. 枚举类型使用enum来定义: enum Day { SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, F

  • 一文了解什么是TypeScript?

    目录 1.JavaScript的问题 2.TypeScript的优势 3.TypeScript的缺点 4.TypeScript的运行环境 5.作用域问题 前言: TypeScript是JavaScript的超集,它可以编译成纯JavaScript代码. 那为什么会出现TypeScript这门语言,主要是因为现在的JavaScript可以开发很多复杂的项目,但是JavaScript又缺乏其可靠性,在使用的时候需要我们为了代码的健壮性需要添加很多业务逻辑去判断. TypeScript可以运行在浏览器

  • Typescript中interface与type的相同点与不同点的详细说明

    interface VS type 大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别 An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type

  • 一文了解TypeScript数据类型

    目录 基础类型 any类型 数组 元组 Interface 函数 类型自推 联合类型(二选一甚至多选一) class 枚举 基础类型 ts中支持更多的类型 let age: number = 10 // Number let firstName: string = '凉宸' // String let lastName: string = '凉宸' // String let isMary: boolean = true // boolean let unde: undefined = unde

  • 一文搞懂TypeScript的安装、使用、自动编译的教程

    1. 初识 TypeScript 上篇文章给大家介绍过TypeScript的安装.使用.自动编译的实现  需要的朋友点击查看. TypeScript 的介绍 TypeScript 是一种由微软开发的开源.跨平台的编程语言.它是 JavaScript 的超集,最终会被编译为 JavaScript 代码. 2012 年 10 月,微软发布了首个公开版本的 TypeScript,2013 年 6 月 19 日,在经历了一个预览版之后微软正式发布了正式版 TypeScript TypeScript 的作

  • 一文详解typeScript的extends关键字

    目录 前言 extends 的几个语义 extends 与 类型组合/类继承 extends 与类型约束 extends 与条件类型 extends 与 {} extends 与 any extends 与 never extends 与 联合类型 extends 判断类型严格相等 extends 与类型推导 总结 前言 声明: 以下文章所包含的结论都是基于 typeScript@4.9.4 版本所取得的. extends 是 typeScript 中的关键字.在 typeScript 的类型编

  • 详解使用Typescript开发node.js项目(简单的环境配置)

    最近在学习typescript的过程中,想到也许可以使用ts来开发node.js项目.在网上搜了一下,其实已经有很多开发者实践了这方面的内容.这里,我记录一下自己搭建开发环境的简单过程. 使用Typescript开发的好处: 较严格的类型检查和语法检查. 对ES6/ES2015/ES7(部分)支持比较好. 编译后的js文件很干净,也支持多种代码规范. 其他,请参见文档. 准备 node.js v6.9.1 或者任意的新版本,老版本暂时没有试验. tsc typescript编译器,使用npm安装

  • c#程序员对TypeScript的认识过程

    简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识TypeScript的过程. 注:本文编写是基于Typescript0.8版本,而且初用,可能过时,具体规范可以参考http://www.typescriptlang.org 命名空间和类 作为面向对象的开发人员思维,第一个想到的是TypeScript如何定义

  • Vue2 Vue-cli中使用Typescript的配置详解

    前言 因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧. 一.初步配置 首先安装官方插件vue-class-component,vue-property-decorator,配置webpack. webpack配置如下: 修改入口文件 entry: { app: './src/main.ts

  • 在Vue组件中使用 TypeScript的方法

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

  • js捆绑TypeScript声明文件的方法教程

    前话 TypeScript是JavaScript类型的超集,这是TypeScript的文档介绍的一句话,那么他们存在联系呢? 我的理解是,TypeScript在JavaScript基础上引入强类型语言的特性.开发者使用TypeScript语法进行编程开发,最终通过转换工具将TypeScript转换成JavaScript. 使用TypeScript能够避免在原生JavaScript上开发所带来的弱类型语言的坑.(我该输入啥?调用后返回啥?哎还是看看源码吧...) 嗯!很好,强类型的JavaScri

随机推荐