TypeScript-基础类型

news2024/11/28 16:06:55

目录

介绍

布尔值

数字

字符串

数组

元组 Tuple

枚举

Unknown

Any

Void

Null 和 Undefined

Never

Object

类型断言

关于 Number, String, Boolean, Symbol 和 Object


介绍

在TypeScript中,我们能够处理一些数据单元,例如:数字,字符串,结构体,布尔值等,并且支持与JavaScript几乎相同的数据类型。此外还提供了使用的枚举类型方便安我们使用,在ECMA-262中,枚举类型也是作为其内部的标准类型,作为关键字保留了。

布尔值

最基本的数据类型就是简单的true/false值,在JavaScript和TypeScript里叫做boolean(其它语言中也一样)。

let isDone: boolean = false;

数字

和JavaScript一样,TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量,TypeScript还支持ECMAScript 2015中引入的二进制八进制字面量。

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

字符串

JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样,我们使用 string表示文本数据类型。 和JavaScript一样,可以使用双引号( ")或单引号')表示字符串。

let name = "王五";
name = '赵六'

你还可以使用模版字符串,它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围( `),并且以${ expr }这种形式嵌入表达式,在JavaScript中也叫插值表达式。

let name: string = `张三`;
let age: number = 18;
let result = `我的名字是${name},年龄是${age}
明年我就${age+1}岁了`
// 我的名字是张三,年龄是18
// 明年我就19岁了
用"/n"来换行和上面效果一致。
let name: string = `张三`;
let age: number = 18;
let result = `我的名字是${name},年龄是${age}\n明年我就${age+1}岁了`

数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组:

let list: number[] = [1, 2, 3];

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

let list: Array<number> = [1, 2, 3];

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 stringnumber类型的元组。

// 声明元组类型
let x: [string, number];
// 初始化
x = ['hello', 10]; // 编译通过
// 与定义的元组数据类型不匹配
x = [10, 'hello']; // 编译报错 不能将类型“number”分配给类型“string”。ts(2322)

当访问一个已知索引的元素,会得到正确的类型:

console.log(x[0].substr(1)); // 可以通过 
console.log(x[1].substr(1)); // 报错 类型“number”上不存在属性“substr”。ts(2339)

注:在最新TypeScript 中,substr() 方法,被标记为已弃用。

当访问一个越界的元素会报错。

x[3] = 'world'; 
// 报错,不能将类型“"world"”分配给类型“undefined”。ts(2322)
console.log(x[5].toString()); 
// 报错,长度为 "2" 的元组类型 "[string, number]" 在索引 "5" 处没有元素。ts(2493)
x[6] = true; 
// 报错,不能将类型“true”分配给类型“undefined”。ts(2322)

枚举

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。

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

默认情况下,从0开始为元素编号。 你也可以手动的指定成员的数值。 例如,我们将上面的例子改成从 1开始编号:

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

或者,全部都采用手动自定义赋值:

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

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如,我们知道数值为2,但是不确定它映射到Color里的哪个名字,我们可以查找相应的名字:

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

Unknown

当我们在写应用的时候可能会需要描述一个我们还不知道其类型的变量。这些值可以来自动态内容,例如从用户获得,或者我们想在我们的 API 中接收所有可能类型的值。在这些情况下,我们想要让编译器以及未来的用户知道这个变量可以是任意类型。这个时候我们会对它使用 unknown 类型。

let notSure: unknown = 4;
notSure = "maybe a string instead";

// 可以编译的,定义成布尔类型
notSure = false;

unknown 类型与 any 类型不同的是,unknown 类型不存在任何方法

Any

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量:

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 可以定义成布尔类型的

在对现有代码进行改写的时候,any类型是十分有用的,它允许你在编译时可选择地包含或移除类型检查。 你可能认为 Object有相似的作用,就像它在其它语言中那样。 但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法:

let notSure: any = 4;
notSure.ifItExists(); // 编译可以通过,ifItExists 在运行时可能存在。
notSure.toFixed(); // toFixed 方法存在(在编译时不进行检查)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

当你只知道一部分数据的类型时,any类型也是有用的。 比如,你有一个数组,它包含了不同的类型的数据:

let list: any[] = [1, true, "free"];

list[1] = 100;

Void

某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void

function warnUser(): void {
    console.log("This is my warning message");
}

声明一个void类型的变量没有什么大用,因为你只能为它赋予undefinednull

let unusable: void = undefined;

Null 和 Undefined

TypeScript里,undefinednull两者各自有自己的类型分别叫做undefinednull。 和 void相似,它们的本身的类型用处不是很大:

let u: undefined = undefined;
let n: null = null;

然而,当你指定了--strictNullChecks标记,nullundefined只能赋值给void和它们各自的类型(有一个例外是undefined还可以赋值给void类型)。这能避免 很多常见的问题。 也许在某处你想传入一个 stringnullundefined,你可以使用联合类型string | null | undefined。 再次说明,稍后我们会介绍联合类型。

注意:我们鼓励尽可能地使用--strictNullChecks,但在本手册里我们假设这个标记是关闭的。

Never

never 类型表示的是那些永不存在的值的类型。 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never

下面是一些返回never类型的函数:

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

Object

object表示非原始类型,也就是除numberstringbooleansymbolnullundefined之外的类型。

使用object类型,就可以更好的表示像Object.create这样的API。例如:

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

类型断言

有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设你,程序员,已经进行了必须的检查。

类型断言有两种形式。 其一是“尖括号”语法:

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

另一个为as语法:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有 as语法断言是被允许的

关于 Number, String, Boolean, Symbol 和 Object

我们很容易会认为 Number、 String、 BooleanSymbol 以及 Object 这些类型和我们以上推荐的小写版本的类型是一样的。但这些类型不属于语言的基本类型,并且几乎在任何时候都不应该被用作一个类型:

所以官方是不建议这么写的。

// 之前会编译报错 @errors: 2339,采用最新的ts,没有提示了。
function reverse(s: String): String {
  return s.split("").reverse().join("");
}

reverse("hello world");

但是官方建议我们应该使用 numberstringbooleanobject 和 symbol

function reverse(s: string): string {
  return s.split("").reverse().join("");
}

reverse("hello world");

总结,对应的代码都手动实践了一遍,TypeScript 版本 不同版本支持可能会有不同,最好还是实际验证下,理解也会更深刻些,知道不同版本之前有哪些差异。​​​​​​​

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

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

相关文章

【JavaWeb】-- HTML、CSS、JavaScript

文章目录 HTML1.基本介绍2.快速入门3.基础标签3.1 标题标签3.2 hr标签3.3 字体标签3.4 加粗、斜体、下划线标签3.5 居中标签 4.图片、音频、视频标签5.超链接标签6.列表标签7.表格标签8.布局标签9.表单标签9.1 表单标签概述9.2 form标签属性9.3 代码演示 10.表单项标签 CSS1.概…

【Prompting】ChatGPT Prompt Engineering开发指南(5)

ChatGPT Prompt Engineering开发指南&#xff1a;Transforming 翻译通用翻译器音调转换格式转换拼写检查/语法检查内容来源 在本教程中&#xff0c;我们将探讨如何使用大型语言模型来进行文本转换任务&#xff0c;例如语言翻译&#xff0c;拼写和语法检查&#xff0c;音调调整和…

怎么画邻接表?不用邻接矩阵也能画?

目录 一、有向图的邻接表 二、无向图的邻接表 一、有向图的邻接表 最简单粗暴的方式就是把某个顶点发出的箭头指向的顶点全作为单个结点连接到此顶点的后面。结点数等于边数。 按正常思路的话&#xff0c;是一种递归遍历。 1.选一个点作为出发点。比如选一个v0。 2.从第一出…

Kali-linux控制Meterpreter

Meterpreter是Metasploit框架中的一个杀手锏&#xff0c;通常作为利用漏洞后的攻击载荷所使用&#xff0c;攻击载荷在触发漏洞后能够返回给用户一个控制通道。当使用Armitage、MSFCLI或MSFCONSOLE获取到目标系统上的一个Meterpreter连接时&#xff0c;用户必须使用Meterpreter传…

【C++】leetcode力扣 剑指 Offer 题解

文章预览&#xff1a; 剑指 Offer 03. 数组中重复的数字剑指 Offer 04. 二维数组中的查找剑指 Offer 05. 替换空格剑指 Offer 06. 从尾到头打印链表剑指 Offer 07. 重建二叉树剑指 Offer 09. 用两个栈实现队列剑指 Offer 10- I. 斐波那契数列剑指 Offer 10- II. 青蛙跳台阶问题…

大模型训练数据多样性的重要性

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

图形编程周刊(2023.001)

图形编程周刊(2023.001) key: webgpu webgl 3d webgis three.js cesium.js 这里是力博荣(Libaro)三维可视化带来的 图形编程周刊, 争取每周五发布。 更新源位置: https://gitee.com/lianming/graphics-programming-weekly/blob/master/2023001/2023001.md 发现的代码 1、th…

少儿编程 中国电子学会图形化编程等级考试Scratch编程三级真题解析(判断题)2023年3月

2023年3月scratch编程等级考试三级真题 判断题(共10题,每题2分,共20分) 26、单击如图所示积木,将生成一个介于1.5和2.5之间的一位小数 答案:错 考点分析:考查随机数积木的使用,随机生成小数的时候,生成的小数位不止一位,所以错误 27、为新建变量命名时,不区分大小…

红黑树封装map和set

文章目录 红黑树封装map和set1. 改良红黑树1.1 改良后的节点1.2 改良后的类分别添加仿函数代码 3. 封装map和set3.1 set3.2 map 3. 迭代器3.1 begin 和 end3.2 operator()和operator--()3.3 const迭代器set的迭代器map的迭代器 4. map的operator[]的重载5. 完整代码实现5.1 RBT…

美团二面:聊聊ConcurrentHashMap的存储流程

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小黄&#xff0c;独角兽企业的Java开发工程师&#xff0c;CSDN博客专家&#xff0c;阿里云专家博主&#x1f4d5;系列专栏&#xff1a;Java设计模式、Spring源码系列、Netty源码系列、Kafka源码系列、JUC源码…

手把手教你彻底卸载MySQL

❤写在前面 ❤博客主页&#xff1a;努力的小鳴人 ❤系列专栏&#xff1a;MySQL8.0基础学习 ❤欢迎小伙伴们&#xff0c;点赞&#x1f44d;关注&#x1f50e;收藏&#x1f354;一起学习&#xff01; ❤如有错误的地方&#xff0c;还请小伙伴们指正&#xff01;&#x1f339; ​ …

抖音SEO矩阵系统源码开发搭建(一)

抖音SEI矩阵系统源码开发&#xff0c;需要遵循一下步骤&#xff1a; 1. 确定需求和功能&#xff1a;明确系统的主要目标和需要实现的功能&#xff0c;包括关键词研究、短视频制作、外链建设、数据分析、账号设置优化等方面。 2. 设计系统架构&#xff1a;根据需求和功能确定系…

Golang每日一练(leetDay0068) 二叉树右视图、岛屿数量

目录 199. 二叉树的右视图 Binarytree Right Side View &#x1f31f;&#x1f31f; 200. 岛屿数量 Number-of-islands &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日…

【C++】图解类和对象(中)

类和对象&#xff08;中&#xff09; 文章目录 类和对象&#xff08;中&#xff09;一、类的6个默认成员函数二、构造函数1.定义2.特性3.对特性的理解及几点注意事项 二、析构函数总结 一、类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的…

只需6步,就能让你的 React +Tailwind.css站点实现暗黑功能

欢迎回来&#xff0c;开始一次新的编码之旅吧&#xff01;今天&#xff0c;我们将进入神秘的世界&#xff0c;探索如何在你的React.js网站中使用Tailwind.css实现暗黑模式。Tailwind.css 是你编码工具中的强大助手&#xff0c;结合React.js使用&#xff0c;你可以创造出令人惊叹…

Swoft中使用Consul微服务

目录 Swoft中接入Consul Swoft服务限流 Swoft服务熔断和降级 在之前我写的一篇内容&#xff1a;PHP中接入consul&#xff0c;实现微服务的注册发现和配置中心_浮尘笔记的博客-CSDN博客 中&#xff0c;使用ThinkPHP6.0框架接入了微服务Consul&#xff0c;并且留下了一个彩蛋 …

【K8s】Helm

文章目录 一、Helm介绍1、背景2、介绍3、核心概念4、chart的基本结构5、helm官网 二、部署Helm1、安装helm客户端2、安装Tiller 三、常用指令1、仓库相关 helm repo2、chart相关 四、入门案例1、构建第一个chart2、将chart包发布到Repository3、在 Kubernetes 中部署应用4、升级…

用JS实现虚拟列表(IT枫斗者)

用JS实现虚拟列表 简介 当一个列表需要渲染大量数据的时候是非常耗时的&#xff0c;而且在列表滚动的过程中会出现卡顿的现象。即使用上懒加载解决了列表初始化时渲染过慢的问题&#xff0c;但是每次拉取下一页数据的时候都会造成列表的重新渲染。随着拉取的数据越来越多&…

使用火焰图进行性能分析(一)

为什么会用到火焰图&#xff1f;火焰图能干那些事儿&#xff1f; 分析函数执行的频度&#xff1b;分析哪些函数经常阻塞&#xff1b;分析哪些函数频繁操作内存&#xff1b; 火焰图的主要特点&#xff1a; 每一列代表一个调用栈&#xff0c;每个格子代表一个函数&#xff1b;…

计算机图形学-GAMES101-4

一、变换矩阵中的旋转部分 当我们旋转Q角度和旋转-Q角度时&#xff0c;变换矩阵中旋转的部分如下图所示&#xff1a; 旋转Q和旋转-Q的变换矩阵应该互为逆矩阵&#xff0c;而我们可以看到它们互为对方矩阵的转置。其实Rq是一个正交矩阵&#xff0c;因此其逆矩阵就是它自己的转…