TypeScript 深度剖析:TypeScript 的理解?与 JavaScript 的区别?

news2024/9/29 3:22:51

一、是什么

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

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

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

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

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

ts 文件如下:

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;
}

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

类型推断

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

let str = "string";

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

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

接口

接口简单来说就是用来描述对象的类型 数据的类型有 numbernull 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 文件

更多的区别如下图所示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/398941.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MYSQL 最大连接数

MYSQL 最大连接数? 最大连接数也就是mysql服务最大支持多少客户端连接服务 查看服务支持最大连接数: show variables like %max_connections%;如下: 如何查看 MYSQL 服务被多少个客户端连接了? show processlist;如下: 其中 …

数位dp--Windy数

题目 思路 大体思路其实也跟第一篇博客类似,用前缀和的思想处理区间的方案数,然后求方案数则是通过把每一位数都拆分来,然后根据两种选择0-an-1和选an两种情况进行判断,但是因为前导零会对结果产生不一样的结果(比如0…

企业的ICP域名注册,你知道吗?

ICP域名备案查询的api接口,是企业在短时间内获得中沃公司最新数据的API接口。还可以帮助用户快速了解公司信息。基于域名的注册信息实时查询,适合对注册信息变更及时性要求较高的用户。通过ICP信息可以确认企业在互联网中的更多活动轨迹。企业的ICP域名注…

漏洞分析丨cve20110104

作者丨黑蛋目标程序调试工具16进制编辑器XP SP3office 2003ollydbg010Editor三、漏洞验证首先我们配置环境,并下载poc:使用ollydbg附加office excel 2003:打开poc可以看到发生了访问违规异常,像地址0x51453844中写入时发生异常&am…

【专项训练】分治、回溯

分治、回溯其实就是递归,只是是递归的一个细分,是一种特殊的递归 碰到一个题目,你就找他的重复性 最近重复性:根据重复性怎么构造以及如何分解,包括:分治、回溯 最优重复性:动态规划 本质:找重复性、分解问题、组合子问题的结果 回溯:试错! 50. Pow(x, n) https:…

sivalco使用测试pin正向导通

在学完功率半导体器件后,为了能够更好的了解功率半导体器件内部的相关性质,于是利用sivalco软件进行仿真,对于器件工作时相关数据进行分析,对于相关语句进行学习。 在功率半导体中以N或者P半导体进行掺杂获得我们所需要的器件&…

linux重置root用户密码

重置root密码 法一:rd.break 第 1 步:重启系统编辑内核参数 第 2 步:找到 linux 这行,在此行末尾空格后输入rd.break (End键也可直接进入行尾) 成功后显示页面为: 第 3 步:查看。…

华为HCIE学习之Openstack Cinder组件(cinder对接glusterfs)

文章目录一、MQ的作用二、cinder架构图三、各组件的作用四、cinder对接glusterfs一、MQ的作用 服务内各组件交互通过MQ进行 二、cinder架构图 IET,Linux用软件做存储,CNA识别过去就是IETTGT,物理存储,CNA识别过去就是TGT 三、…

十、FilterListenerAjax案例

1,Filter 1.1 Filter概述 Filter 表示过滤器,是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。Servlet 我们之前都已经学习过了,Filter和Listener 我们今天都会进行学习。 过滤器可以把对资源的请求拦截下来,从而实现一些…

公司的代理怎么用

前一阵子用公司的服务器玩docker的时候,发现拉取不了远程镜像。咨询了一下网络管理员,说是非常时期,外网权限全部关闭。这严重阻碍了我的求知欲望。于是想到了使用代理。这里简单解释一下,很多大型公司为了确保网络安全&#xff0…

2-6 SpringCloud快速开发入门: Eureka 服务注册中心发现与消费服务

接上一章节向Eureka 服务注册中心注册服务,这里讲讲Eureka 服务注册中心发现与消费服务 Eureka 服务注册中心发现与消费服务 我们已经搭建一个服务注册中心,同时也向这个服务注册中心注册了服务,接下来我们就可以发现和消费服务了&#xff0…

图像分割(Unet算法学习笔记)

知识提要 数据集使用VOC2012 CNN 卷积神经网络Convolutional Neural Network GPU图像处理单元Graphic Processing Unit)图形处理器 convolution 卷积 ReLU全名Rectified Linear Unit,意思是修正线性单元 bn全称Batch Normalization批标准化 FC全连接神经网络是一种…

打怪升级之CFile类

CFile类 信息源自官方文档:https://learn.microsoft.com/zh-cn/cpp/mfc/reference/cfile-class?viewmsvc-170。 CFile是Microsoft 基础类文件类的基类。它直接提供非缓冲的二进制磁盘输入/输出设备,并直接地通过派生类支持文本文件和内存文件。CFile与…

第二天作业docker安装

目录 一Docker的简介、下载 二Docker的安装: 2.1 上传安装包:通过xftp直接将包拖拽到Linux里面即可 2.2 安装: 2.3 启动docker 2.4 配置Docker的镜像加速器: 2.5 刷新守护进程: 2.6 重启docker: 2.7 效验配置是否成功 …

三板斧解决leetcode的链表题

在《波奇学单链表》中我们提到单链表的两个特点单向性。头节点尾节点的特殊性导致分类讨论的情况。如何看单链表?让我们简化成下图cur表示当前节点,下图表示cur移动,圆圈表示值用哨兵卫节点(新的头节点)和把尾节点看成NULL来把头尾节点一般化…

spring的beanfactory与applicationContext的区别以及继承关系

applicationContext继承关系 首先可以看一张图 ListableBeanFactory 可列举的bean工厂 hierarchical 分层bean工厂 messageSource 国际化信息 //国际化(internationalization)是设计和…

1.2 绝对误差、相对误差与有效数字

1.2.1 绝对误差和绝对误差限若x*为准确值x的一个近似值,则称 x-x*为近似值x*的绝对误差,简称误差,并用e*(x)表示,即e*(x)x-x*绝对误差虽然能清楚地表明近似值,与准确值,之间的差异,但是在实际问题中,往往无法知道准确值…

2023年3月全国数据治理工程师认证DAMA-CDGA/CDGP考试怎么通过?

弘博创新是DAMA中国授权的数据治理人才培养基地,贴合市场需求定制教学体系,采用行业资深名师授课,理论与实践案例相结合,快速全面提升个人/企业数据治理专业知识与实践经验,通过考试还能获得数据专业领域证书。 DAMA认…

【ElasticSearch】(一)—— 初识ES

文章目录1. 了解ES1.1 elasticsearch的作用1.2 ELK技术栈1.3 elasticsearch和lucene1.4 为什么不是其他搜索技术?1.5 总结2. 倒排索引2.1 正向索引2.2 倒排索引2.3 正向和倒排3. ES的一些概念3.1 文档和字段3.2 索引和映射3.3 mysql与elasticsearch1. 了解ES Elasti…

TypeScript深度剖析:TypeScript 中高级类型的理解?有哪些?

一、是什么 除了string、number、boolean 这种基础类型外,在 typescript 类型声明中还存在一些高级的类型应用 这些高级类型,是typescript为了保证语言的灵活性,所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景 二、有哪…