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 中，有些类型信息仅在编译时起作用，而在运行时则不存在。例如，type 和 interface 定义的类型信息在编译后的 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 是一种定义类型和实现的方式。它既包含类型信息，也包含实际的属性和方法实现。与 type 和 interface 不同，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 中，type、interface 和 class 分别具有自己的用途和特点。

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

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

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

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


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

相关文章

Unity新手入门学习殿堂级知识详细讲解（图文）

Unity新手入门学习殿堂级知识详细讲解（图文）

《Unity新手入门学习殿堂级知识详细讲解（图文）》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程
阅读更多...
MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

《MySQL数据库表操作完全指南:创建、读取、更新与删除实战》本文系统讲解MySQL表的增删查改（CURD）操作,涵盖创建、更新、查询、删除及插入查询结果,也是贯穿各类项目开发全流程的基础数据交互原... 目录mysql系列前言一、Create(创建)并插入数据1.1 单行数据 + 全列插入1.2 多行数据
阅读更多...
linux安装、更新、卸载anaconda实践

linux安装、更新、卸载anaconda实践

《linux安装、更新、卸载anaconda实践》Anaconda是基于conda的科学计算环境,集成1400+包及依赖,安装需下载脚本、接受协议、设置路径、配置环境变量,更新与卸载通过conda命令... 目录随意找一个目录下载安装脚本检查许可证协议，ENTER就可以安装完毕之后激活anaconda安装更
阅读更多...
Python学习笔记之getattr和hasattr用法示例详解

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.
阅读更多...
Nginx进行平滑升级的实战指南(不中断服务版本更新)

Nginx进行平滑升级的实战指南(不中断服务版本更新)

《Nginx进行平滑升级的实战指南(不中断服务版本更新)》Nginx的平滑升级（也称为热升级）是一种在不停止服务的情况下更新Nginx版本或添加模块的方法,这种升级方式确保了服务的高可用性,避免了因升... 目录一.下载并编译新版Nginx1.下载解压2.编译二.替换可执行文件，并平滑升级1.替换可执行文件
阅读更多...
SQL Server跟踪自动统计信息更新实战指南

SQL Server跟踪自动统计信息更新实战指南

《SQLServer跟踪自动统计信息更新实战指南》本文详解SQLServer自动统计信息更新的跟踪方法,推荐使用扩展事件实时捕获更新操作及详细信息,同时结合系统视图快速检查统计信息状态,重点强调修... 目录SQL Server 如何跟踪自动统计信息更新：深入解析与实战指南 核心跟踪方法1️⃣ 利用系统目录
阅读更多...
SpringBoot中六种批量更新Mysql的方式效率对比分析

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种
阅读更多...
MySQL追踪数据库表更新操作来源的全面指南

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1：启用数据库审计日志（1）mysql/mariad
阅读更多...
Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2