TypeScript 的理解?与 JavaScript 的区别?

一、是什么
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;
}
对于基本类型的批注是number、bool和string,而弱或动态类型的结构则是any类型
类型推断
当类型没有给出时,TypeScript编译器利用类型推断来推断类型,如下:
let str = 'string'
变量str被推断为字符串类型,这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时
如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态any类型
接口
接口简单来说就是用来描述对象的类型 数据的类型有number、null、string等数据格式,对象的类型就是用接口来描述的
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 的区别?的更多相关文章
- TypeScript和JavaScript的区别
JavaScript和TypeScript的对比 注:参考https://juejin.im/entry/5a52ed336fb9a01cbd586f9f做的笔记 概要介绍 JavaScript Ja ...
- TypeScript 和 JavaScript 的区别
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集.JavaScript 和 TypeSc ...
- [译] TypeScript入门指南(JavaScript的超集)
你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父 ...
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- 好程序员技术分享html5和JavaScript的区别
好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站 ...
- 尤雨溪:TypeScript不会取代JavaScript
来源 |evrone.com译者 | 核子可乐策划 | 蔡芳芳 近日,Evrone 与 Vue.js 的作者尤雨溪进行了一次访谈,了解他对于无后端与全栈方法.以及 Vue.js 适用场景的看法,还有他 ...
- 前端面试-难点问题2-java和javascript的区别
经过多方面的参考,结合自己掌握的知识,总结了一下java和javascript的区别.欢迎大家评论! 一.关系 虽然java和javascript在名字和语法上有一点相似,并且有一些联系,javasc ...
- 深入理解:JavaScript原型与继承
深入理解:JavaScript原型与继承 看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解. 首先JavaScr ...
- 超链接a标签的href与onclick中使用javascript的区别
onclick中javascript的区别一般没用到都没注意,但出错时才有些郁闷,看文本章解释如下: 以前一直很随意,后来看.net里的linkbutton似乎是用在<a href=" ...
随机推荐
- mockjs 前端写完 给后台调 mock.js | 改到2.0版本
需求:最近活太忙了,实在是联调没有时间了,无奈又拾起来mockjs 1 安装mockjs npm install mockjs // 这是个只在开发的时候用,打包后就没有了,业务更安全 npm ins ...
- 重新认识 tag 快照 git (项目临时添加需求,之前有分支合并,导致从节点拉分支不行了,因为没有tag快照)
之前的tag认知 之前一直以为tag就是在git的提交commit上打一个标,然后可以拉出分支.之前没太重视. 因为我觉得 可以直接从某个commit直接拉出分支,这打不打tag无所谓 翻车现场 今天 ...
- 基于2.4G私有协议的无线取餐系统设及实现
前记 最近在使用TLSR8355做几个小产品.正好赶上有客户需要一个无线取餐系统解决方案.笔者分析了一下需求.该芯片有充足的按键,LED灯,GPIO接口等.做这一款产品是顺道的事情. 需求梳理 功 ...
- C++ 中的关联,聚合,组合 以及 它们的生命周期。
关联,C++使用指针实现,两者到关系最弱,并且可以两向关联,B* A::b 与 A* B::a 可以并存,两者间没有明确的ownership关系,为什么不是引用,因为引用没有办法实现相向引用,这会是一 ...
- 四种方式实现点击chrome链接在ie中显示页面
1.c++ socket通过浏览器在ie中打开指定url github源码:https://github.com/iamzken/cpp-open-ie 2.vb生成exe,url访问exe启动ie并 ...
- 【2311. 小于等于 K 的最长二进制子序列】贪心
class Solution { public static void main(String[] args) { Solution solution = new Solution(); System ...
- 全网首套完整containerd容器工具教程
1.Containerd的由来 [Docker名噪一时,捐出runC]2013年docker公司在推出docker产品后,由于其对全球技术产生了一定的影响力,Google公司明显感觉到自己公司内部所使 ...
- module 'numpy' has no attribute 'bool'
module 'numpy' has no attribute 'bool' 问题: Traceback (most recent call last): File "/home/test. ...
- KingbaseES Clusterware 高可用案例之---构建iSCSI共享存储
案例说明: 在KingbaseES Clusterware高可用的架构中,集群节点需要访问共享的存储设备,可以使用FC SAN.iscsi SAN.NAS等存储设备.本案例详细描述了,在Linux系统 ...
- .NET分布式Orleans - 7 - Streaming
概念 在Orleans中,Streaming是一组API和功能集,它提供了一种构建.发布和消费数据流的方式. 这些流可以是任何类型的数据,从简单的消息到复杂的事件或数据记录.Streaming API ...