TypeScript类型判断

news2024/12/27 13:28:22

快速认知

         TS允许我们为变量设置类型限制并进行检测判断

// 常见的类型判断
let age: number = 20;
let isDead: boolean = true;
let name: string = 'abc';

        但是上面的写法太啰嗦了。ts有一个类型推断机制,ts会根据为变量赋的值自动给该变量设置一个类型。上面可以写为:

let age = 20;
let  isDead = true;
let name = 'abc';

        在上面的代码中,ts知道age就是一个数,isDead就是一个布尔值,name就是字符串,不需要显式设置变量类型。

         当声明了一个变量但是没有设置初始值,建议为其设置一个类型

let ttt: string;

        如果没有设置类型,那么它的类型会被设置为any,即接受任何值。

TS支持类型

Boolean 类型

let isDone: boolean = false;

Number 类型

let count: number = 10;

String 类型

let name: string = "Semliker";

Array 类型

let list: number[] = [1, 2, 3];
let list: string[] =  ['1','2','3']
let list: Array<number> = [1, 2, 3]; // Array<number>泛型语法

至于什么是泛型,请看后面章

对象类型

1. 匿名对象类型

匿名对象类型是在定义变量时直接使用花括号{},来定义一个对象类型。例如:

const person: { name: string, age: number } = { name: 'John', age: 25 };

上述代码中定义了一个person变量,它的类型为对象,它有两个属性:name和age,其中name属性的类型为字符串,age属性的类型为数字。

2. 接口类型

使用接口来定义对象类型,可以使代码更加可读、易于维护。例如:

interface Person {name: string;age: number;}
const person: Person = { name: 'John', age: 25 };

上述代码中,定义了一个名为Person的接口,其中包括了两个属性:name和age。然后使用Person接口来定义了一个person变量,它的类型为Person接口。

你喜欢的话甚至可以把键名的类型也给限定了。

interface stringKeyObj {
  [key: string]: string;
}

至于什么是接口,请看后面章节

3.类别类型

使用类型别名可以为对象类型定义简短、易读的名称。例如:

type Person = {name: string;age: number;}
const person: Person = { name: 'John', age: 25 };

有点像泛型。

上述代码中,使用type关键字定义了一个名为Person的类型别名,并通过花括号{}来定义了一个对象类型,其中有两个属性:name和age。然后使用Person类型别名来定义了一个person变量,它的类型为Person类型别名。

Any 类型 

在 TypeScript 中,任何类型都可以被归为 any 类。也被称作全局超级类型)。使用any类型TS将不会对其进行任何检查。

let notSure: any = 666;
notSure = "Semlinker";
notSure = false;

可以对any类型的值进行任何操作

let value: any;

value.foo.bar; // OK
value.trim(); // OK
value(); // OK
new value(); // OK
value[0][1]; // OK

如果我们使用 any 类型,就无法使用 TypeScript 提供的大量的保护机制。为了解决 any 带来的问题,TypeScript 3.0 引入了 unknown 类型。

 Unknown 类型

所有类型都可以赋值给 unknown。

let value: unknown
value = true; // OK
value = 42; // OK
value = "Hello World"; // OK
let value: unknown;
value = 123;

let value1: unknown = value; // OK
let value2: any = value; // OK

let value3: boolean = value; // Error
let value4: number = value; // Error

unknown 类型只能被赋值给 any 类型和 unknown 类型本身。不能赋值给其他类型。

只有能够保存任意类型值的容器才能保存 unknown类型的值。毕竟我们不知道变量 value 中存储了什么类型的值。

let value: unknown;

value.foo.bar; // Error
value.trim(); // Error
value(); // Error
new value(); // Error
value[0][1]; // Error

禁止对unkonwn类型的值进行任何修改操作

枚举类型Enum

 TypeScript 支持数字的和基于字符串的枚举。

字符串枚举:

enum DataType {
  /** @name 组织 */
  Org = 'org',
  /** @name 用户 */
  User = 'user',
  /** @name 角色 */
  Role = 'role',
}

let dir: DataType = DataType.Org ;

 数字枚举:

enum Direction {
    /** 0 */
    NORTH,
    /** 1 */
    SOUTH,
    /** 2 */
    EAST,
    /** 3 */
    WEST,
  }
  let a: Direction =  Direction.SOUTH;
  let b: Direction = Direction.WEST;

默认情况下,NORTH 的初始值为 0,其余的成员会从 1 开始自动增长。换句话说,Direction.SOUTH 的值为 1,Direction.EAST 的值为 2,Direction.WEST 的值为 3。

注意这个Direction 并不是生成类似于下面这种对象:

Direction = {
  NORTH: 0,
  SOUTH: 1,
  EAST: 2,
  WEST: 3,
}

而是:

{0: "NORTH", 
1: "SOUTH", 
2: "EAST", 
3: "WEST",
 NORTH: 0, 
SOUTH: 1, 
EAST: 2, 
WEST: 3}

所以转换成JS便是:

var Direction;
(function (Direction) {
    /** 0 */
    Direction[Direction["NORTH"] = 0] = "NORTH";
    /** 1 */
    Direction[Direction["SOUTH"] = 1] = "SOUTH";
    /** 2 */
    Direction[Direction["EAST"] = 2] = "EAST";
    /** 3 */
    Direction[Direction["WEST"] = 3] = "WEST";
})(Direction || (Direction = {}));
var a = Direction.SOUTH;
var b = Direction.WEST;

Direction[Direction["NORTH"] = 0] = "NORTH";

这个看不懂?

其实就是:

Direction["NORTH"] = 0

Direction[0]="NORTH"

3.异构枚举

异构枚举的成员值是数字和字符串的混合:

enum Enum {
  A,
  B,
  C = "C",
  D = "D",
  E = 8,
  F,
}

 Tuple 类型

JS的习惯性书写,TS的数组类型决定了数组一般由同种类型的值组成。,但有时我们需要在单个变量中存储不同类型的值,这时候我们就可以使用元组。在 JavaScript 中是没有元组的,元组是 TypeScript 中特有的类型,其工作方式类似于数组。

  1. 元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。
  2. 使用元组时,必须提供每个属性的值。为了更直观地理解元组的概念
let tupleType: [string, boolean];
tupleType = ["Semlinker", true];

 类型检测:

同时也会进行长度检测:

 Void 类型

void 类型像是与 any 类型相反,它表示没有任何类型。当一个函数没有返回值时,你通常会见到其返回值类型是 void:

function xxx(): void {
  console.log("123");
}

以上代码编译生成的 ES5 :

"use strict";
function xxxx() {
  console.log("123");
}

如果用Void类型来定义变量,那么它只能接受undefined的值

Null 和 Undefined 类型 

undefined 和 null 分别定义为 undefined 类型和 null类型

let u: undefined = undefined;
let n: null = null;

 Never 类型

表示的是那些永不存在的值的类型。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

听起来没什么用。实际上,我们在项目用Never类型进行全面性检查:

type Foo = string | number;

function controlFlowAnalysisWithNever(foo: Foo) {
  if (typeof foo === "string") {
    // 这里 foo 被收窄为 string 类型
  } else if (typeof foo === "number") {
    // 这里 foo 被收窄为 number 类型
  } else {
    // foo 在这里是 never
    const check: never = foo;
  }
}

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

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

相关文章

SpringMvc--综合案例

目录 1.SpringMvc的常用注解 2.参数传递 基础类型&#xff08;String&#xff09; 创建一个paramController类&#xff1a; 创建一个index.jsp 测试结果 复杂方式 ​编辑 测试结果 RequestParam 测试结果 PathVariable 测试结果 RequestBody pom.xml依赖导入 输…

软件测试之登录测试详解-功能性

功能测试 一、功能测试–登录 功能性测试用例包括&#xff1a; 1.什么都不输入&#xff0c;点击提交按钮&#xff0c;看提示信息。&#xff08;非空检查&#xff09; 2.输入已注册的用户名和正确的密码&#xff0c;验证是否登录成功&#xff1b; 3.输入已注册的用户名和不…

面试中的问题提问:如何通过提问展示你的主动性

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

大型语言模型,第 1 部分:BERT

一、介绍 2017是机器学习中具有历史意义的一年&#xff0c;当变形金刚模型首次出现在现场时。它在许多基准测试上都表现出色&#xff0c;并且适用于数据科学中的许多问题。由于其高效的架构&#xff0c;后来开发了许多其他基于变压器的模型&#xff0c;这些模型更专注于特定任务…

Nginx详解 五:反向代理

文章目录 1. 正向代理和反向代理1.1 正向代理概述1.1.1 什么是正向代理1.1.2 正向代理的作用1.1.3 正向代理的基本格式 1.2 反向代理概述1.2.1 什么是反向代理1.2.2 反向代理可实现的功能1.2.3 反向代理的可用模块 2. 配置反向代理2.1 反向代理配置参数2.1.1 proxy_pass2.1.2 其…

(其他) 剑指 Offer 65. 不用加减乘除做加法 ——【Leetcode每日一题】

❓ 剑指 Offer 65. 不用加减乘除做加法 难度&#xff1a;简单 写一个函数&#xff0c;求两个整数之和&#xff0c;要求在函数体内不得使用 “”、“-”、“*”、“/” 四则运算符号。 示例: 输入: a 1, b 1 输出: 2 提示&#xff1a; a, b 均可能是负数或 0结果不会溢出 …

在 Windows 上远程对 Linux 进行抓包

文章目录 名词解释事先准备下载安装 Wireshark下载运行 libpcap设置 libpcap 环境变量在 Wireshark 中远程连接 libpcap 笔者的运行环境&#xff1a;&#xff08;成功&#xff09; 本地客户端&#xff1a; Windows&#xff1a; Windows 10 教育版&#xff08;本文&#xff09; …

基于STM32设计的生理监测装置

一、项目功能要求 设计并制作一个生理监测装置&#xff0c;能够实时监测人体的心电图、呼吸和温度&#xff0c;并在LCD液晶显示屏上显示相关数据。 随着现代生活节奏的加快和环境的变化&#xff0c;人们对身体健康的关注程度越来越高。为了及时掌握自身的生理状况&#xff0c…

Hololens2部署很慢可能是unity工程选择不对

这样就很快&#xff0c;几分钟就完成了。&#xff08;虽然又遇到新问题了&#xff09; 第一次使用时如下&#xff0c;直接运行了一个多小时还没有完

虚拟专用网络——VPN

VPN的英文全称是"Virtual Private Network"&#xff0c;意为"虚拟专用网络"。它的本质是一种特殊的加密通讯协议&#xff0c;可以在不同地点的企业内部网之间建立一条专用的通讯线路&#xff0c;就像真正铺设了一条专线一样&#xff0c;但无需真正的物理线…

【图卷积神经网络】1-入门篇:为什么使用图神经网络

在本节中,将涵盖以下主要内容: 为什么使用图?为什么学习图?为什么使用图神经网络?为什么使用图? 首先需要回答的问题是:为什么对图感兴趣?图论是对图进行数学研究的学科,它已经成为理解复杂系统和关系的基本工具。图是一种将节点(也称为顶点)和连接这些节点的边的集…

go语言的高级特性

go语言调用C语言 go tool cgo main.go

MySQL误删数据 回滚

前言 生产环境数据库不允许删除表&#xff0c;可以将表修改成 XXX_to_delete 如果误删简单数据&#xff0c;可以考虑使用binlog恢复 一、查看命令 1.查看binlog是否开启 show variables like log_bin;切换到MySQL安装目录,查看mysqlbinlog日志文件 2.查看所有 binlog 日志…

网络技术学习十二:子网划分

子网划分 A类地址 ⑴ A类地址第1字节为网络地址&#xff0c;其它3个字节为主机地址。另外第1个字节的最高位固定为0。 ⑵ A类地址范围&#xff1a;1.0.0.1到126.255.255.254。 ⑶ A类地址中的私有地址和保留地址&#xff1a; ①10.0.0.0到10.255.255.255是私有地址&#xff0…

AIGC - 生成模型及其应用

AIGC - 生成模型及其应用 0. 前言1. 生成模型2. 生成模型与判别模型的区别2.1 模型对比2.2 条件生成模型2.3 生成模型的发展2.4 生成模型与人工智能 3. 生成模型示例3.1 简单示例3.2 生成模型框架 4. 表示学习5. 生成模型与概率论6. 生成模型分类小结 0. 前言 生成式人工智能 …

知识大杂烩(uniapp)

首先声明&#xff1a;不敢保证都管用&#xff0c;这是我自己实践得来的。 box-shadow: 这段 CSS 样式代码用于创建一个阴影效果&#xff0c;它是通过 box-shadow 属性来实现的。让我解释一下这段代码的含义&#xff1a; - box-shadow: 这是 CSS 的属性&#xff0c;用于添加阴影…

vue.js+nodejs家庭个人理财收支管理系统5x6nf

本收支管理系统以vue.js作为框架&#xff0c;nodejs语言&#xff0c;B/S模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块&#xff1a;用户管理、收入分类、支出分类、每日收入、每日支出等模块。 本文的组织结构如下&#xff1a; 1、绪论。综述了本文的研究背景…

Python之线性数据结构

Python之线性数据结构 线性数据结构 线性表 线性表(简称表)&#xff0c;是一种抽象的数学概念&#xff0c;是一组元素的序列的抽象&#xff0c;它由有穷个元素组成(0 个或任意个)顺序表:使用一大块连续的内存顺序存储表中的元素&#xff0c;这样实现的表称为顺序表&#xff…

优惠来袭,工业树莓派特惠季火爆进行中

为回馈各位新老用户一直以来的支持和信任&#xff0c;虹科工业树莓派特惠季强势来袭&#xff01;9月1日至12月31日期间&#xff0c;订购虹科工业树莓派RevPi Core S或RevPi Connect S型号产品&#xff0c;满足活动条件即可享超值优惠折扣&#xff01;详细活动可扫描海报下方二维…

CSS 的 Float

文档流 将窗体自上而下分成一行一行&#xff0c;并在每行中按从左至右的挨次排放元素&#xff0c;即为文档流。 文档流是 HTML 页面的底层结构&#xff0c;HTML 页面创建的元素默认都在文档流中。 块级元素 块级元素在文档流中自上向下排列&#xff08;垂直方向排列&#xf…