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

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

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

相关文章

1.23 力扣图论

841. 钥匙和房间 有 n 个房间&#xff0c;房间按从 0 到 n - 1 编号。最初&#xff0c;除 0 号房间外的其余所有房间都被锁住。你的目标是进入所有的房间。然而&#xff0c;你不能在没有获得钥匙的时候进入锁住的房间。 当你进入一个房间&#xff0c;你可能会在里面找到一套不…

无刷电机学习-方波电调 电路篇

想要彻底的理解无刷电机的驱动&#xff0c;那必然少不了学习他的驱动电路和程序。这里用开源的AM32无刷电调&#xff08;方波驱动&#xff09;来作为学习无刷电机笔记。 https://github.com/AlkaMotors附上作者github地址 AM32_Hardware: 基于AT32MCU的AM32PCB另一位大佬开源…

niushop靶场漏洞查找-文件上传漏洞等(超详细)

实战漏洞-niushop 一.端口扫描 http://www.xxx.com/index.php?s/admin/login 这里查询到后面的url有且仅有一个&#xff0c;目测估计是后台 访问url 发现确实是后台 二、找漏洞 Sql注入漏洞1&#xff1a; 点击进去 修改id www.xxx.com/index.php?s/goods/goodslist&…

网络要素服务(WFS)详解

文章目录 1. 概述2. GetCapabilities3. DescribeFeatureType4. GetFeature4.1 Get访问方式4.2 Post访问方式 5. Transaction5.1 Insert5.2 Replace5.3 Update5.4 Delete 6 注意事项 1. 概述 前置文章&#xff1a; 地图服务器GeoServer的安装与配置 GeoServer发布地图服务&#…

C语言爬虫采集图书网站百万数据

最近需要查阅一些资料&#xff0c;只给到相关项目名称以及关键词&#xff0c;想通过图书文库找到对应书籍&#xff0c;那么怎么才能在百万数据库中找到自己需要的文献呢&#xff1f; 今天我依然用C语言写个爬虫程序&#xff0c;从百万数据库中查找到适合的文章&#xff0c;能节…

【GitHub项目推荐--Go语言学习指南】【转载】

Go语言学习指南是一份涵盖大部分 Golang 程序员所需要掌握的核心知识&#xff0c;拥有 Go语言教程、Go开源书籍、Go语言入门教程、Go语言学习路线。零基础学习 Go语言、Go编程&#xff0c;首选 GoGuide。 地址&#xff1a;https://github.com/coderit666/GoGuide

剑指offer面试题8 旋转数组的最小数字

考察点 算法二分搜索知识点 二分搜索算法是针对排序的数组&#xff0c;先找到中间元素&#xff0c;如果待查找元素比中间元素大&#xff0c;说明待查 找元素肯定不在左边那片区域内&#xff0c;如果待查找元素比中间元素小&#xff0c;说明待查找元素肯定不在右 边那片区域内…

方法(java)

方法&#xff08;method&#xff09;是程序中最小的执行单元 实际开发中&#xff0c;重复的代码、具有独立功能的代码可以抽取到方法中 实际开发中&#xff0c;方法的好处&#xff1a; 1.可以提高代码的复用性 2.可以提高代码的可维护性 方法定义&#xff1a;把一些代码打…

【设计模式】美团三面:你连装饰器都举不出例子?

什么是装饰器模式&#xff1f; 装饰器模式&#xff0c;这个设计模式其实和它的名字一样&#xff0c;非常容易理解。 想象一下&#xff0c;每天出门的时候&#xff0c;我们都会思考今天穿什么。睡**衣、睡裤加拖鞋&#xff0c;还是西装、领带加皮鞋&#xff1f;又或者说是&…

【开发随想】如何快速入手一个Linux开源项目

&#x1f41a;作者简介&#xff1a;花神庙码农&#xff08;专注于Linux、WLAN、TCP/IP、Python等技术方向&#xff09;&#x1f433;博客主页&#xff1a;花神庙码农 &#xff0c;地址&#xff1a;https://blog.csdn.net/qxhgd&#x1f310;系列专栏&#xff1a;开发随想&#…

记录 js 过滤到tree上面的多余的数据

代码如下&#xff08;示例&#xff09;&#xff1a; filterTree(arr, ids,firsttrue) {if(first){//首次传入深度克隆数据防止修改源数据arrJSON.parse(JSON.stringify(arr))}let emptyArr [];for (let item of arr) {if (ids.includes(item.id)) {if (item.children &&am…

【Foxmail】客户端发送邮件错误:SSL Recv :服务器断开连接, errorCode: 6

Foxmail客户端发送邮件提示&#xff1a;SSL Recv :服务器断开连接, errorCode: 6 错误代码 处理方式&#xff1a; 去邮箱生成新的16位授权码&#xff0c;输入到 密码框 内即可。 注&#xff1a;一旦开通授权码&#xff0c;在Foxmail验证时 密码框 里输入的就是 授权码

shell脚本概念构成及脚本变量详解

目录 一、前言 1、程序编程风格 2、编程语言 3、编程的三种处理逻辑 二、shell脚本 1、shell脚本基础 1.1 什么是shell 1.1.1 shell的概念 1.1.2 linux中常见的shell类型及信息 1.1.3 shell脚本的功能 1.2 shell脚本及构成 1.3 shell脚本执行方式 1.4 脚本错误调试…

spring和springboot的区别

在当今的软件开发领域&#xff0c;Spring和Spring Boot无疑是Java开发者最常用的框架之一。尽管它们都源于Spring项目&#xff0c;但它们在设计和使用上有很大的不同。本文将深入探讨Spring和Spring Boot之间的主要区别&#xff0c;以及为什么有时候选择其中一个而不是另一个是…

STL标准库(二)序列容器之array

容器 容器的本质是类模板&#xff0c;分为序列容器和关联容器 序列容器 array 固定数组 应用包含arrry库 vector 动态数组 应用包含 vector库 deque 双端队列 list 双向链表 forward_list 单向链表 stack 栈 queue 队列 prority 优先队列 array应用 int main() { …

现代密码学基础(2)

目录 一. 介绍 二. 举例&#xff1a;移位密码 &#xff08;1&#xff09;密文概率 &#xff08;2&#xff09;明文概率 三. 举例&#xff1a;多字母的移位密码 四. 完美安全 五. 举例&#xff1a;双子母的移位密码 六. 从密文角度看完美安全 七. 完美保密性质 一. 介绍…

NVIDIA 再现逆天刀法,千元级 RTX 新卡曝光

这年头&#xff0c;价格 1 字开头入门甜品显卡几乎真就成 N、A 两家弃子了。 以 NVIDIA RTX 4060 与 AMD RX 7600 为例&#xff0c;这两块显卡同为两家新品中最低端型号&#xff0c;其价格直接来到 2K 左右起步。 要知道目前很多普通用户选购一台日常办公、游戏电脑主机&#…

vue(vue2)使用svg格式图标

先安装插件 配置svg文件夹&#xff0c;新建icons文件&#xff0c;svg文件夹放svg后缀文件 index.js文件中的配置 import Vue from "vue" import svgIcon from "/common/iconSvg/index.vue"Vue.component(svg-icon,svgIcon) //挂载全局组件//下面…

Python with Office 054 - Work with Word - 7-9 插入图像 (3)

近日详细学习了寒冰老师的很好的书《让Python遇上Office》&#xff0c;总结了系列视频。 这个是其中的一集&#xff1a;如何在Word中插入图像&#xff0c;我会陆续分享其他的视频并加上相应说明 https://www.ixigua.com/7319498175104942643?logTage9d15418663166a05d10

Java 一个数组集合List<People> 赋值给另一个数组集合List<NewPeople> ,两个数组集合属性部分一致。

Java 一个数组集合List 赋值给另一个数组集合List &#xff0c;两个数组集合属性部分一致。 下面是一个Demo, 具体要根据自己的业务调整。 import java.util.ArrayList; import java.util.List;class People {private String name;private int age;private String address;publ…