Typescript 【详解】类型声明

值类型

// 字符串
let myNname: string = "朝阳";// 数字
let num: number = 10;// 布尔类型
let ifLogin: boolean = true;
// 布尔类型支持赋值计算之后结果是布尔值的表达式
let bool: boolean = !!0// null
let n: null = null;// undefined
let u: undefined = undefined;// symbol
let s: symbol = Symbol();

TS 官方推荐使用 string , 不推荐用 String , 因为 String 是包装对象,Number,Boolean 等同理。

let myname: string = "朝阳";myname = new String("你好"); // 报错:不能将类型“String”分配给类型“string”。“string”是基元(基础数据类型),但“String”是包装器对象。

String 既能赋值基础字符串,也能赋值包装对象。

let myname: String = "朝阳";myname = new String("你好");

在这里插入图片描述

数组 []

// 空数组
let arr: [] = [];// 元素只能是数字的数组(其他类型的写法类似)
let arr1: number[] = [1, 2];// 元素只能是数字或字符串的数组(| 表示或的关系)
let arr2: (number | string)[] = [1, "朝阳"];// 即是number类型也可能是string数组
const numbers1: number[] | string[] = ['123', '333'] // 正确
const numbers2: number[] | string[] = [123, '333'] // 错误// 对象数组
let todoList: {id: number;label: string;done: boolean;
}[] = [{id: 1,label: "吃饭",done: false,},{id: 2,label: "编程",done: false,},
];// 使用类型别名(type alias)
type User = { name: string; age: number }// 存储对象类型的内容
const objectArr: User[] = [{name: 'zws',age: 18}
]// 构造函数声明类型
let arr_1: Array<number> = [1, 2];
let arr_2: Array<number | string> = [1, "朝阳"];

对象 {}

// 空对象
let o: {} = {};
let o2: object = {};// 必选属性的对象(赋值时,声明的属性必须有!)
let user: {name: string;age: number;
} = {name: "朝阳",age: 35,
};// 可选属性的对象(可选属性需写在必选属性的后面!)
let user2: {name: string;age?: number;
} = {name: "晚霞",
};

对象类型的描述,可以用 , ; 或换行分隔,如

let user1: {name: string;age: number
};let user2: {name: string,age: number
};let user3: {name: stringage: number
};

Object 、object 和 {} 的区别

  • Object (首字母大写)【用得很少,因类型太宽泛】 和 {} 的类型声明最抽象,对象、数组、基础数据类型(除 null , undefined)都能赋值。

  • object (首字母小写)【用得很少,因类型太宽泛】更具体些,类似于 { [key: string]: any } ,可以给它赋值对象和数组,不能分配基础数据类型

  • { [key: string]: string } 则最具体,只能赋值键值为字符串的对象。

var p: {}; // 或 Object
p = { prop: 0 }; // OK
p = []; // OK
p = 42; // OK
p = "string"; // OK
p = false; // OK
p = null; // Error
p = undefined; // Errorvar o: object;
o = { prop: 0 }; // OK
o = []; // OK
o = 42; // Error
o = "string"; // Error
o = false; // Error
o = null; // Error
o = undefined; // Errorvar q: { [key: string]: any };
q = { prop: 0 }; // OK
q = []; // OK
q = 42; // Error
q = "string"; // Error
q = false; // Error
q = null; // Error
q = undefined; // Errorvar r: { [key: string]: string };
r = { prop: 'string' }; // OK
r = { prop: 0 }; // Error
r = []; // Error
r = 42; // Error
r = "string"; // Error
r = false; // Error
r = null; // Error
r = undefined; // Error

索引签名

允许定义对象可以具有任意数量的属性,这些属性的键和类型是可变的,常用于描述类型不确定的属性(具有动态属性的对象)。

let person: {name: string;age?: number;// 下方为索引签名,表示本对象可以有任意数量的属性,属性值可以为任意类型。[key: string]: any; // 通常用 key ,实际可以写任意名称,如 index 等。
};person = { name: "朝阳", age: 35, gender: "男", city: "成都" };

函数 function

// TS 语法,声明 add 变量为函数类型,此处 => 并不表示箭头函数,而是表示函数的定义
let add: (a: number, b: number) => number; // a,b 只是形式参数,可以用任意字符串代替add = (x, y) => {return x + y;
};// 命名函数
function add(arg1: number, arg2: number): number {return x + y;
}// 箭头函数
const add = (arg1: number, arg2: number): number => {return x + y;
};

类 class

class Person {}
const me: Person = new Person()class Teacher {name: stringage: number
}const objectArr: Teacher[] = [new Teacher(),{name: 'zws',age: 18}
]

任意类型 any

当不确定变量的类型时(比如来自用户输入或第三方代码库的动态内容),可以使用,但尽量少用。

  • 任何类型的值都可以赋值给 any 类型的变量
let a: any = '你好'
a = 0// 多数据类型的数组
let list: any[] = [1, true, "free"];
  • 未声明类型的变量,其类型就是 any
// 与 let myname:any 等效
let myname  
  • any 类型的变量,可以赋值给任意类型的变量
let myname: any = "朝阳";let yourName: number = 11;// 不会报错!
yourName = myname;
  • 读取 any 类型数据的任何属性都不会报错

不确定的类型 unknown

  • 任何类型的值都可以赋值给 unknown 类型的变量

  • unknown 可以理解为类型安全的 any ,即 unknown 类型的变量,无法像 any 类型的变量一样,随意赋值给其他类型的变量。

  • any 与 unknown 的区别 : unknown 需要明确类型后执行操作,any 则不需要

    let a: unknown = 1;let b = a + 1; // 会报错 “a”的类型为“未知”
    

永不存在的类型 never

用于总会抛出异常或根本不会有返回值的函数表达式的返回值类型。
当变量被永不为真的类型保护所约束时,该变量也是 never 类型。

很少主动声明类型 never,通常是 TS 自行推导出类型 never

用途

  • 限制函数的返回类型(顺利执行的函数默认会返回 undefined,所以 never 仅适用于运行过程中会抛出异常,或永远调不完的函数)
  • 控制流程
  • 类型运算
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {throw new Error(message);
}// 推断的返回值类型为never
function fail() {return error("Something failed");
}// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {while (true) {}
}

空类型 void

通常用于描述函数没有返回值

// 实际函数的返回值为 undefined
function test(): void {
}

// 实际函数的返回值为 undefined
function test(): void {return;
}

// 明确指定函数的返回值为 undefined
function test(): void {return undefined;
}

void类型的变量只能被赋予undefined

let test: void = undefined;

但 void 与 undefined 并不等效!

function test2(): void {}let result2 = test2();// 此处会报错,因为 TS 不建议对 void 类型的数据做进一步处理和判断!
if (result2) {
}

undefined 则不会报错

function test1(): undefined {}let result1 = test1();if (result1) {
}

在这里插入图片描述
这是 TS 官方的一种特殊处理

在这里插入图片描述

元组 Tuple

固定长度和类型(可以不同)的数组

let x: [string, number]; // 元组 -- 第一个元素是字符串,第二个元素是数字
x = ['hello', 10];
let x: [number, string?]; // 元组 -- 字符串元素是可选的,可有可无
let x: [number, ...string[]]; // 元组 -- 字符串元素可以是任意数量(含0个)

枚举 enum【重要】

一组常量值,不能修改,可提升语义,方便维护。

  • 枚举类型的名称通常首字母大写!

数值枚举(默认)

  • 枚举成员的值会默认递增
  • 具有反向映射
enum Direction {Up,Down,Left,Right,
}console.log(Direction);

打印可见

{'0': 'Up','1': 'Down','2': 'Left','3': 'Right',Up: 0,Down: 1,Left: 2,Right: 3
}
// 枚举三原色
enum Color {Red, Green, Blue}
// 按枚举内容的字符串取值,得到的是对应的下标(类似数组的下标,从0开始)
let c: Color = Color.Green;  // c的值为1 
// 枚举方向:上下左右
enum Direction {Up,Down,Left,Right
}// 按下标取值,可得到枚举内容的字符串
console.log(Direction[0]) // "Up"

可以自定义下标的起点

// 将默认的下标 0  改为 下标 1,则后续下标会依次递增
enum Direction {Up = 1,Down,  // 2Left,  // 3Right  // 4
}

也可以自定义任意下标,未定义的在上一个的基础上递增

enum Direction {Up = 11,Down, // 12Left = 6, Right, // 7
}

甚至下标可以相同

enum Direction {Up = 11,Down, // 12Left = 11,Right, // 12
}console.log(Direction.Down); // 打印 12console.log(Direction); // 打印 { '11': 'Left', '12': 'Right', Up: 11, Down: 12, Left: 11, Right: 12 }

如果下标使用了计算值或常量,那么该字段后面紧接着的字段必须设置初始值,不能默认递增值了!

const getValue = () => {return 0;
};
enum ErrorIndex {a = getValue(),b, // error 枚举成员必须具有初始化的值c
}
enum RightIndex {a = getValue(),b = 1,c
}
const Start = 1;
enum Index {a = Start,b, // error 枚举成员必须具有初始化的值c
}

字符串枚举

即给枚举成员赋值为字符串

  • 当枚举成员为字符串时,其之后的成员也必须是字符串。
  • 没有反向映射
enum Direction {Up, // 未赋值,默认为0Down = '南',Left = '西',Right = '东'
}

常量枚举

给枚举添加 const 标注,可减少编译的代码量。

enum Direction {Up,Down,Left,Right,
}console.log(Direction.Up);

编译为 js 后为

var Direction;
(function (Direction) {Direction[Direction["Up"] = 0] = "Up";Direction[Direction["Down"] = 1] = "Down";Direction[Direction["Left"] = 2] = "Left";Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
console.log(Direction.Up);

const enum Direction {Up,Down,Left,Right,
}

编译为 js 后为

console.log(0 /* Direction.Up */);

可见编译后的代码量,大大减少了!

事件 Event

如鼠标事件 MouseEvent

HTML元素 HTMLElement

如 input 元素 HTMLInputElement

字面量类型(了解即可)

let myname: "朝阳" = "朝阳";

则 myname 只能赋值 “朝阳” ,无法赋值其他值。

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

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

相关文章

区块链安全常见的攻击分析——Unprotected callback - ERC721 SafeMint reentrancy【8】

区块链安全常见的攻击分析——Unprotected callback - ERC721 SafeMint reentrancy【8】 1.1 漏洞分析1.2 漏洞合约1.3 攻击分析1.4 攻击合约 重点&#xff1a;MaxMint721 漏洞合约的 mint 函数调用了 ERC721 合约中的 _checkOnERC721Received 函数&#xff0c;触发 to 地址中实…

写在2024的最后一天

落笔不知何起&#xff0c;那就从开始道来吧。 2024的元旦节后入职了一家新公司&#xff0c;一开始是比较向往的&#xff0c;也许是因为它座落在繁华街道的高档写字楼之中&#xff0c;又或许是因为它相较于以往的公司而言相对正规些。但接触了公司代码后&#xff0c;我有了…

自动化测试-Pytest测试

目录 pytest简介 基本测试实例 编写测试文件 执行测试 pytest运行时参数 mark标记 Fixture pytest插件 Allure测试报告 测试步骤 pytest简介 Pytest‌是一个非常流行的Python测试框架&#xff0c;它支持简单的单元测试和复杂的功能测试&#xff0c;具有易于上手、功…

CPT203 Software Engineering 软件工程 Pt.2 敏捷方法和需求工程(中英双语)

文章目录 3. Aglie methods&#xff08;敏捷方法&#xff09;3.1 Aglie methods&#xff08;敏捷方法&#xff09;3.1.1 特点3.1.2 优点3.1.3 缺点3.1.4 原则3.1.5 计划驱动与敏捷方法的对比 3.2 Scrum3.2.1 Scrum roles3.2.2 Scrum Activities and Artifacts3.2.2.1 Product B…

C#Halcon图像处理畸变校正之曲面校正

图像校正场景一般有两种&#xff0c;其一由镜头本身或安装角度引起&#xff0c;其二是被拍摄物品本身引起 理论处理流程 我的处理处理流程 1&#xff0c;加载网格校正图像 2&#xff0c;确定符合条件的网格区域 3&#xff0c;显示网格鞍点 4&#xff0c;显示网格线 5&#xff…

IO Virtualization with Virtio.part 1 [十二]

久等了各位&#xff01; 本篇开始讲解 IO 虚拟化中的 virtio&#xff0c;我会以 Linux 的 IIC 驱动为例&#xff0c;从 IIC 驱动的非虚拟化实现&#xff0c;到 IIC 驱动的半虚拟化实现&#xff0c;再到最后 X-Hyper 中如何通过 virtio 来实现前后端联系&#xff0c;一步步把 v…

HTML——26.像素单位

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>像素</title></head><body><!--像素&#xff1a;1.指设备屏幕上的一个点&#xff0c;单位px&#xff0c;如led屏上的小灯朱2.当屏幕分辨率固定时&…

uniapp不能直接修改props的数据原理浅析

uniapp不能直接修改props的数据 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the props value. Prop being mutated: "expectDeliveryAt" 避…

基于FISCO BCOS的电子签署系统

概述 本项目致力于构建一个安全、高效且功能完备的电子签署系统&#xff0c;通过整合区块链技术与传统数据库管理&#xff0c;为用户提供了可靠的电子签署解决方案&#xff0c;有效应对传统电子签署系统的数据安全隐患&#xff0c;满足企业和个人在数字化办公环境下对电子文档…

HackMyVM-Adria靶机的测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、信息搜集 2、Getshell 3、提权 四、结论 一、测试环境 1、系统环境 渗透机&#xff1a;kali2021.1(192.168.101.127) 靶 机&#xff1a;debian/linux(192.168.101.226) 注意事项&…

STM32-笔记23-超声波传感器HC-SR04

一、简介 HC-SR04 工作参数&#xff1a; • 探测距离&#xff1a;2~600cm • 探测精度&#xff1a;0.1cm1% • 感应角度&#xff1a;<15 • 输出方式&#xff1a;GPIO • 工作电压&#xff1a;DC 3~5.5V • 工作电流&#xff1a;5.3mA • 工作温度&#xff1a;-40~85℃ 怎么…

win32汇编环境下,对话框程序中生成listview列表控件,点击标题栏自动排序的示例

;;启动后的效果 ;点击性别后的效果 ;把代码抄进radasm里面&#xff0c;可以直接编译运行。重要的地方加了备注。 ;这个有点复杂&#xff0c;重要的地方加了备注 ;以下是ASM文件 ;>>>>>>>>>>>>>>>>>>>>>>>…

工业以太网交换机怎么挑选?

在现代工业中&#xff0c;工业以太网交换机是网络的核心设备。正确选择适合的交换机&#xff0c;直接关系到工业网络的运行稳定性和系统的可靠性。接下来&#xff0c;我们将围绕选型时需要重点考虑的几个方面展开讨论&#xff0c;并为您提供一些实用建议。 性能与传输速度 选择…

如何在 Ubuntu 22.04 上安装并开始使用 RabbitMQ

简介 消息代理是中间应用程序&#xff0c;在不同服务之间提供可靠和稳定的通信方面发挥着关键作用。它们可以将传入的请求存储在队列中&#xff0c;并逐个提供给接收服务。通过以这种方式解耦服务&#xff0c;你可以使其更具可扩展性和性能。 RabbitMQ 是一种流行的开源消息代…

Zabbix企业级分布式监控系统

第一章&#xff1a;监控概念及Zabbix部署 监控概述 对于监控系统在企业架构中不是新的技术&#xff0c;但却是必不可少的重要组成部分&#xff0c;所谓无监控&#xff0c;不运维&#xff01; 监控系统可以帮助运维、开发、测试等人员及时的发现服务器出现的故障&#xff0c;…

前端安全措施:接口签名、RSA加密、反调试、反反调试、CAPTCHA验证

文章目录 引言I 设置防爬虫功能使用robots.txt文件通过配置HTTP头部中的X-Robots-TagII 禁止打开开发者工具反复清空控制台无限debugger反调试检查是否按下了F12或其他调试快捷键禁用右键监听调试快捷键例子III 屏蔽粘贴/复制/剪切/选中IV 知识扩展: javascript内置命令调试分…

ThinkPHP 8高效构建Web应用-第一个简单的MVC应用示例

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 我们先实现一…

Visual Studio 中增加的AI功能

前言&#xff1a; 人工智能的发展&#xff0c;在现在&#xff0c;编程技术的IDE里面也融合了AI的基本操做。本例&#xff0c;以微软的Visual Studio中的人工智能的功能介绍例子。 本例的环境&#xff1a; Visual Studio 17.12 1 AI 智能变量检测&#xff1a; 上图展示了一…

理解生成协同促进?华为诺亚提出ILLUME,15M数据实现多模态理解生成一体化

多模态理解与生成一体化模型&#xff0c;致力于将视觉理解与生成能力融入同一框架&#xff0c;不仅推动了任务协同与泛化能力的突破&#xff0c;更重要的是&#xff0c;它代表着对类人智能&#xff08;AGI&#xff09;的一种深层探索。通过在单一模型中统一理解与生成&#xff…

TTL 传输中过期问题定位

问题&#xff1a; 工作环境中有一个acap的环境&#xff0c;ac的wan口ip是192.168.186.195/24&#xff0c;ac上lan上有vlan205&#xff0c;其ip子接口地址192.168.205.1/24&#xff0c;ac采用非nat模式&#xff0c;而是路由模式&#xff0c;在上级路由器上有192.168.205.0/24指向…