TypeScript教程(四)type、interface、类型断言、非空断言

news2025/1/9 16:18:23

上一章我们讲解了Typescript的基础类型,接下来我们就来看看Typescript的、type、interface、类型断言、非空断言

type关键字(类型别名)

type 关键字可以帮助我们为现有的类型创建别名,提高代码的可读性和可维护性

在前面,我们通过在类型注解中编写对象类型联合类型,但是当我们想要多次在其他地方使用时,就要编写多次。如果我们想要让避免这种重复代码,就可以使用类型别名。

type Age = number;
type Name = string;

const age: Age = 30;
const name: Name = "Alice";

在上面的示例中,我们使用 type 关键字创建了两个自定义类型别名 Age 和 Name,分别用于表示年龄和姓名。

interface关键字 (接口)

interfac可以帮助我们定义对象的结构、函数签名等

interface Point {
  x: number;
  y: number;
}

const point: Point = { x: 10, y: 20 };

我们会发现interface和type都可以用来定义对象类型,那么在开发中定义对象类型时,我们到底选择哪一个呢?

我们建议如果是定义非对象类型,我们通常推荐使用type,比如Direction、Alignment、一些Function

那如果都用来定义对象类型,我们该用那个呢?它们又有什么区别呢?

区别interfacetype
可读&可选支持可选属性和只读属性支持可选属性,但不支持直接的只读属性
是否兼容合并接口之间可以进行多次声明合并,同名属性会合并成一个接口。定义的是类型别名之间不能进行合并。
interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = { name: "Alice", age: 30 };

image.png

as&&<> (类型断言)

类型断言允许我们手动指定一个值的类型,告诉编译器这个值的类型

有时候TypeScript无法获取具体的类型信息,这个我们需要使用类型断言(Type Assertions)

as 语法

let someValue: any = "This is a string";
let strLength: number = (someValue as string).length;

尖括号语法

let someValue: any = "This is a string";
let strLength: number = (<string>someValue).length;

当TypeScript无法获取具体的类型信息,这个我们需要使用类型断言(Type Assertions)

使用场景

比如我们通过 document.getElementById,TypeScript只知道该函数会返回 HTMLElement ,但并不知道它具体的类型时。

const element = document.getElementById("myElement") as HTMLInputElement;
element.value = "Hello, TypeScript!";

当我们从后端请求到数据,TypeScript 可能无法正确推断数据的类型,这是我们就可以使用类型断言

const data: unknown = fetchDataFromAPI();
const result = (data as SomeType).someProperty;

或者我们要对联合类型进行操作时,Typescript却无法推断出变量类型时,也可以使用类型断言

function processInput(input: string | number) {
  if (typeof input === "string") {
    const length = (input as string).length;
    // 或者使用另一种语法:(input as string).length
  } else {
    const squared = (input as number) ** 2;
  }
}

!(非空断言)

非空断言操作符 !,可以帮助我们告诉编译器某个表达式的结果不会为 null 或 undefined

当我们从 DOM 获取元素时,可能会返回 null 的元素引用。但如果我们确定元素真实存在,就可以使用非空断言来消除编译器的警告。

const element = document.getElementById("myElement")!;
element.innerHTML = "Hello, TypeScript!";

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

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

相关文章

一切计算皆AI,开放计算再破局

“OpenAI最差的决定就是没有开放它的大模型。”著名科技预言家凯文凯利在2024年最新演讲中强调开源对于AI发展的重要性。 的确&#xff0c;开源大模型近年来迸发出巨大的产业活力&#xff0c;推动了AI的协作与创新&#xff1a;2023年全球新发布的基础模型中有三分之二为开源模…

随笔二、OV5695摄像头测试

摘要&#xff1a;泰山派开发板SDK使用了GStreamer媒体框架作为音视频的编解码器&#xff0c;支持硬件编解码。开发板提供MIPI_CSI摄像头接口连接摄像头。 1. 摄像头信息 开发板MIPI-CPI接口是30pin、4lane&#xff1b;测试用的OV5696是2lane&#xff0c;像素500万&#xff0c;…

GPU云服务器有什么优点?

云服务器是一种通过互联网提供计算资源和服务的灵活、高性能的解决方案。而随着人工智能及数据密集型应用的迅猛发展&#xff0c;GPU&#xff08;图形处理器&#xff09;云服务器逐渐成为许多企业和个人的优选。下面将介绍GPU云服务器的几个优势。 1、GPU云服务器具备强大的计算…

线程的退出

线程退出方式总结&#xff1a; 1.pthread_exit; void pthread_exit(void *retval); 传的是退出状态值对应的地址 2.执行函数中return 3.pthread_cancel // int pthread_cancel(pthread_t thread); 4.在任何一个线程中调用了exit #include <stdio.h> #include <…

软件测试之Linux系统性能调优技巧

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言 Linux系统性能调优是一项复杂且系统性的任务&#xff0c;它涉及操作系统内核、硬件资源、应用程序、文件系统、网络设置等多个方面。通过合理的调优策略&#xff0c;可以有效提高Linux系统的性能&#xff0c;满足生产环境…

qt-10基本对话框(文件--颜色--字体)

基本对话框--输入对话框 DialogDialog.hDialog.cpp exdialog.hexdialog.hexdialog.cpp 运行图文件对话框颜色对话框字体对话框输入对话框-字符串输入对话框-选择 Item输入对话框-数字 Dialog Dialog.h #ifndef DIALOG_H #define DIALOG_H#include "exdialog.h"#inc…

数字文创产业园怎么凭借智慧园区建设出圈

在数字化浪潮席卷全球的当下&#xff0c;数字文创产业正以前所未有的速度崛起。而数字文创产业园若想在众多竞争对手中脱颖而出&#xff0c;凭借智慧园区建设出圈无疑是一条明智之路。 首先得明白什么是智慧园区建设&#xff1f; 智慧园区建设指的是通过现代信息技术和智能化手…

超时控制+第三方调用控制

文章目录 第三方调用控制背景介绍一致性抽象同步转异步自动替换第三方压测支持 超时控制目标确定超时时间根据用户体验根据响应时间压力测试根据代码计算 监控超时时间 第三方调用控制 背景介绍 我的系统对可用性要求非常高&#xff0c;为此我综合使用了熔断、限流、降级、超…

mac 链接数据库报错 - Public Key Retrieval is not allowed

使用 DBeaver 链接 MySQL 时&#xff0c;连接失败&#xff0c;提示 Public Key Retrieval is not allowed 发现是需要修改一个链接属性字段&#xff0c;方式如下&#xff1a; 1、选中服务器&#xff0c;点击 编辑连接 2、连接设置 – 驱动属性 – allowPublicKeyRetrieval 改为…

暨南大学2024年硕士研究生报考录取情况统计表

今天暨南大学2024年硕士研究生报考录取情况统计表出来了&#xff0c;在之前的笔记中&#xff0c;我对比过2022年与2023年的硕士研究生报考录取情况统计表中暨南大学智科院人工智能专硕报考情况 2024硕士研究生报考录取情况统计表中智科院的电子信息对应的是人工智能专硕(01方向…

科研项目验收管理系统

TOC springboot245科研项目验收管理系统 绪论 1.1 研究背景 现在大家正处于互联网加的时代&#xff0c;这个时代它就是一个信息内容无比丰富&#xff0c;信息处理与管理变得越加高效的网络化的时代&#xff0c;这个时代让大家的生活不仅变得更加地便利化&#xff0c;也让时…

面向对象编程-继承

目录 一、为什么需要继承 二、继承的基本介绍 1、继承的基本介绍 2、继承示意图 3、继承的基本语法 三、快速入门 四、继承的使用细节 五、练习 一、为什么需要继承 1、一个小问题&#xff0c;还是看程序&#xff0c;提出代码复用问题 1&#xff09;我们编写两个类&a…

【AI 绘画】Q版人物定制生成

AI 绘画-PulID手办定制 1. 效果展示 本次测试主要结果展示如下: 牛仔风 古风 2. 基本原理 PuLID是一种类似于 ip-adapter 的恢复面部特征的方法。它同时使用 insightface 嵌入和 CLIP 嵌入,类似于 ip-adapter faceid plus 模型所做的。但是,在将图像传递给 CLIP 之前,还…

8.看门狗(WDG)

理论 防止系统跑飞 喂狗&#xff1a;让值为0 分类&#xff1a;独立看门狗(IWDG,0到100喂狗)、窗口看门狗(60到100喂狗)&#xff0c;值(60)&#xff0c;顶值(100) 代码编写 按键喂狗 独立看门狗配置 超过10s&#xff0c;复位 注意时钟&#xff1a; 按键、LED灯配置参考&#x…

sql注入实战——thinkPHP

sql注入实战——thinkPHP sql注入实战——thinkPHPthinkPHP前期环境搭建创建数据库开始寻找漏洞点输入SQL注入语句漏洞分析 实验错误 sql注入实战——thinkPHP thinkPHP前期环境搭建 下载thinkPHP文件 解压&#xff0c;将framework关键文件放到think-5.0.15中&#xff0c;改…

Containerd详解

一.Containerd概述 1.什么是Containerd Containerd (container Daemon)是一个开源的容器运行时&#xff0c;它提供了一种标准化的方式来管理容器的生命周期。该项目最初是由Docker开发团队创建的&#xff0c;并在后来成为一个独立的项目&#xff0c;被纳入了Cloud Native Comp…

播放视频时黑屏无报错或报错“播放失败,请检查设备及客户端网络”

播放视频时黑屏无报错或报错“播放失败&#xff0c;请检查设备及客户端网络”或该如何解决&#xff1f; 请先使用排障工具排查&#xff0c;获得具体错误码&#xff0c;排障工具操作文档详见&#xff1a; 播放失败自助排障及常见错误码解决方案 - 播放问题 - 萤石社区 - Powered…

Linux下查看各进程的swap

cat /etc/re*se Red Hat Enterprise Linux Server release 6.8 (Santiago) 简单的可以通过top命令查看 top 后 按 f 进入选择列界面 按 p 就会输出swap信息&#xff08;变为P&#xff09; 回车返回看到SWAP信息了 再按 F 再按p 按swap排序 再回车后就是各进程按swap排序…

工厂数据采集设备的革新与应用-天拓四方

随着工业4.0和智能制造的快速发展&#xff0c;工厂数据采集设备已成为现代制造业不可或缺的重要组成部分。这些设备不仅提高了生产效率&#xff0c;还通过精准的数据分析为企业的决策提供了有力支持。本文将深入探讨工厂数据采集设备的革新、应用及其在实际操作中的重要性。 一…

论文利器 | 6款论文自动生成免费含摘要文献综述

在学术写作中&#xff0c;选择合适的工具和软件可以大大提高写作效率和质量。本文将重点介绍一款备受推荐的AI原创论文写作平台——千笔-AIPassPaPer&#xff0c;并详细分析其功能和优势。 千笔-AIPassPaPer简介 千笔-AIPassPaPer是一款功能全面且高效的AI原创论文写作平台&a…