【TS】进阶

news2024/11/25 3:42:24

一、类型别名

类型别名用来给一个类型起个新名字。

type s = string;
let str: s = "123";

type NameResolver = () => string;: 
// 定义了一个类型别名NameResolver,它是一个函数类型。这个函数没有参数,返回值类型为string。这意味着任何被标记为NameResolver的变量都将是一个无参函数,它返回一个字符串。

类型别名常用于联合类型。

type all = string | number | boolean;
let a: all = 2323;

二、字符串字面量类型

type stringType = "ssss" | "wwww" | "rrrr";
let userName: stringType = "rrrr";
let userName2: stringType = "@@@"; // Type '"@@@"' is not assignable to type 'stringType'.

注意,类型别名与字符串字面量类型都是使用 type 进行定义。

三、元组 Tuple

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;

tom[0].slice(1);
tom[1].toFixed(2);

但是当直接对元组类型的变量进行初始化或者赋值的时候,需要提供所有元组类型中指定的项。

let tom: [string, number];
tom = ['Tom', 25];

let tom: [string, number];
tom = ['Tom']; // Property '1' is missing in type '[string]' but required in type '[string, number]'.

当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型:

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true); // Argument of type 'true' is not assignable to parameter of type 'string | number'.

四、枚举

4.1 简单例子

// 使用枚举类型给一组数值赋予名称
// 可以通过 名称去拿值,也可以通过值拿名称
enum NumberType {
  one,
  two,
  three,
}
console.log(NumberType);

在这里插入图片描述

4.2 手动赋值

我们也可以给枚举项手动赋值:

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

不手动赋值,就默认是从0开始,后面递增
在这里插入图片描述
如果未手动赋值的枚举项与手动赋值的重复了,TypeScript 是不会察觉到这一点的:

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

手动赋值的枚举项可以不是数字,此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的):

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
var Days;
(function (Days) {
    Days[Days["Sun"] = 7] = "Sun";
    Days[Days["Mon"] = 8] = "Mon";
    Days[Days["Tue"] = 9] = "Tue";
    Days[Days["Wed"] = 10] = "Wed";
    Days[Days["Thu"] = 11] = "Thu";
    Days[Days["Fri"] = 12] = "Fri";
    Days[Days["Sat"] = "S"] = "Sat";
})(Days || (Days = {}));

当然,手动赋值的枚举项也可以为小数或负数,此时后续未手动赋值的项的递增步长仍为 1:

enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true

4.3 常数项和计算所得项

枚举项有两种类型:常数项(constant member)和计算所得项(computed member)。

前面我们所举的例子都是常数项,
一个典型的计算所得项的例子:

enum Color {Red, Green, Blue = "blue".length};

注意,计算所得项必须是最后一项,后面不要再有东西了,因为后面计算不出来
除非后面的有手动赋值

enum Color {
  red,
  blue = "blue".length,
  green = 4,
}

4.4 常数枚举

常数枚举是使用 const enum 定义的枚举类型:

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

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员。

上例的编译结果是:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

假如包含了计算成员,则会在编译阶段报错:

const enum Color {Red, Green, Blue = "blue".length};

// index.ts(1,38): error TS2474: In 'const' enum declarations member initializer must be constant expression.

但是这种是可以的:

const enum Color {Red, Green, Blue = 11};

4.5 外部枚举

主要用在声明文件
外部枚举(Ambient Enums)是使用 declare enum 定义的枚举类型:

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

之前提到过,declare 定义的类型只会用于编译时的检查,编译结果中会被删除。

上例的编译结果是:

const enum Color {Red, Green, Blue = "blue".length};
var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

declare 定义的类型只会用于编译时的检查,编译结果中会被删除。
上例的编译结果是:

var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

同时使用 declare 和 const 也是可以的:

declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

编译结果:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

五、类

http://ts.xcatliu.com/advanced/class.html

5.1 属性和方法

// 类:描述了所创建的对象共同的属性和方法
// 实例化对象
class Person {
  // 首先定义属性
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  sayHi(str: string) {
    console.log("hi", str);
  }
}

let p = new Person("slx", 14); // new的时候,回执行构造函数
p.sayHi("slx");

5.2 继承

使用 extends 关键字实现继承,子类中使用 super 关键字来调用父类的构造函数和方法

// 通过继承,扩展现有的类
// 子类继承父类
class Animal {
  // 父类
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  sayHi(str: string) {
    console.log("hi", str);
  }
  eat(str: string) {
    console.log("吃什么呀,吃这个", str);
  }
}

// 子类
class Dog extends Animal {
  constructor(name: string, age: number) {
    super(name, age);
  }
  // 不写父类的方法,也依然可以调用
  eat(): void {
    console.log("子类的eat");
    super.eat(""); // 当然也可以在里面调用父类的方法
  }
}

const c = new Animal("猫猫", 1);
const d = new Dog("修勾", 3);
d.sayHi("修勾");
d.eat();

类与类之间的存在继承关系,通过extends继承;
子类可以通过super调用父类方法和构造函数;

5.3 存取器

通过getter和setter 可以改变属性的赋值和读取行为,控制对对象成员的访问

class Name {
  firstName: string;
  lastName: string;
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    return this.firstName + "-" + this.lastName;
  }
}

let n = new Name("张", "凌");
console.log(n);

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

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

相关文章

抱抱脸上第一的开原模型Qwen2-72B;腾讯开源人像照片生成视频的模型;Facebook开源翻译模型;智谱 AI 推出的最新一代预训练模型

✨ 1: Qwen2 Qwen2 是一种多语言预训练和指令调优的语言模型&#xff0c;支持128K上下文长度并在多项基准测试中表现优异。 Qwen2&#xff08;全称“Qwen Qwen”&#xff0c;简称Qwen&#xff09;是一个先进的大语言模型家族&#xff0c;在其前身Qwen1.5的基础上进行了重大提…

硬件I2C读写MPU6050

硬件I2C读写MPU6050 SCL接PB10&#xff0c;SDA接PB11,但是硬件I2C引脚不可以任意指定。 查询引脚定义表&#xff0c;来规划引脚。但由于PB6,7,8,9被OLEDz占用&#xff0c;不方便接线了。 可以使用I2C2引脚&#xff0c;但必须是SCL对应PB10&#xff0c;SDA对应PB11&#xff0c;…

Angular17版本集成Quill富文本编辑器

Angular17版本集成Quill富文本编辑器 前言:网上找了好多富文本资源,对应Angular17版本的且兼容的太少了,且找到不到对应的版本 自己就去网上找个兼容的免费的富文本组件 1.兼容Angular17版本的quill包 "types/quill": "^1.3.10","ngx-quill": …

[Bug]使用Transformers 微调 Whisper出现版本不兼容的bug

错误的现象 ImportError Traceback (most recent call last) <ipython-input-20-6958d7eed552> in () from transformers import Seq2SegTrainingArguments training_args Seq2SeqTrainingArguments( output_dir"./whisper-small-…

解决跨域的几种方法

解决跨域的方法主要有以下几种&#xff1a; 1.CORS&#xff08;跨域资源共享&#xff09; CORS是一种W3C规范&#xff0c;它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。 服务器通过设置响应头Access-Control-Allow-Origin来允许或拒绝跨域请求。例如&#xf…

Mintegral解析休闲游戏如何靠创意素材吸引玩家

核心玩法简单清晰、容易让人无限上头的休闲游戏&#xff0c;玩法机制一般比较明确、简单&#xff0c;如果要在短时间内吸引玩家注意&#xff0c;除了完整展示游戏流程以外&#xff0c;开发者需要在素材中设置更多亮点性的内容&#xff0c;如吸睛的剧情、爆炸性的视听效果等元素…

【操作与配置】MySQL安装及启动

【操作与配置】MySQL安装及启动 下载MySQL 进入官网&#xff0c;选择社区版下载 在windows安装 选择不登陆下载 安装MySQL 双击官方安装包 选择“Developer Default”&#xff08;默认&#xff09;即可 Execute&#xff0c;安装完成后next TCP/IP端口等&#xff0c;默认即可…

什么是专业的倾斜摄影轻量化?

眸瑞科技是一家专业从事自研3D可视化技术底层、提供三维模型轻量化服务的高新技术公司&#xff0c;从事该行业近10年&#xff0c;有着丰富的三维模型处理及开发经验。目前已向许多企事业单位提供过工厂厂区、城市地貌、铁路桥梁、高速公路、旅游景区等倾斜摄影模型轻量化处理、…

Alibbaba RocketMQ笔记

作用场景 异步解耦: 将比较耗时且不需要即时(同步)返回结果 的操作放入消息队列; 流量削峰: 历史简介 基本使用 深入了解\原理

【递归、搜索与回溯】搜索

搜索 1.计算布尔二叉树的值2.求根节点到叶节点数字之和3. 二叉树剪枝4.验证二叉搜索树5.二叉搜索树中第K小的元素6.二叉树的所有路径 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一…

【算法】深入浅出爬山算法:原理、实现与应用

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

python-小游戏-弹球对决

python-小游戏-弹球对决 需要安装pygame 代码—game-Pong.py import pygame import random# Initialize pygame pygame.init()# Set up the screen WIDTH 600 HEIGHT 400 BALL_RADIUS 20 PAD_WIDTH 10 PAD_HEIGHT 80 WHITE (255, 255, 255) PURPLE (128, 0, 128) RED…

Springboot注意点

1.Usermapper里加param注解 2.RequestParam 和 RequestBody的区别&#xff1a; RequestParam 和 RequestBody的区别&#xff1a; RequestParam 和 RequestBody 是Spring框架中用于处理HTTP请求的两个不同的注 get请求一般用url传参数&#xff0c;所以参数名和参数的值就在ur…

Office(Microsoft 365) 体验

Office 现已更名为 Microsoft 365。 Microsoft 365 是订阅服务&#xff0c;订阅期间可享受定期的功能与安全更新&#xff0c;始终使用的是的最新版本。 Microsoft 365 包含 Word、Excel、PowerPoint 等办公常用套件&#xff0c;还包括了 OneDrive、Exchange 等协作和通信工具…

视觉SLAM十四讲:从理论到实践(Chapter11:回环检测)

前言 学习笔记&#xff0c;仅供学习&#xff0c;不做商用&#xff0c;如有侵权&#xff0c;联系我删除即可 一、主要目标 1.理解回环检测的必要性。 2.掌握基于词袋的外观式回环检测。 3.通过DBoW3的实验&#xff0c;学习词袋模型的实际用途。 二、概述 VO存在误差累积&…

SpringBoot发送邮件带附件的服务如何实现?

SpringBoot发送邮件带附件的步骤&#xff1f;怎么配置邮件服务&#xff1f; SpringBoot作为一款轻量级的Java框架&#xff0c;以其便捷的配置和强大的功能受到开发者的广泛欢迎。AokSend将详细介绍如何在SpringBoot中实现发送带附件的邮件服务。 SpringBoot发送邮件带附件&am…

【全开源】Workerman在线客服系统(ThinkPHP+FastAdmin+Workerman)

Workerman在线客服系统&#xff1a;高效沟通的新选择 基于ThinkPHPFastAdminWorkerman开发的一款实时在线客服系统&#xff0c;支持多客服(不限座席)、知识库、离线留言板、离线消息、历史会话、微信小程序接入、Uni-app接入(高级授权)、用户轨迹等功能。​ &#x1f4e2; 一…

2024年全国青少信息素养大赛图形化编程挑战赛集训第一天编程题分享

大家如果不想阅读前边的比赛内容介绍,可以直接跳过:拉到底部看集训第一天题目 (一)比赛内容: 【小学低年级组】 1、图形化编程软件的使用:熟悉图形化编程软件中舞台区、角色列表区、功能区、脚本编 -3- 辑区的功能及使用。 2、基础功能模块的使用: a.运动模块:角…

day52 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

123.买卖股票的最佳时机III 关键在于至多买卖两次&#xff0c;这意味着可以买卖一次&#xff0c;可以买卖两次&#xff0c;也可以不买卖。 动态规划五部曲 1.确定dp数组以及下标的含义 一天一共就有五个状态&#xff0c; 没有操作 &#xff08;其实我们也可以不设置这个状态&a…

Qt 窗口居中显示

Qt 窗口居中显示 引言一、窗体的setGeometry函数二、计算屏幕中心然后move三、借助QRect计算四、补充知识点 引言 窗口居中可以提供良好的视觉效果、突出重点内容、提升用户导航和操作的便利性&#xff0c;有助于改善用户体验。 Qt一般情况下&#xff0c;其Mainwindow或弹出的…