05_TypeScript 中的数据类型

news2024/9/20 12:36:07

TypeScript 中的数据类型

  • 一、概述
  • 二、详解
    • 布尔类型(boolean) true / false
    • 数字类型(number)
    • 字符串类型(string)
    • 数组类型(array)
    • 元组类型(tuple) 属于数组的一种
    • 枚举类型(enum)
    • 任意类型(any)
    • null 和undefined 其他数据类型的子类型
    • void 类型
    • never 类型

一、概述

TypeScript 中为了使编写的代码更加规范,更有利于维护,增加了类型校验,在 TypeScript 中主要给我们提供了以下数据类型:
布尔类型(boolean)
数字类型(number)
字符串类型(string)
数组类型(array)
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null 和undefined
void 类型
never 类型

二、详解

当定义为布尔类型的变量赋值数字或者其他类型的时候,监视时就不能编译通过并报错
在这里插入图片描述

布尔类型(boolean) true / false

//布尔类型(boolean) true / false
var flag:boolean = true
flag = false

数字类型(number)

TypeScript 没有浮点型和整型的区分,只要是数字就都是 number 类型

//数字类型(number)
var num:number = 123
num = 333
num = 333.666
console.log(num)

字符串类型(string)

//字符串类型(string) 
let str:string = '1230'
// str=123 // 错误写法
str = '你好,我有一个帽衫'
console.log(str)

数组类型(array)

// 数组类型(array)
//es5 var arr = [1,'123',false]
//1、第一种定义数组的方式,数组中的所有数值都要统一类型,否则报错
let arr:number[] = [1,2,3,4]
let arr1:string[] = ['123','js']
console.log(arr, arr1)
//2、第二种定义数组的方式
let arr2:Array<number> = [1,3,5,4,6]
let arr3:Array<string> = ['js','ts','java']
console.log(arr2, arr3)
// 3、第三种写法
let arr4:any[] = [1,2,3,4, true, '123']
console.log(arr4)

元组类型(tuple) 属于数组的一种

// 元组类型(tuple) 属于数组的一种
// 可以指定数组中的每一个元素的类型
let arr4:[string, number, boolean] = ['ts', 2.5, true]
console.log(arr4)

枚举类型(enum)

枚举类型(enum):
随着计算机的不断普及,程序不仅只用于数值计算,还更广泛地用于处理非数值的数据,例如:性别、月份、星期几、颜色、单位名、学历、职业等,都不是数值数据。
在其他程序设计语言中,一般用一个数值来代表某一状态,这种处理方法不直观,易读性差。如果能在程序中用自然语言中有相应含义的单词来代表某一状态,则程序就很容易阅读和理解。
也就是说,事先考虑到某一变量可能取到的值,尽量用自然语言中含义清除的单词来白哦是它的每一个值,这种方法称为枚举方法,用这种方法定义的类型称为枚举类型。

// enum 枚举名 {
//   标识符[=整形常数],
//   标识符[=整形常数],
//   ...,
//   标识符[=整形常数],
// };
// flag 1表示 true 0 表示false
// pay_status 0 未支付 1 支付 2 交易成功

enum Flag {
  success=1,
  erorr=0
}
let f:Flag = Flag.success
console.log(f, Flag.erorr)
// 如果默认定义枚举类型不赋值的话,打印的就是 索引值,后续的字段打印的会是上一个的值+1
enum Color{
  red,
  blue=20,
  orange
}
let c:Color = Color.red

console.log(c)//0
console.log(Color.orange) // 21

任意类型(any)

随便一个类型都可以赋值

let a:any = 123
a = "123"
a= false
console.log(a)

任意类型的用法:
通常是获取dom 节点后添加属性和样式,节点不属于其他的类型,所以使用 any 类型来定义是合适的

let oBox:any = document.getElementById("app")
oBox.style.color = 'blue'

null 和undefined 其他数据类型的子类型

//null 和undefined 其他数据类型的子类型,也就是 never 的子类型
var fork:number;
console.log(fork) // 报错

var fork1:undefined|number;
console.log(fork1)//不报错

let num1:null;
console.log(num1)//报错
let num2:null|undefined|number;
console.log(num2)//不报错

在这里插入图片描述

void 类型

TypeScript 中的 void 表示没有任何类型, 一般用于定义方法的时候方法没有返回值

// es5 的定义方法
function run() {
  console.log("run")
}
run()

//方法没有返回值
function run1():void {
  console.log("run")
}
run1()

// 方法返回 number 类型
function run2():number {
  console.log("run")
  return 3
}
run2()
//返回 字符串类型
function run3():string {
  console.log("run")
  return "run"
}
run3()

never 类型

never 类型:是其他类型(包括 null 和 undefined )的子类型,代表从不会出现的值,这意味着声明 never 的变量只能被 never 类型所赋值

var a:undefined;
a = undefined;

var b:null;
b = null
b = 0// 错误写法

var ab:never;
// ab = 123// 错误的写法

ab = (()=>{
  throw new Error("错误")
})()

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

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

相关文章

【Qt 初识 Test】用图形化和代码的方式实现简单的Qt程序

文章目录 1. 通过图形化的方式实现&#x1f34e;2. 通过代码的方式实现 1. 通过图形化的方式实现&#x1f34e; 在界面创建出一个控件&#xff0c;显示 hello world&#xff0c;通过拖拽的方式实现&#xff1b; widget.ui文件如下&#xff1a;&#x1f50d; 生成的 ui_widget.…

【Java16】多态

向上类型转换 对于引用变量&#xff0c;在程序中有两种形态&#xff1a;一种是编译时类型&#xff0c;这种引用变量的类型在声明它的时候就决定了&#xff1b;另一种则是运行时类型&#xff0c;这种变量的类型由实际赋给它的对象决定。 当一个引用变量的编译时类型和运行时类…

mybatis日志记录方案

首先对指定表进行监控 对表进行监控,那么就要使用的是statementInterceptor 拦截器 使用拦截器那么就要写intercepts写拦截条件进行拦截 监控只对与增删改 查询不进行监控 对于字段的监控,是谁修改了字段,那么就进行报警,或者提醒 消息提醒使用钉钉机器人进行消息提醒 P…

AGI 之 【Hugging Face】 的【文本摘要】的 [评估PEGASUS ] / [ 微调PEGASUS ] / [生成对话摘要] 的简单整理

AGI 之 【Hugging Face】 的【文本摘要】的 [评估PEGASUS ] / [ 微调PEGASUS ] / [生成对话摘要] 的简单整理 目录 AGI 之 【Hugging Face】 的【文本摘要】的 [评估PEGASUS ] / [ 微调PEGASUS ] / [生成对话摘要] 的简单整理 一、简单介绍 二、文本摘要 三、在CNN/Daily…

【接口设计】如何设计统一 RESTful 风格的数据接口

如何设计统一 RESTful 风格的数据接口 1.版本控制1.1 通过 URL1.2 通过自定义请求头1.3 通过 Accept 标头 2.过滤信息3.确定 HTTP 的方法4.确定 HTTP 的返回状态5.定义统一返回的格式 近年来&#xff0c;随着移动互联网的发展&#xff0c;各种类型的客户端层出不穷。如果不统一…

347. 前 K 个高频元素(中等)

347. 前 K 个高频元素 1. 题目描述2.详细题解3.代码实现3.1 Python3.2 Java 1. 题目描述 题目中转&#xff1a;347. 前 K 个高频元素 2.详细题解 寻找出现频率前 k k k高的元素&#xff0c;因此需要先统计各个元素出现的次数&#xff0c;该步骤时间复杂度为 O ( n ) O(n) O(n)…

javaweb中的请求与响应--基于postman工具的应用(附带postman的详细安装步骤)

一、前言 后端的第一天感觉难度就上来了&#xff0c;可能是基础太过薄弱了吧。目前看视频已经有点跟不上了&#xff0c;果然15天想要拿下还是太勉强了点。30天还差不多。不知道读者们有没有好好的去学这方面的知识&#xff0c;没有什么是学不会的&#xff0c;关键是坚持。 Po…

【C语言】C语言-学生籍贯信息记录系统(源码+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

C#Winform窗体中嵌入exe文件

1&#xff0c;效果以嵌入Modbus Slave为例&#xff1a; 2&#xff0c;代码&#xff1a; public partial class Form1 : Form{//设置嵌入exe的常量private const int nIndex -16;private const int dwNewLong 0x10000000;Process m_AppProcess;public Form1(){InitializeCompo…

了解AsyncRotationController

概述 基于android 15.0, 以从强制横屏App上滑退回桌面流程来分析 frameworks/base/services/core/java/com/android/server/wm/AsyncRotationController.javaAsyncRotationController 是一种控制器&#xff0c;用于处理设备显示屏旋转时非活动窗口的异步更新。这种控制器通过…

【记录】CSS|Tailwind 的主题定义的颜色的使用方法(--color啥的)

文章目录 【记录】CSS&#xff5c;Tailwind 的主题定义的颜色的使用方法&#xff08;--color 啥的&#xff09;省流版GPT 详细解释版Tailwind CSS 配置文件示例使用自定义颜色定义 CSS 变量总结 附赠个 Tips 【记录】CSS&#xff5c;Tailwind 的主题定义的颜色的使用方法&#…

【Python】已解决:ModuleNotFoundError: No module named ‘sklearn.cross_validation

文章目录 一、问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 &#xff08;机器学习分割数据问题&#xff09;解决“ModuleNotFoundError: No module named ‘sklearn.cross_validation’” 一、问题背景 在机器学习的实践中&#xff0c;数据分割是…

聚鼎装饰画:现在做装饰画能不能相信

在艺术的殿堂中&#xff0c;装饰画以其多变的风格和独特的魅力占据了一席之地。它们或清新淡雅&#xff0c;或浓烈奔放&#xff0c;总能为现代家居带来一丝生气与美感。然而&#xff0c;在这美丽的背后&#xff0c;却隐藏着一个令人困惑的问题&#xff1a;现在做装饰画&#xf…

[EasilyOpenJCL] 使用 Java 调用显卡 计算 和Java调用 CPU 进行计算 的基准测试!

设备环境介绍 easily-openJCL 是一个轻量级的 Java 语言下的 GPU 显卡 计算库&#xff0c;它提供了一套简单易用的 API&#xff0c;让用户能够轻松实现 GPU 计算操作。 通过 Java 调用 GPU 计算的一个库&#xff0c;使用非常简单的API就可以轻松应付 Java 数据类型在 GPU 中的…

程序使用多进程,打包.exe后,程序陷入死循环

最近写了一个深度学习程序&#xff0c;用cxfreezee打包exe后&#xff0c;在本地运行突然出现死循环&#xff0c;明明在pycharm运行一切正常。 排查了问题&#xff0c;怀疑是多进程的原因&#xff0c;解决办法&#xff1a; 在你的主程序前添加一行代码&#xff1a; if __name_…

Typescript 模块小知识-global scope

问题表现 在编写ts代码的时候遇到一个问题, 表现为, 如果在某个ts工程中, 如果多个文件里面没有任何导出export或者是export default, 那么这些文件如果有const或者是let定义相同的声明都会报错如下 无法重新声明块范围变量 a/a.ts 和 index.ts 和 index2.ts 都没有进行expor…

C++系列-Vector(一)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” Vector的介绍及使用 Vector的介绍 当vector构建的参数类型为char类型时&#xff0c;它是和string是极其类似的&#xff0c;但是二者之间也有不同&#xff0c;比如&#xff0c…

人工智能时代,零基础学IT,我首推Python作为你编程入门语言!

人工智能时代为什么将 Python 称为第一语言&#xff1f; 因为python适应了人工智能时代&#xff1a; 人工智能时代对于代码的简便性有很大要求&#xff0c;像传统的C/CPP/Java学习较为复杂&#xff0c;学习路线长&#xff0c;对于很多零基础的人入门困难。python的兼容性&…

24下软考高级-系统架构设计师100条知识点速记!

11月系统架构设计师现在准备真的太早了吗&#xff1f; 不不不~对于0基础和打工人&#xff0c;留给我们备考的时间其实已经不多了&#xff01; 想开始不晓得从哪里开始&#xff1f;这里给大家整理了24下系统架构设计师知识点100条&#xff0c;符合最新版教材和考试大纲&#x…

Python实现动态迷宫生成:自动生成迷宫的动画

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame定义迷宫生成类主循环 完整代码 引言 迷宫生成算法在游戏开发和图形学中有着广泛的应用。它不仅可以用于创建迷宫游戏&#xff0c;还可以用于生成有趣的图案。在这篇博客中&#xff0c;我们将使用Python…