05_TypeScript 中的数据类型

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.redconsole.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.mzph.cn/news/870455.shtml

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

相关文章

linux高级编程(网络)

数据的封包和拆包 封包&#xff1a; 应用层数据&#xff08;例如HTTP请求&#xff09;被传递给传输层。传输层&#xff08;TCP&#xff09;在数据前添加TCP头部&#xff08;包含端口号、序列号等&#xff09;。网络层&#xff08;IP&#xff09;在TCP段前添加IP头部&#xff…

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…

VIM模式之间的切换

命令行界面下&#xff0c;常用的文本编辑器是 VI / VIM(VI增强版)&#xff0c;VI 是 Linux 最通用的文本编辑器&#xff0c;VIM相较于VI&#xff0c;提供了代码高亮等功能&#xff0c;两者用法完全兼容&#xff1b; 1. 进入 VIM 工作界面 vim 文件名 2. 进入编辑模式 三种方…

ENSP中OSPF配置

题目 划分网段&#xff0c;配置ip OSPF配置按照区域划分&#xff0c;这个网段也要按照区域个数划分&#xff0c;如这一题&#xff0c;分成两个区域&#xff0c;所以将192.168.1.0/24划分先为两个网段&#xff0c;然后在具体的划分区域中的网段。 以交换机为中心的三条线属于一…

[Qt] Qt Creator中,新建QT文件时选择界面模版下的各选项

在Qt Creator中&#xff0c;新建文件时选择界面模版下的各选项具有特定的意义&#xff0c;这些选项主要帮助开发者根据项目需求快速生成不同类型的文件。以下是对这些选项的详细解释&#xff1a; 0. Qt Item Model 意义&#xff1a;列表模型是Qt中用于表示和操作数据的强大抽…

Android 使用 Debug.startMethodTracing 分析方法耗时

参考 Generate Trace Logs by Instrumenting Your App 官网提供了 trace 工具来分析方法耗时。 生成 trace 文件 package com.test.luodemo.trace;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; import android.os.Debug; import android.uti…

js vue table单元格合并

实现效果 关键代码 <table classtable table-bordered><thead><tr><th>检测项目</th><th>详细说明</th><th>检测结果</th><th>检测说明</th></tr></thead><tbody><tr ng-repeatrow in…

【car】深入浅出学习机械燃油车知识、结构、原理、维修、保养、改装、编程

汽车的五大总成通常是指发动机、变速器、前后桥、车架和悬挂系统。 发动机&#xff1a;是汽车的动力来源&#xff0c;负责将燃料的化学能转化为机械能&#xff0c;驱动汽车行驶。常见的发动机类型有内燃机&#xff08;如汽油发动机、柴油发动机&#xff09;和电动机&#xff0…

ant design pro多页签功能

效果&#xff1a; 原理&#xff1a; 1、所有需要页签页面&#xff0c;都需要一个共同父组件 2、如何缓存&#xff0c;用的是ant的Tabs组件&#xff0c;在共同父组件中&#xff0c;实际是展示的Tabs组件 3、右键&#xff0c;用的是ant的Dropdown组件&#xff0c;当点击时&…

在linux中查找 / 目录下的以.jar结尾的文件(find / -name *.jar)

文章目录 1、查找 / 目录下的以.jar结尾的文件 1、查找 / 目录下的以.jar结尾的文件 [rootiZuf6332h890vozldoxcprZ ~]# find / -name *.jar /etc/java/java-1.8.0-openjdk/java-1.8.0-openjdk-1.8.0.342.b07-1.el9_0.x86_64/lib/security/policy/limited/US_export_policy.ja…

【学习css2】grid布局-页面footer部分保持在网页底部

中间内容高度不够屏幕高度撑不开的页面时候&#xff0c;页面footer部分都能保持在网页页脚&#xff08;最底部&#xff09;的方法 1、首先上图看显示效果 2、奉上源码 2.1、html部分 <body><header>头部</header><main>主区域</main><foot…

在 Linux 上设置 RAID 阵列的全面指南

引言 在这篇博文中&#xff0c;我们将深入探讨如何在 Linux 上设置 RAID 阵列。本文将涵盖 RAID 的定义、架构、原理、应用场景、常见命令体系&#xff0c;并通过详细的实战模拟展示如何在 Linux 系统上实际操作。希望通过这篇文章&#xff0c;您能深入理解 RAID 技术&#xff…

Flutter实现局部刷新的几种方式

目录 前言 1.局部刷新的重要性 1.概念 2.重要性 2.局部刷新实现的几种方式 1.使用setState方法进行局部刷新 2.使用StatefulWidget和InheritedWidget局部刷新UI 3.ValueNotifier和ValueListenableBuilder 4.StreamBuilder 5.Provider 6.GetX 7.使用GlobalKey 前言 …

现在有什么副业可以让人快速上岸?可以试试这个行业上岸其实不难

人为什么要努力赚銭&#xff1f; 当你想结婚的时候&#xff0c; 你可以慢慢挑&#xff0c;不着急。 当父母年老遭遇大病的时候&#xff0c; 你有机会尽孝。 当孩子需要时&#xff0c;你不会囊中羞涩。 年轻时以为金钱最重要&#xff0c; 如今年纪大了&#xff0c;发现这…

CSS在页面中使用的三种方式:行内样式、内嵌式样式表、链接式样式表

CSS样式如何在页面中使用&#xff0c;包含三种方式&#xff1a;行内样式、内嵌式样式表、链接式样式表。 1、行内样式 行内样式是比较直接的一种样式&#xff0c;直接定义在 HTML 标签之内&#xff0c;并通过 style 属性来实现。这种方式比较容易学习&#xff0c;但是灵活性不…

【秋招突围】2024届秋招笔试-字节跳动笔试题-01-三语言题解(Java/Cpp/Python)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 ✨ 本系列打算持续跟新 秋招笔试题 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f4e7; 清隆这边最…

【Python 基础】控制流 - 2

程序执行 在第1篇的 hello.py 程序中,Python 开始执行程序顶部的指令,然后一条接一条往下执行。“程序执行”(或简称“执行”)这一术语是指当前被执行的指令。如果将源代码打印在纸上,在它执行时用手指指着每一行代码,你可以认为手指就是程序执行。 但是,并非所有的程…

Python基础知识——(004)

文章目录 P16——15. 布尔类型 P17——16. 类型转换函数 P18——17. eval函数 P19——18. 算数运算符 P20——19. 赋值运算符 P16——15. 布尔类型 布尔类型 用来表示 “真” 值或 “假” 值的数据类型在Python中使用标识符 True 或 False 表示布尔类型的值True表示整数1&…

【vue】下载 打印 pdf (问题总结)- 持续更新ing

这里是目录标题 一、pdf1.查看 下载一、pdf 1.查看 下载 样式 Code<template><div><el-table :data="pdfList" style="width: 100%" border ><el-table-columnprop="index"label="序号"width="80"ali…

【UE5.1】NPC人工智能——01 准备NPC角色

效果 步骤 1. 之前我们已经创建了“BP_NPC”&#xff08;见&#xff1a;【UE5.1 角色练习】06-角色发射火球-part2&#xff09; 该蓝图继承于角色类 我们在该蓝图中添加了两个方法和两个变量。方法一个是用于修改角色HP值的&#xff0c;另一个是在收到伤害后执行的逻辑。两个…