一、是什么

TypeScript 是 JavaScript 的类型的超集,支持ES6语法,支持面向对象编程的概念,如类、接口、继承、泛型等

超集,不得不说另外一个概念,子集,怎么理解这两个呢,举个例子,如果一个集合A里面的的所有元素集合B里面都存在,那么我们可以理解集合B是集合A的超集,集合A为集合B的子集

其是一种静态类型检查的语言,提供了类型注解,在代码编译阶段就可以检查出数据类型的错误

同时扩展了JavaScript 的语法,所以任何现有的JavaScript 程序可以不加改变的在 TypeScript 下工作

为了保证兼容性,typescript在编译阶段需要编译器编译成纯Javascript来运行,是为大型应用之开发而设计的语言,如下:

tsx文件如下:

const hello : string = "Hello World!"
console.log(hello)

编译文件后:

const hello = "Hello World!"
console.log(hello)

二、特性

typescript的特性主要有如下:

  • 「类型批注和编译时类型检查」 :在编译时批注变量类型
  • 「类型推断」:ts中没有批注变量类型会自动推断变量的类型
  • 「类型擦除」:在编译过程中批注的内容和接口会在运行时利用工具擦除
  • 「接口」:ts中用接口来定义对象类型
  • 「枚举」:用于取值被限定在一定范围内的场景
  • 「Mixin」:可以接受任意类型的值
  • 「泛型编程」:写代码时使用一些以后才指定的类型
  • 「名字空间」:名字只在该区域内有效,其他区域可重复使用该名字而不冲突
  • 「元组」:元组合并了不同类型的对象,相当于一个可以装不同类型数据的数组
  • ...

类型批注

通过类型批注提供在编译时启动类型检查的静态类型,这是可选的,而且可以忽略而使用JavaScript常规的动态类型

function Add(left: number, right: number): number {
return left + right;
}

对于基本类型的批注是numberboolstring,而弱或动态类型的结构则是any类型

类型推断

当类型没有给出时,TypeScript编译器利用类型推断来推断类型,如下:

let str = 'string'

变量str被推断为字符串类型,这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时

如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态any类型

接口

接口简单来说就是用来描述对象的类型 数据的类型有numbernullstring等数据格式,对象的类型就是用接口来描述的

interface Person {
name: string;
age: number;
}

let tom: Person = {
name: 'Tom',
age: 25
};

三、区别

  • TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法
  • TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译
  • TypeScript 文件的后缀名 .ts (.ts,.tsx,.dts),JavaScript 文件是 .js
  • 在编写 TypeScript 的文件的时候就会自动编译成 js 文件

更多的区别如下图所示:

参考文献

  • https://mp.weixin.qq.com/s/ISYWHgLkvsLgM-ky-So5dw

TypeScript 的理解?与 JavaScript 的区别?的更多相关文章

  1. TypeScript和JavaScript的区别

    JavaScript和TypeScript的对比 注:参考https://juejin.im/entry/5a52ed336fb9a01cbd586f9f做的笔记 概要介绍 JavaScript Ja ...

  2. TypeScript 和 JavaScript 的区别

    TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集.JavaScript 和 TypeSc ...

  3. [译] TypeScript入门指南(JavaScript的超集)

    你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父 ...

  4. TypeScript入门指南(JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

  5. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  6. 好程序员技术分享html5和JavaScript的区别

    好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站 ...

  7. 尤雨溪:TypeScript不会取代JavaScript

    来源 |evrone.com译者 | 核子可乐策划 | 蔡芳芳 近日,Evrone 与 Vue.js 的作者尤雨溪进行了一次访谈,了解他对于无后端与全栈方法.以及 Vue.js 适用场景的看法,还有他 ...

  8. 前端面试-难点问题2-java和javascript的区别

    经过多方面的参考,结合自己掌握的知识,总结了一下java和javascript的区别.欢迎大家评论! 一.关系 虽然java和javascript在名字和语法上有一点相似,并且有一些联系,javasc ...

  9. 深入理解:JavaScript原型与继承

    深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...

  10. 超链接a标签的href与onclick中使用javascript的区别

    onclick中javascript的区别一般没用到都没注意,但出错时才有些郁闷,看文本章解释如下: 以前一直很随意,后来看.net里的linkbutton似乎是用在<a href=" ...

随机推荐

  1. 使用FastWiki一分钟搭建公司的智能客服

    FastWiki 新UI介绍:基于React与LobeUI框架设计 FastWiki 最近引入了基于React的新UI,这是一个重大的更新.在设计新UI时,我们借鉴了LobeUI的框架,并且在接口调用 ...

  2. ansible-vault 教程

    基本使用 在编写playbook时,可能会涉及到一些敏感的数据,比如密码,当这些敏感数据以明文的方式存储在playbook中时,可能是不能被接受的,那么我们该怎么办呢?ansible官方已经考虑到了这 ...

  3. vscode sftp 代码同步到服务器

    然后执行 ctrl+shift+p ,搜索 SFTP:Config 回车后,会生成一个".vscode/sftp.json",这个就是配置文件 参考:VsCode SFTP插件详细 ...

  4. C# 常用特性(Attribute)

    目录 指定方法实现的属性MethodImplAttribute 标记不再使用的程序元素ObsoleteAttribute 指定属性或事件的说明DescriptionAttribute 未完待续... ...

  5. python parser 实例解析

    一 parser: 该模块为Python的内部解析器和字节码编译器提供了一个接口.该接口的主要目的是允许Python代码编辑Python表达式的分析树并从中创建可执行代码. 这比试图将任意Python ...

  6. RabbitMq消息队列进一步认识

    参考:https://www.cnblogs.com/wanglijun/p/10896896.html(应用场景) https://blog.csdn.net/weixin_41588751/art ...

  7. K8S-1.23.17+Ceph+KubeSphere 一主二从部署攻略

    K8S部署攻略 此教程以一主二从为例,需要三台服务器. 主机最低需求: 4 核 CPU,4 GB 内存,硬盘:20 GBx2 (需保留一个未分区的磁盘) 从机最低需求: 4 核 CPU,8 GB 内存 ...

  8. Ubuntu 14.04傻瓜式安装 0@0

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  9. 3DCAT+东风日产:共建线上个性化订车实时云渲染方案

    近年来,随着5G网络和云计算技术的不断发展,交互式3D实时云看车正在成为一种新的看车方式. 与传统的到4S店实地考察不同,消费者可以足不出户,通过网络与终端设备即可实现全方位展示.自选汽车配色.模拟效 ...

  10. Android优化总结

    目录介绍 1.OOM和崩溃优化 1.1 OOM优化 1.2 ANR优化 1.3 Crash优化 2.内存泄漏优化 2.0 动画资源未释放 2.1 错误使用单利 2.2 错误使用静态变量 2.3 han ...