ts和js的区别?

news2025/1/16 4:41:57

文章目录

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

前言

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.coloradmin.cn/o/1174561.html

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

相关文章

树状数组(分析+代码)

在2023年4月29日的力扣103夜喵双周赛上,我被第四题所困扰,又于2023年5月4日早上的Linux系统基础课上,我初次接触到了树状数组。从那时候我就想写一篇博客记录一下,鸽到了现在… 参考视频 树状数组的作用 维护一个序列修改某一个…

yum

什么是yum? Linux中我们也要进行工具/指令/程序,安装,检查卸载等,需要yum的软件 安装软件的方式: 1.源代码安装--交叉编译工作 2.rpm包直接安装 3.yum / apt-get yum:yum是我们linux预装的一个指令,搜索&#x…

【C++深入浅出】STL之string用法详解

目录 一. 前言 二. STL概要 2.1 什么是STL 2.2 STL的六大组件 2.3 STL的缺陷 三. string类概述 3.1 什么是string类 3.2 为什么要使用string类 四. string类的使用 4.1 包含头文件 4.2 构造函数 4.3 赋值运算符重载 4.4 容量操作 4.5 访问/遍历操作 4.6 查找修改…

Redis之Java操作Redis的使用

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是君易--鑨,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的博客专栏《Redis实战开发》。🎯🎯 …

07 点积

点积 基本运算几何解释投影运算和基本运算的联系多维空间到一维空间的投影 点积的作用 这是关于3Blue1Brown "线性代数的本质"的学习笔记。 基本运算 两个维数相同的向量 [ 2 , 7 , 1 ] T , [ 8 , 2 , 8 ] T [2, 7, 1]^{T},[8, 2, 8]^{T} [2,7,1]T,[8,2,8]T,求它们…

Spring Boot 整合RabbitMQ

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 第七章 Spring Cloud 之 GateWay 第八章 Sprin…

【m98】abseil-cpp的cmake构建

m79的代码有些头文件没有,比如#include "absl/numeric/bits.h"使用m98版本里的代码,支持cmake构建cmake版本 WIN32 DEBUG configure Selecting Windows SDK version 10.0.22000.0 to target Windows 10.0.22621. The CXX compiler identification is MSVC 19.37.32…

第七章 Python常用函内置函数

系列文章目录 第一章 Python 基础知识 第二章 python 字符串处理 第三章 python 数据类型 第四章 python 运算符与流程控制 第五章 python 文件操作 第六章 python 函数 第七章 python 常用内建函数 第八章 python 类(面向对象编程) 第九章 python 异常处理 第十章 python 自定…

解决Visual Studio 2010 运行时屏幕一闪而过,无结果显示的问题

安装配置:Visual Studio 2010 软件安装教程(附下载链接)——计算机二级专用编程软件https://blog.csdn.net/W_Fe5/article/details/134218817?spm1001.2014.3001.5502 1、 我们在运行时会出现窗口一闪而过,这时候我们右键Test_1…

C++初阶-类和对象(中)2

类和对象(中)2 一、赋值运算符重载运算符重载赋值运算符重载前置和后置重载 二、日期类的实现三、const成员四、取地址及const取地址操作符重载 一、赋值运算符重载 运算符重载 C为了增强代码的可读性引入了运算符重载,运算符重载是具有特殊…

​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​

软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】 课本里章节里所有蓝色字体的思维导图

c语言练习100(贪吃蛇的实现)

贪吃蛇的实现 先实现主界面,后续将会不断完善。(逐渐添加更多的功能) test.c #define _CRT_SECURE_NO_WARNINGS #include"snake.h" void Test() {Snake snake { 0 };//创建贪吃蛇//1.游戏开始 - 初始化游戏GameStart(&sn…

类锁和实例对象锁你分清了吗?

系列文章目录 文章目录 系列文章目录前言一、什么是锁竞争?二、什么是类锁?什么是实例对象锁?三、给类对象加锁不是锁住了整个类四、总结 前言 java选手们应该都对锁不陌生,加锁了就是为保证操作语句的原子性,如果你是…

二AcW826. 单链表

#include<iostream>using namespace std;const int N100010;//head头结点下标//e[i]值//ne[i]下一个位置的地址//idx当前已经用到了哪个点int head, e[N],ne[N],idx;void init(){head-1;idx0; }void add_to_head(int x)//插到head{e[idx]x;ne[idx]head;//以前head指针是指…

多媒体应用设计师 2023年(含答案回忆版)

以下是小红书上的回忆版 软考考完疯狂回忆&#xff0c;多媒体应用设计师选择题 1.pattern 2.effective 3.merge 4.applications 5.graphic 6.udp 7.rtp 8.rtsp 9.10cm 10.永久 11…97 12.工作技术管理标准 13.管理型元数据 14.premiere 15.wave 16.500km/h 17.3M 18.44000 19.…

11.1~11.2数电实验一些点+11.4~11.5报错复盘

方框写在前面是说这个数有多大&#xff0c;写在后面是说这类数有多少 前面的用于计数&#xff0c;每位无实际意义&#xff1b;后面每位都代表一个同类型的&#xff0c;即数组&#xff0c;每位有实际意义 使用四位格雷码作为深度为8的FIFO的读写指针 将格雷码转换成四位二进制…

Amlogic IR模块Linux驱动分析

目录 一、简介 1、了解IR协议 2、代码结构介绍 二、硬件原理及连接 2、芯片手册解读 三、驱动代码分析 1、设备树介绍 1&#xff09;reg 2&#xff09;protocol 3&#xff09;pinctrl 4&#xff09;map 2、linux驱动介绍 1&#xff09;makefile 2&#xff09;数据…

【C++--string模拟实现】

一、基本思路 新建一个项目&#xff0c;在项目中创建头文件string.h 源文件string.cpp 在头文件中&#xff0c;先定义一个新的命名空间&#xff08;为了防止与库中的string发生冲突&#xff09;&#xff0c;命名空间的名字可以按照自己意愿来命名。 接下来就可以在命名空间中…

高斯过程回归 | 高斯过程回归(GPR)区间预测

对于高斯过程,高斯指的是多元高斯分布,过程指的是随机过程。 我们都知道随机过程就是指函数的分布,那么多元高斯分布实际上应该是指无限元的高斯分布。 协方差函数也称为核函数,是高斯过程回归的重点。核函数的选取方式有很多,包括径向基函数(高斯核函数)、线性核函数、…

C++相关练习及详细讲解

目录 题1&#xff1a;输出数组中第k小的数在数组内找出查找数字在该数组第一次出现的索引 题1&#xff1a;输出数组中第k小的数 题目描述&#xff1a; 给定一个数组arr 输出数组中第k小的数 如果不存在 输出-1 输入格式&#xff1a; 第一行输入一个数字n 代表数组arr大小 第二…