ts和js的区别?

文章目录

  • 前言
  • 是什么?
  • 二、特性
  • 三、区别
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Typescript
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

在这里插入图片描述

是什么?

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 文件

更多如下图:
在这里插入图片描述


后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

酷开科技 | 酷开系统里萌萌哒小维在等你!

在一片金黄淡绿的颜色中,深秋的脚步更近了,在这个气候微凉的季节里,你是不是更想拥有一种温暖的陪伴呢?酷开科技智慧AI语音功能更懂你,贴心的小维用心陪伴你的每一天。 01.全天候陪伴 在酷开系统中,只要你…

vue3中router和route的区别(使用场景)

1.router router是用来对路由进行操作的; 多用于路由跳转、路由守卫、页面刷新、给路由文件添加路由路径或者移除路由路径等等 2.route route是用来获取路由信息的; 多用于获取路由路径、路由传参数据、路由文件配置的属性信息等等

链表(1)

目录 单链表 主函数test.c test1 test2 test3 test4 头文件&函数声明SList.h 函数实现SList.c 打印SLPrint 创建节点CreateNode 尾插SLPushBack 头插SLPushFront 头删SLPopBck 尾删SLPopFront 易错点 本篇开始链表学习。今天主要是单链表&OJ题目。 单链…

如何本地搭建SeaFile私有云盘并实现远程连接

文章目录 1. 前言2. SeaFile云盘设置2.1 Owncould的安装环境设置2.2 SeaFile下载安装2.3 SeaFile的配置 3. cpolar内网穿透3.1 Cpolar下载安装3.2 Cpolar的注册3.3 Cpolar云端设置3.4 Cpolar本地设置 4.公网访问测试5.结语 1. 前言 现在我们身边的只能设备越来越多&#xff0c…

高校为什么需要大数据挖掘平台?

目前数据挖掘已经成为各种应用领域的重要技术,大学数据挖掘课程的开放已经出现。数据挖掘课程整合了多门学科知识。该课程包括各种理论知识,也离不开相关的实用技术。整个教学过程是培养和提高学生全面创新和解决问题的能力。过去,教学过程理…

uniapp 微信小程序 uni-file-picker上传图片报错 chooseAndUploadFile

这个问题真的很搞, 原因是微信开发者工具更新了,导致图片上传问题。 解决方法: 将微信开发者工具的基础库改为2.33.0一下即可。 在微信开发者工具详情 - 本地设置中(记得点击‘推送’按钮):

中国多主数据库:压强投入,期待破茧

拿破仑曾说:“战争的艺术就是在某一点上集中最大优势兵力”,强调了力量集中的重要性。 如今,国际形势风云变幻,西方世界对中国的围剿不再仅仅体现在军事和地缘政治上,而更多表现在经济与科技上。在科技领域&#xff0…

2-爬虫-代理池搭建、代理池使用(搭建django后端测试)、爬取某视频网站、爬取某视频网站、bs4介绍和遍历文档树

1 代理池搭建 2 代理池使用 2.1 搭建django后端测试 3 爬取某视频网站 4爬取某视频网站 5 bs4介绍和遍历文档树 1 代理池搭建 # ip代理-每个设备都会有自己的IP地址-电脑有ip地址---》访问一个网站---》访问太频繁---》封ip-收费:靠谱稳定--提供api-免费&#xff…

x264交叉编译(ubuntu+arm)

1.下载源码 https://code.videolan.org/videolan/x264 在windows下解压;复制到ubuntu; 2.进入源码文件夹-新建脚本文件 touch sp_run.sh 3.在sp_run.sh文件中输入 #!/bin/sh./configure --prefix/home/alientek/sp_test/x264/sp_install --enable-…

Android工具栏ToolBar

主流APP除了底部有一排标签栏外,通常顶部还有一排导航栏。在Android5.0之前,这个顶部导航栏以ActionBar控件的形式出现,但AcionBar存在不灵活、难以扩展等毛病,所以Android5.0之后推出了ToolBar工具栏控件,意在取代Aci…

Docker基础(简单易懂)

目录 一、docker是什么 核心概念 二、docker安装 1、卸载docker 2、使用yum 安装 三、docker常用命令 1、帮助命令 2、镜像命令 1)查看镜像 2)查询镜像 3)拉取镜像 4)删除镜像 3、容器命令 四、容器数据卷 五、Dock…

解决美颜SDK集成:技术最佳实践和故障排除

美颜SDK已成为许多应用的核心功能,因为它可以增强用户体验,提高图像质量,吸引更多的用户。然而,集成美颜SDK并不总是一帆风顺。本文将为您介绍一些关键的技术最佳实践,以及如何排除集成过程中可能遇到的故障。 一、技…

快速实现一个企业级域名 SSL 证书有效期监控巡检系统

Why 现在对于企业来说,HTTPS 已经不是可选项,已经成为一个必选项。HTTPS 协议采用 SSL 协议,采用公开密钥的技术,提供了一套 TCP/IP 传输层数据加密的机制。SSL 证书是一种遵守 SSL 协议的服务器数字证书,一般是由权威…

antv/x6 自定义html节点并且支持动态更新节点内容

antv/x6 自定义html节点 效果图定义一个连接桩公共方法注册图形节点创建html节点动态更新节点内容 效果图 定义一个连接桩公共方法 const ports {groups: {top: {position: top,attrs: {circle: {r: 4,magnet: true,stroke: #cf1322,strokeWidth: 1,fill: #fff,style: {visib…

2023下半年软考系统集成项目管理工程师上午真题及答案解析

1.( C )不属于风险识别的信息收集技术。 A.头脑风暴 B.德尔菲技术 C.排除法 D.根本原因分析 解析: 2.( C )不是SaaS(软件即服务)的特点。 A.由供应商管理软件更新和安全 B.无需购买软件 C.需要自行安装和维护软件 D.按需付费 解析: 3.…

LiveMeida视频接入网关

一、产品简介 视频接入网关主要部署在视频存储节点或视频汇聚节点,面向不同用户,主要用于对接不同厂家、不同型号的摄像机设备,获取摄像机视频后,以统一标准的视频格式和传输协议,将视频推送至上层联网/应用平台。可广…

自动化测试:在Linux下搭建接口自动化测试平台详解

我们今天来学习一下在Linux下如何搭建基于HttpRunner开发的接口自动化测试平台吧! 需要在Linux上提前准备的环境(下面是本人搭建时的环境): 1,Python 3.6.8 2,MySQL 5.7 在这我也准备了一份软件测试视…

【实战Flask API项目指南】之三 路由和视图函数

实战Flask API项目指南之 路由和视图函数 本系列文章将带你深入探索实战Flask API项目指南,通过跟随小菜的学习之旅,你将逐步掌握 Flask 在实际项目中的应用。让我们一起踏上这个精彩的学习之旅吧! 前言 当小菜踏入Flask后端开发的世界时&…

三级分层查询省市区数据

1、数据库数据 * 2、实现的效果 3、controller层 Api(tags "地址库") RestController RequestMapping("/basic/city") public class DataTChinaCityController extends BaseController {Resourceprivate IProductSaleDeliveryService productSaleDelive…

基于SpringBoot+Vue的旅游系统、前后端分离

博主24h在线,想要源码文档部署视频直接私聊,低价有偿! 基于SpringBootVue的旅游系统、前后端分离 开发语言:Java 数据库:MySQL 技术:SpringBoot、Vue、Mybaits Plus、ELementUI 工具:IDEA/Eci…