TS 学习笔录(持续更新中)

2024-01-19 15:20
文章标签 学习 更新 持续 ts 笔录

本文主要是介绍TS 学习笔录(持续更新中),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

TS学习笔录

    • 1、TS 数据类型有哪些?
    • 2、元组是什么?
    • 3、union(联合类型)& Literal(字面量类型)?
    • 4、any 和 unknown 的区别?
    • 5、Object 对象类型?
    • 6、type 、interface 、 class 之间的区别?

1、TS 数据类型有哪些?

  • 基本类型:
    • number
    • boolean
    • string
    • undefined
    • null
    • symbol
    • bigInt
    • array
    • object
    • tuple(元组)
    • enum(枚举)
    • any
    • void
    • never
    • unknown
  • 高级类型:
    • union 组合类型
    • Nullable 可空类型
    • Literal 预定义类型

2、元组是什么?

元组是一种表示具有固定数量类型的有序元素集合的数据类型。一个元组可以包含不同类型的数据,例如,一个元组可以包含字符串、数字和布尔值。

元组在 TypeScript 中的用途包括:

声明函数返回值的类型,特别是当函数返回多个值时,可以使用元组类型来指定返回值的类型。

提供一种更具体的数据类型来确保数据的类型安全性。使用元组类型可以确保数组中的每个元素都是正确的类型。

在处理异构数据时(即包含不同类型的数据),可以使用元组类型。

例如:

let person: [string, number] = ["John", 25];
console.log(person[0]); // "John"
console.log(person[1]); // 25

3、union(联合类型)& Literal(字面量类型)?

联合(Union) 类型

联合类型就是一个变量的值可以是多个类型。比如:

let union: number | string;
union = 10;
union = "hello";

变量 union 是一个联合类型,多个类型之间使用竖线 | 分割,变量既可以是 number 类型,也可以是 string 类型。

再看一个例子,定义一个函数可以求两个数字的和,也可以做两个字符串的拼接:

function merge(a: number | string, b: number | string) {// 需要对参数类型做一个判断if (typeof a === "string" || typeof b === "string") {return a.toString() + b.toString();} else {return a + b;}
}merge(10, 20);
merge("hello", "world");

不仅类型,确定的值也可以联合使用:

let union: 0 | 1 | 2;

此时变量 union 不仅确定了属于 number 类型,值的取值范围也确定了。

字面量(Literal)类型

字面量类型,就是直接写出一个值,来赋值给变量。具体来讲,主要分为数字字面量类型,字符串字面量类型,真值字面量类型,对象字面量类型,枚举字面量类型等。比如:

const num = 3;
const str = "kw";
const flag = true;

这三个变量的类型分别为 2、kw、true ,类型等于值,就是字面量类型。

上面联合类型中,将值作为联合类型使用,其实就是字面量类型的联合类型。

字面量类型非常像是枚举类型,等学到的时候可以做一个比较。

类型断言

类型断言,也叫类型适配,主要用于类型的适配工作,将变量从一个类型断言为另一个类型。

先看一段代码:

let message: any = "hello";
message.toUpperCase();

变量 message 声明为了 any 类型,但是其值是一个字符串类型,想要调用字符串类型的 toUpperCase 方法,但是编辑器并没有给出类型提示。

这是因为编辑器将 message 识别为 any 类型,而 any 类型并没有 toUpperCase 方法。

此时就可以使用类型断言了:

let message: any = "hello";// 使用 as 关键字,将变量从 any 类型断言为 string 类型
// 编辑器就会将 message 识别为 string 类型,从而给出类型提示
(message as string).toUpperCase();

除了使用 as 关键字,还可以在变量前通过一对尖括号 <> 写明要断言的类型:

(<string>message).toUpperCase();

需要注意的是,类型断言并不是类型转换,变量的类型并不会发生转换,依然是原来的类型,只不过在断言的那一刻,能让 TS 编译器认为它是某个指定类型。

4、any 和 unknown 的区别?

  • any 类型: 表示任意类型,即可以赋值给任何类型的变量。使用 any 类型后,该变量可以进行任何操作而不会触发类型检查,相当于关闭了类型检查器的所有限制。
  • unknown 类型: 表示未知类型,即不确定具体类型的变量。与 any 不同,使用 unknown 类型后,该变量在没有进行类型检查或类型断言之前,不能被赋值给其他变量或进行任何操作。

5、Object 对象类型?

和 JS 声明形式一致,只是 JS 是 key to value 的形式,TS 是 key to type 的形式。

6、type 、interface 、 class 之间的区别?

1、type

type 是 TypeScript 中用于定义类型别名、联合类型、交叉类型等复杂类型的声明方式。它在编译后的 JavaScript 代码中被移除,因为它们仅在编译阶段用于类型检查。换句话说,type 不需要运行时信息。

  • 类型别名(Type Aliases): 类型别名是给一个类型起一个新名字。例如:
type StringOrNumber = string | number;
  • 联合类型(Union Types): 联合类型表示一个值可以是多个类型中的一种。例如:
type StringOrNumber = string | number;
  • 交叉类型(Intersection Types): 交叉类型表示一个值必须满足多个类型的要求。例如:
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age;
  • 不需要运行时信息:

在 TypeScript 中,有些类型信息仅在编译时起作用,而在运行时则不存在。例如,typeinterface 定义的类型信息在编译后的 JavaScript 代码中被移除,因为它们仅在编译阶段用于类型检查。相比之下,class 定义的类型信息会保留在编译后的代码中,因为它们包含实际的属性和方法实现,这些信息在运行时是必需的。

2、interface

interface 主要用于定义对象的类型和形状。它支持继承和实现,因此非常适合创建复杂的对象类型。和 type 一样,interface 定义的类型信息在编译后的代码中被移除。

interface 可以通过关键字 extends 实现接口继承,通过关键字 implements 实现接口实现。这让我们可以创建具有多层次的类型结构。

例如:

interface Animal {name: string;speak(): void;
}interface Dog extends Animal {breed: string;
}class Labrador implements Dog {name: string;breed: string;constructor(name: string, breed: string) {this.name = name;this.breed = breed;}speak() {console.log(`${this.name} says woof!`);}
}

3、class

class 是一种定义类型和实现的方式。它既包含类型信息,也包含实际的属性和方法实现。与 typeinterface 不同,class 定义的类型信息会保留在编译后的代码中,因为它们在运行时是必需的。

class 可以通过关键字 extends 实现类继承,还可以通过关键字 implements 实现接口实现。这使得 class 成为创建具有多层次结构和行为的对象的理想选择。

class User {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}sayHello(): void {console.log(`Hello, my name is ${this.name}`);}
}class Students extends User {role: string;constructor(name: string, age: number, role: string) {super(name, age);this.role = role;}
}

总结:

在 TypeScript 中,typeinterfaceclass 分别具有自己的用途和特点。

  • type 适用于定义类型别名、联合类型、交叉类型等,并且不需要运行时信息。
  • interface 主要用于定义对象的类型和形状,支持继承和实现。
  • class 既包含类型信息,也包含实际的属性和方法实现。在实际开发中,我们应根据需求选择合适的类型声明方式。

虽然 typeinterface 在很多场景下可以互换使用,但它们在某些特定场景下有着各自的优势。type 更适用于组合不同类型,如联合类型、交叉类型等,而 interface 更适用于定义对象的形状,特别是在面向对象编程中。class 则提供了完整的类型定义和实现,可以在运行时进行实例化和操作。

在实践中,我们应该根据实际需求和场景选择合适的类型声明方式。例如,在定义一个复杂的对象类型时,可以使用 interface;在组合不同类型时,可以使用 type;在创建具有行为的对象时,可以使用 class

这篇关于TS 学习笔录(持续更新中)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/622842

相关文章

MySQL更新某个字段拼接固定字符串的实现

《MySQL更新某个字段拼接固定字符串的实现》在MySQL中,我们经常需要对数据库中的某个字段进行更新操作,本文就来介绍一下MySQL更新某个字段拼接固定字符串的实现,感兴趣的可以了解一下... 目录1. 查看字段当前值2. 更新字段拼接固定字符串3. 验证更新结果mysql更新某个字段拼接固定字符串 -

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中,我们都清楚统计信息对于优化器来说非常重要。一般情况下,我们会开启"自动更新

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Docker部署Jenkins持续集成(CI)工具的实现

《Docker部署Jenkins持续集成(CI)工具的实现》Jenkins是一个流行的开源自动化工具,广泛应用于持续集成(CI)和持续交付(CD)的环境中,本文介绍了使用Docker部署Jenkins... 目录前言一、准备工作二、设置变量和目录结构三、配置 docker 权限和网络四、启动 Jenkins

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

Redis缓存问题与缓存更新机制详解

《Redis缓存问题与缓存更新机制详解》本文主要介绍了缓存问题及其解决方案,包括缓存穿透、缓存击穿、缓存雪崩等问题的成因以及相应的预防和解决方法,同时,还详细探讨了缓存更新机制,包括不同情况下的缓存更... 目录一、缓存问题1.1 缓存穿透1.1.1 问题来源1.1.2 解决方案1.2 缓存击穿1.2.1

Linux Mint Xia 22.1重磅发布: 重要更新一览

《LinuxMintXia22.1重磅发布:重要更新一览》Beta版LinuxMint“Xia”22.1发布,新版本基于Ubuntu24.04,内核版本为Linux6.8,这... linux Mint 22.1「Xia」正式发布啦!这次更新带来了诸多优化和改进,进一步巩固了 Mint 在 Linux 桌面

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R

Ubuntu 24.04 LTS怎么关闭 Ubuntu Pro 更新提示弹窗?

《Ubuntu24.04LTS怎么关闭UbuntuPro更新提示弹窗?》Ubuntu每次开机都会弹窗提示安全更新,设置里最多只能取消自动下载,自动更新,但无法做到直接让自动更新的弹窗不出现,... 如果你正在使用 Ubuntu 24.04 LTS,可能会注意到——在使用「软件更新器」或运行 APT 命令时,