typescript 的数据类型有哪些

在这里插入图片描述

👩 个人主页:不爱吃糖的程序媛
🙋‍♂️ 作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端领域技术,成长的路上共同学习共同进步,一起加油呀!
✨系列专栏:前端面试宝典、JavaScript进阶、vue实战
📢 资料领取:前端进阶资料以及文中源码可以在🎈公众号【不爱吃糖的程序媛】领取

一、typescript是什么

typescriptjavascript的超集,在javascript基础上提供了更加实用的类型供开发使用;

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

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

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

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

二、typescript有哪些数据类型

typescript 的数据类型主要有如下:

  • boolean(布尔类型)
  • number(数字类型)
  • string(字符串类型)
  • array(数组类型)
  • tuple(元组类型)
  • enum(枚举类型)
  • any(任意类型)
  • null 和 undefined 类型
  • void 类型
  • never 类型
  • object 对象类型

boolean

布尔类型

let flag:boolean = true;
// flag = 123; // 错误
flag = false;  //正确

number

数字类型,和javascript一样,typescript的数值类型都是浮点数,可支持二进制、八进制、十进制和十六进制

let num:number = 123;
// num = '456'; // 错误
num = 456;  //正确

进制表示:

let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制

string

字符串类型,和JavaScript一样,可以使用双引号(")或单引号(')表示字符串

let str:string = 'this is ts';
str = 'test';

作为超集,当然也可以使用模版字符串``进行包裹,通过 ${} 嵌入变量

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }

array

数组类型,跟javascript一致,通过[]进行包裹,有两种写法:

方式一:元素类型后面接上 []

 let arr:string[] = ['12', '23'];arr = ['45', '56'];

方式二:使用数组泛型,Array<元素类型>

let arr:Array<number> = [1, 2];
arr = ['45', '56'];

tuple

元祖类型,允许表示一个已知元素数量和类型的数组,各元素的类型不必相同

let tupleArr:[number, string, boolean];
tupleArr = [12, '34', true]; //ok
typleArr = [12, '34'] // no ok

赋值的类型、位置、个数需要和定义(生明)的类型、位置、个数一致

enum

enum类型是对JavaScript标准数据类型的一个补充,使用枚举类型可以为一组数值赋予友好的名字

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

any

可以指定任何类型的值,在编程阶段还不清楚类型的变量指定一个类型,不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查,这时候可以使用any类型

使用any类型允许被赋值为任意类型,甚至可以调用其属性、方法

let num:any = 123;
num = 'str';
num = true;

定义存储各种类型数据的数组时,示例代码如下:

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

null 和 和 undefined

JavaScriptnull 表示 “什么都没有”,是一个只有一个值的特殊类型,表示一个空对象引用,而undefined表示一个没有设置值的变量

默认情况下nullundefined是所有类型的子类型, 就是说你可以把 null undefined 赋值给 number 类型的变量

let num:number | undefined; // 数值类型 或者 undefined
console.log(num); // 正确
num = 123;
console.log(num); // 正确

但是ts配置了--strictNullChecks标记,nullundefined只能赋值给void和它们各自

void

用于标识方法返回值的类型,表示该方法没有返回值。

function hello(): void {alert("Hello Runoob");
}

never

never是其他类型 (包括nullundefined)的子类型,可以赋值给任何类型,代表从不会出现的值

但是没有类型是 never 的子类型,这意味着声明 never 的变量只能被 never 类型所赋值。

never 类型一般用来指定那些总是会抛出异常、无限循环

let a:never;
a = 123; // 错误的写法a = (() => { // 正确的写法throw new Error('错误');
})()// 返回never的函数必须存在无法达到的终点
function error(message: string): never {throw new Error(message);
}

object

对象类型,非原始类型,常见的形式通过{}进行包裹

let obj:object;
obj = {name: 'Wang', age: 25};

三、typescript 和 javascript的区别?

1.类型系统:JavaScript是一种动态类型语言,变量的类型在运行时确定,并且可以随意更改。而TypeScript引入了静态类型系统,允许开发人员在编译时声明变量的类型,并进行类型检查。这有助于在开发阶段发现和预防潜在的类型错误,提高代码的健壮性和可维护性。

2.类型注解:在TypeScript中,可以使用类型注解来显式声明变量的类型,如let num: number = 10;。而在JavaScript中,不需要显式声明变量的类型,可以直接赋值。

3.语言特性:TypeScript在JavaScript的基础上增加了一些新的语言特性,如类(Class)、接口(Interface)、枚举(Enum)等。这些特性使得代码结构更清晰、可读性更好,对于大型项目的维护和团队协作更加有益。

4.编译过程:TypeScript需要通过编译器将TypeScript代码转换为可执行的JavaScript代码,然后在浏览器或Node.js环境中运行。而JavaScript代码可以直接在浏览器或Node.js中运行。

5.模块和导入:TypeScript支持使用CommonJS、AMD或ES6等模块系统,并提供了对第三方库的类型定义支持。而JavaScript最初只支持简单的脚本形式,但随着ES6标准的引入,也增加了对模块系统的支持。

参考文献

  • https://www.tslang.cn/docs/handbook/basic-types.html

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

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

相关文章

react路由基础

1.目录 A. 能够说出React路由的作用 B. 能够掌握react-router-dom的基本使用 C. 能够使用编程式导航跳转路由 D. 能够知道React路由的匹配模式 2.目录 A. React路由介绍 B. 路由的基本使用 C. 路由的执行过程 D. 编程式导航 E. 默认路由 F. 匹配模式 3.react路由介绍 现代…

cmake如何将源文件按照指定的组织方式进行分组,在IDE例如vistual stdio或者xcode项目工程文件中展示和管理这些源文件

1、我们先来看下面的一个项目的结构 TestGroup工程下面的main.cpp同级的有两个文件夹&#xff0c;到时候我们想在IDE比如xcode或者visual stdio2019中也显示这样的结构怎么弄呢(答案是用cmake中的source_group函数) 2、假如没有用source_group生成的xcode工程是怎么样的&#…

鸿蒙ArkTs开发WebView问题总结

1. 加载WebView页面报错"Can not read properties of null (reading getltem)" 解决: 在加载webview的controller中加入.domStorageAccess(true) build() {Column() {Row().width(100%).height(50rpx)Web({ src: src, controller: this.controller }).javaScriptAc…

跟着cherno手搓游戏引擎【28】第一个游戏!源码解读!逐行注释!

源码解读&#xff1a; GameLayer层级&#xff1a;在构造函数中&#xff1a;创建窗口和相机&#xff0c;对随机数种子初始化&#xff1b; 在OnAttach方法中&#xff1a;初始化关卡&#xff1a;加载资源初始化地图信息&#xff1b;设置字体&#xff1b; 在OnUpdate方法中&…

云原生架构技术揭秘:探索容器技术的奥秘

云原生的概念和演进都是围绕云计算的核心价值展开的&#xff0c;比如弹性、自动化、韧性&#xff0c;所以云原生所涵盖的技术领域非常丰富。 随着云计算技术的不断发展&#xff0c;云原生架构已经成为了新一代软件开发的重要趋势。本文将为您介绍云原生架构的相关技术&#xf…

java BIO深入学习

一、BIO的工作原理 传统Io(BIO)的本质就是面向字节流来进行数据传输的 ①:当两个进程之间进行相互通信&#xff0c;我们需要建立一个用于传输数据的管道(输入流、输出流)&#xff0c;原来我们传输数据面对的直接就是管道里面一个个字节数据的流动&#xff08;我们弄了一个 by…

综合实战(volume and Compose)

"让我&#xff0c;重获新生~" MySQL 灾难恢复 熟练掌握挂载卷的使用&#xff0c;将Mysql的业务数据存储在 外部。 实战思想: 使用 MySQL 5.7 的镜像创建容器并创建一个普通数据卷 "mysql-data"用来保存容器中产生的数据。我们需要容器连接到Mysql服务&a…

java008 - Java方法

1、方法概述 1.1 概念 将独立功能的代码块组织成为一个整体&#xff0c;使其具有特殊功能的代码集。 1.2 注意事项 方法必须先创建才能使用&#xff0c;该过程称为方法的定义方法创建好不能直接运行&#xff0c;需要手动使用才执行&#xff0c;该过程称为方法的调用 2、方…

观察者模式与发布订阅模式

观察者模式 定义&#xff1a; 观察者模式是一种行为型设计模式&#xff0c;定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 结构图&#xff1a; ES6简易代码实现&#xff1a; //ts环境下…

ai作画在线生成!这8个AI生图工具一定要知道。

过去的2023年被称作AI元年&#xff0c;随之而来的2024&#xff0c;被业内人士称之为AI应用元年&#xff0c;即随着大模型和各类AI应用的涌现速度放缓&#xff0c;人们关注的焦点也从产品层面&#xff08;有哪些好用的AI应用&#xff09;&#xff0c;转移到AI如何更好地赋能实际…

【Godot4自学手册】第十七节主人公的攻击和敌人的受伤

本节主要学习主人公是如何向敌人发起进攻的&#xff0c;敌人是如何受伤的&#xff0c;受伤时候动画显示&#xff0c;击退效果等。其原理和上一节内容相同&#xff0c;不过有许多细节需要关注和完善。 一、修改Bug 在本节学习之前&#xff0c;我将要对上一节的代码进行完善&am…

androidframework开发面试,阿里P8成长路线

字节跳动Android面经 一面问的 Java 和 Android 基础 1、Jvm虚拟机 2、messageQueue会不会阻塞ui线程 3、对象锁和类锁 4、之字形打印树 5、还有其他的 《Android学习笔记总结最新移动架构视频大厂安卓面试真题项目实战源码讲义》 **完整开源项目&#xff1a;docs.qq.com/doc…