当前位置: 首页 > news >正文

极简TypeScript教程--数据类型

TypeScript最大的特点就是有类型检测,格式为

let/const 标识符: 数据类型 = 赋值;

例子:

let msg: string = 'Hello World'

这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型,就会在编译期报错。

变量的类型推导

在开发中,有时候为了方便起见我们并不会在声明每一个变量时都写上对应的数据类型,我们更希望可以通过TypeScript本身的特性帮助我们推断出对应的变量类型

let msg = 'Hello' // 没有显示申明变量类型,由第一次赋值确定类型

上面代码没有显示申明变量类型,但是ts可以推导出msg为字符串类型,再赋值为数字类型就会报错

number类型

ts中整数和浮点数都是number类型,还可以用二进制,16进制等表示方式

let num: number = 100 // 整数
num = 6.6 // 浮点数
console.log(num)
// 其他进制表示
num = 100 // 十进制
num = 0b110 // 二进制
num = 0xf23 // 十六进制
console.log(num)

boolean类型

boolean类型就两个值,true和false

let flag: boolean = true
flag = false

string类型

string类型是字符串类型,可以使用单引号或者双引号表示,同时也支持ES6的模板字符串来拼接变量和字符串

let message: string = 'Hello World' // 字符串可以使用单引号或者双引号表示
const personName = "cloud"
const personAge = 18
const info = `my name is ${personName}, age is ${personAge}` // 支持模板字符串来拼接变量

Array类型

数组的定义非常简单,有两种方式

const names: string[] = ['a', 'b', 'c'] // 普通方式
const names2: Array<string> = ['a', 'b', 'c'] // 泛型方式

以上代码表示数组里面的类型是字符串,如果插入其他类型的元素会报错

函数的参数类型

函数是JavaScript非常重要的组成部分,TypeScript允许我们指定函数的参数和返回值的类型。

参数的类型注解

声明函数时,可以在每个参数后添加类型注解,以声明函数接受的参数类型:

// greet函数只接受字符串类型的参数
function greet(name: string) {console.log('Hello ' + name)
}

函数的返回值类型

我们也可以添加返回值的类型注解,这个注解出现在函数列表的后面:

// 该函数返回值为number类型
function sum(num1: number, num2: number): number {return num1 + num2
}

和变量的类型注解一样,我们通常情况下不需要返回类型注解,因为TypeScript会根据 return 返回值推断函数的返回类型,某些第三方库处于方便理解,会明确指定返回类型,看个人喜好

匿名函数的参数

匿名函数与函数声明会有一些不同,当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时,该函数的参数会自动指定类型;

// names数组是string类型的,在该数组forEach循环时,
// 可以推断出item也是string类型的
const names = ['cloud', 'tifa', 'alice']
names.forEach(item => {console.log(item.toUpperCase())
})

我们并没有指定item的类型,但是item是一个string类型,这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型,这个过程称之为上下文类型(contextual typing),因为函数执行的上下文可以帮助确定参数和返回值的类型

对象类型

如果我们希望限定一个函数接受的参数是一个对象,这个时候要如何限定呢?我们可以使用对象类型;

// 传入的对象有两个属性,x和y,并且类型是number
function printCoordinate(point: { x: number, y: number }) {console.log(point.x, point.y)
}printCoordinate({x: 10, y: 30})

在对象我们可以添加属性,并且告知TypeScript该属性需要是什么类型,每个属性的类型部分是可选的,如果不指定,那么就是any类型

可选类型

对象类型也可以指定哪些属性是可选的,可以在属性的后面添加一个?:

// 传入的对象有两个属性,x和y,并且类型是number,z不是必传
function printCoordinate(point: { x: number, y: number, z?: number }) {console.log(point.x, point.y)
}

any类型

在某些情况下,我们确实无法确定一个变量的类型,并且可能它会发生一些变化,这个时候我们可以使用any类型,我们给一个any类型的变量赋值任何的值,比如数字、字符串的值;

let a: any = 'cloud'
a = 123
a = true
const aArray: any[] = ['a', 1, false]

unknown类型

unknown是TypeScript中比较特殊的一种类型,它用于描述类型不确定的变量。和any类型有点类似,unknown可以赋任何类型的值,与any不同的是,any任何操作都是合法的,但是unknown类型的值上做任何事情都是不合法的。

let val: unknown
// 使用val.length属性报错,因为编译器不知道val的类型,不合法
console.log(val.length) 
// 操作unknown类型前需要类型判断,确定是字符串类型才能使用length属性
if(typeof val === 'string') {console.log(val.length)
}

void类型

void通常用来指定一个函数是没有返回值的,那么它的返回值就是void类型,这个函数我们没有写任何类型,那么它默认返回值的类型就是void的,我们也可以显示的来指定返回值是void:

function sum(num1: number, num2: number): void {console.log(num1 + num2)
}

tuple类型

tuple(元组类型)跟数组有点类型,都可以通过下标的方式访问元素,与数组不同的地方是,数组中通常建议存放相同类型的元素,不同类型的元素是不推荐放在数组中。

// 使用元组保存个人信息,第一个是姓名,第二个是年龄,第三个是体重
const info: [string, number, number] = ['cloud', 18, 60]
// 使用下标访问
console.log(info[0])

相关文章:

极简TypeScript教程--数据类型

TypeScript最大的特点就是有类型检测&#xff0c;格式为let/const 标识符: 数据类型 赋值;例子:let msg: string Hello World这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型&#xff0c;就会在编译期报错。变量的类型推导在开发中&#xff0c;有时候为了方便起见…...

JAVA开发测试(jmeter如何测试性能与估算)

对C的业务网站或应用&#xff0c;进行性能测试来评估使用服务器情况是必不可少的一项工作。 一、测试工具&#xff1a; Apache JMeter 可以用于对服务器、网络或对象模拟巨大的负载&#xff0c;来自不同压力类别下测试它们的强度和分析整体性能&#xff0c;是Apache组织开发的…...

【新解法】华为OD机试 - 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供

华为 OD 清单查看地址:blog.csdn.net/hihell/category_12199275.html 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供 题目 已知连续正整数数列{K}=K1,K2,K3… Ki的各个数相加之和为S, i = N (0 < S < 100000, 0 < N < 100000), 求此数列K。 输入 输…...

Python3 File(文件) 方法

Python3 File(文件) 方法 open() 方法 Python open() 方法用于打开一个文件&#xff0c;并返回文件对象。 在对文件进行处理过程都需要使用到这个函数&#xff0c;如果该文件无法被打开&#xff0c;会抛出 OSError。 注意&#xff1a;使用 open() 方法一定要保证关闭文件对…...

APP渗透抓包

APP渗透抓包1.APP渗透测试原理2.安装安卓模拟器抓包2.1.安装模拟器2.2.设置代理下载证书2.2.1.burp suite设置代理2.2.2.浏览器设置代理2.2.3.下载证书2.3.模拟器安装证书2.3.1.移动证书2.3.2.证书设置2.4.设置代理2.4.1.设置burp suite代理2.4.2.夜神模拟器代理2.5.抓包测试2.…...

力扣(LeetCode)414. 第三大的数(2023.02.16)

给你一个非空数组&#xff0c;返回此数组中 第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输入&#xff1a;[3, 2, 1] 输出&#xff1a;1 解释&#xff1a;第三大的数是 1 。 示例 2&#xff1a; 输入&#xff1a;[1, 2] 输出&#xff1a;2…...

Spring底层

一、什么是Spring&#xff1f;谈谈你对IOC和AOP的理解。Spring&#xff1a; 是一个企业级java应用框架&#xff0c;他的作用主要是 简化软件的开发以及配置过程&#xff0c;简化项目部署环境。Spring的有点&#xff1a;1、Spring低侵入设计&#xff0c;对业务代码的污染非常低。…...

Cache-Control 常见字段

Cache-Control 常见字段 参考&#xff1a;https://blog.csdn.net/qq_41996454/article/details/108644436 Cache-Control 可以在请求头或者响应头中设置&#xff0c;并且可以组合使用多种指令 no-cache 和 no-store 用作控制缓存&#xff0c;被服务器通过响应头 Cache-Contro…...

Flink Checkpoint 中的通用增量Checkpoint

文章目录知识点状态Flink容错恢复周期性的 Checkpoint错误检测 Failure Detected重新调度 Re-scheduling状态恢复 State Recovery通用增量Checkpoint知识点 状态 算子需要记录之前数据处理的中间结果&#xff0c;把中间结果暂时缓存在算子的内部&#xff0c;这就是算子的状态…...

金三银四必看的软件测试面试题宝典,背完offer随便拿

怎么来设计测试方案根据测试需求&#xff08;包括功能需求和非功能性需求&#xff09;&#xff0c;识别测试要点&#xff0c;识别测试环境要求&#xff0c;安排测试轮次&#xff0c;根据项目计划和开发计划做整体的测试安排。 被测试的特性&#xff1a;通过对需求规格说明书进行…...

企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…...

扬帆优配“数字经济+实体经济”融合发展,行业增长空间大!

组织以为&#xff0c;数字经济已经逐步成为工业商场和资本商场的共同主题。 2月16日&#xff0c;国家发改委在《求是》杂志发表文章《努力推进经济完成质的有效提升和量的合理增加》。文章指出要加速开展数字经济&#xff0c;加速实施“东数西算”等重大工程&#xff0c;推进数…...

分享82个HTML电脑主机模板,总有一款适合您

分享82个HTML电脑主机模板&#xff0c;总有一款适合您 82个HTML电脑主机模板下载链接&#xff1a;https://pan.baidu.com/s/13DGOCgvbxSksMPwJzi2z0g?pwdl0mi 提取码&#xff1a;l0mi Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 云虚拟主机运营商网站模板…...

.htaccess语法教程

RewriteEngine On RewriteCond %{HTTP_HOST} ^(www\.)?xxx\.com$ RewriteCond %{REQUEST_URI} !^/blog/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /blog/$1# 没有输入文件名的默认到到首页 RewriteCond %{HTTP_HOST} ^(w…...

C++ ——多态 下 (图解多态原理、虚函数的再认知)

目录 一、抽象类 1&#xff09;抽象类定义 2&#xff09;抽象类的继承 3&#xff09;抽象类实现多态 4&#xff09;抽象类的好处 二、多态的实现原理 1&#xff09;虚函数的存储方式 2&#xff09;子类中虚函数的存储方式 ① 子类将基类中的虚表原封不动的拷贝到自己的…...

cocos creater 3.x 构建QQ小游戏

一、目前 cocos creater 不支持直接构建QQ小游戏&#xff0c;需要构建成微信小游戏&#xff0c;然后修改成QQ小游戏 二、构建QQ小游戏不能勾选 分离引擎 的选项&#xff0c;勾选分离引擎的选项&#xff0c;需要安装cocos微信小游戏引擎插件&#xff0c;这个插件似乎目前只支持微…...

ArcGIS笔记3_如何编辑、修改和导出散点数据

本文目录前言Step 1 在ArcGIS中添加并显示坐标点Step 2 将坐标数据保存成shp文件Step 3 编辑或修改坐标数据Step 4 导出修改后的数据&#xff1a;法一&#xff1a;通过转换工具导出Step 5 导出修改后的数据&#xff1a;法二&#xff1a;通过dBASE表导出前言 本博文更多针对Arc…...

Computer Graphics From Scratch - Chapter 8

系列文章目录 简介&#xff1a;Computer Graphics From Scratch-《从零开始的计算机图形学》简介 第一章: Computer Graphics From Scratch - Chapter 1 介绍性概念 第二章&#xff1a;Computer Graphics From Scratch - Chapter 2 基本光线追踪 第三章&#xff1a;Computer Gr…...

金三银四”不香了?

“金三银四”不香了&#xff1f; “金三银四”这个词&#xff0c;放在三年前&#xff0c;勾勒的是无数踌躇满志的年轻人涌向职场&#xff0c;大中小企业血液更新与流动的鲜活画面。 尤其是互联网行业&#xff0c;这个在过去20多年里极大改变文化交流方式与商业形态的领域&…...

个人开源PCB开发板列表汇总

个人开源PCB开发板列表汇总✨首先感谢立创EDA的免费打样和立创一起开源的广大网页。 &#x1f530;STC单片机为主控开源PCB开发板列表 &#x1f4cc;STC15F2K60S2开发板&#xff1a;https://oshwhub.com/perseverance51/stc15f2k60s2-ji-tong-ban &#x1f4cc;STC15W408AS系…...

2023美国大学生数学建模竞赛(美赛)思路代码

2023美国大学生数学建模竞赛&#xff08;美赛&#xff09;思路&代码报名时间节点比赛说明问题A&#xff08;数据分析题&#xff09;&#xff1a;收干旱影响的植物群落&#xff08;MCM&#xff09;第一问第二问问题B&#xff08;仿真建模题&#xff09;&#xff1a;重塑马赛…...

makefile简易教程

makefile简易教程 一、学习目标 达到多文件快速编译的需求&#xff0c;相关符号的意思&#xff0c;以及其它注意事项。 二、快速入门 2.1 基本概念 Makefile 是一个在Unix和Linux操作系统上使用的构建工具&#xff0c;用于自动化编译和构建源代码。 2.2 用处 通过Makefi…...

快速入门nginx

目录 1.nginx前言 2.什么是nginx 3.Nginx作用&#xff1f; 1.正向代理 2.反向代理 3.轮询 4.加权轮询 4.Nginx的安装 1.windows下安装 2.linux下安装 5.Nginx常用命令 1.nginx前言 我们公司项目刚刚上线的时候&#xff0c;并发量小&#xff0c;用户使用的少&#…...

甘特图:项目管理工具,轻松简化工作流程

项目规模越大&#xff0c;管理就越复杂&#xff0c;有时候甚至一个项目经理需要管理多个项目&#xff0c;当多个项目、多条任务同时进行&#xff0c;项目所涉及的范围广&#xff0c;内容越来越复杂&#xff0c;使得项目越难以把控&#xff0c;好的管理工具&#xff0c;可以提升…...

刷题专练之翻转题练习

文章目录一、 编写函数实现字符串翻转二、轮转数组总结一、 编写函数实现字符串翻转 描述 编写一个函数&#xff0c;实现字符串的翻转 输入描述&#xff1a; 输入一个字符串 输出描述&#xff1a; 输出翻转后的字符串 写法一&#xff1a; 这种方法是定义begin和end&#xff0…...

【Java】死锁

一、什么是死锁 死锁指多个线程在执行过程中&#xff0c;因争夺资源造成的一种相互等待的僵局。 进程死锁是指两个或两个以上的进程在执行过程中&#xff0c;由于竞争资源或者由于彼此通信而造成的一种阻塞的现象&#xff0c;若无外力作用&#xff0c;它们都将无法推进下去。…...

DS图—图的最短路径(无框架)迪杰斯特拉算法

目录 题目描述 AC代码 题目描述 给出一个图的邻接矩阵&#xff0c;输入顶点v&#xff0c;用迪杰斯特拉算法求顶点v到其它顶点的最短路径。 输入 第一行输入t&#xff0c;表示有t个测试实例 第二行输入顶点数n和n个顶点信息 第三行起&#xff0c;每行输入邻接矩阵的一行&…...

【笔记】数据异常检测与修复总结

文章目录一、异常种类1. 对于移动对象的数据异常2. 对于时序数据的异常检测二、异常数据清洗流程三、数据预处理四、异常检测算法五、异常修复算法六、漂移数据清洗一、异常种类 不同的研究对象&#xff0c;有着不同的异常分类方式 1. 对于移动对象的数据异常 异常数据信息&…...

算法笔记(七)—— 图的相关知识及算法

图的存储方式 1. 邻接表&#xff08;记录关于某点的直接相邻点&#xff09; 2. 邻接矩阵&#xff08;一定是正方形的矩阵&#xff0c;对点进行编号&#xff0c;点到点的权值由距震中的值表示&#xff0c;无直接相连记为正无穷&#xff09; 图的模板 unordered_map<int,No…...

ssh配置互信时错误解决方法

之前项目中遇到有关配置ssh互信免密登录问题&#xff0c;为避免以后踩坑&#xff0c;现记录一下避坑指南。 1、提示如下错误&#xff1a; Permission denied (publickey,gssapi-keyex,gssapi-with-mic). 问题分析&#xff1a;可能是ssh配置问题。 查看日志/var/log/secure&…...

wordpress免签约接口/国外搜索引擎大全百鸣

1、在Azure portal上配置mysql的服务器参数 按图所示配置即可 Azure官方文档直链 2、查看binlog日志...

如何自己做个简单网站/长沙今日头条新闻

K-means也是聚类算法中最简单的一种了&#xff0c;但是里面包含的思想却是不一般。最早我使用并实现这个算法是在学习韩爷爷那本数据挖掘的书中&#xff0c;那本书比较注重应用。看了Andrew Ng的这个讲义后才有些明白K-means后面包含的EM思想。 聚类属于无监督学习&#xff0c;…...

ksweb用wordpress/网站综合排名信息查询

W3C验证器不喜欢非void元素上的自闭标签(以“ /> ”结尾的标签)。 (无效元素是可能永远不包含任何内容的元素。)它们在HTML5中仍然有效吗&#xff1f;可接受的 void元素的一些示例&#xff1a;被拒绝的非空元素的一些示例&#xff1a;注意&#xff1a; W3C验证器实际上接受无…...

城阳做网站/怎么自己做一个网站

1. 从sun主页下载JDK for Linux版本。 我是从网址http://www.onlinedown.net/soft/172520.htm下载的jdk-6u13-linux-i586.bin 2. 用root用户登录ubuntu&#xff0c;或是在普通用户下用su命令切换用户。切换到所需的安装目录。类型&#xff1a;cd <目录路径名> 例如&am…...

做调查问卷赚钱的网站/网络营销产品策略

亲测可用&#xff0c;若有疑问请私信 错误信息&#xff1a; The nginx plugin is not working; there may be problems with your existing configuration. The error was: NoInstallationError() Certbot默认使用nginx的路径&#xff0c;需求如下配置 ln -s /usr/local/ngi…...

湿地保护宣教网站建设意义/网络宣传怎么做

我是Android和AndroidStudio(AS)的新手&#xff0c;我已经花了好几个小时尝试使用AS“克隆”一个项目。非常感谢上面给出的现有答案让我走上正确的道路。对于任何一个新手&#xff0c;像我一样&#xff0c;以下详细的分步说明应该证明是有用的&#xff1a;>使用Windows资源管…...