TypeScript详解

news/2024/7/25 21:28:54/文章来源:https://blog.csdn.net/cx18333/article/details/139218528

文章目录

      • 一.TS 基础概念
        • 1.什么是TS
        • 2.TS基础类型与写法
        • * boolean string number array null undefined
        • * tuple - 元组
        • * enum - 枚举
        • * any unknown void
        • * object | Object | {} - 对象
      • 二. 接口 - interface
      • 三.交叉类型
      • 四.断言 - 类型声明,转换
      • 五.类型守卫 -Type Guards
      • 六.TS进阶
        • 1.泛型(Generics) - 重用
        • 2.装饰器 - decorator

一.TS 基础概念

1.什么是TS
  • 对比原理

  • ts是 js 的一个超集,在原有基础上添加了

  • 可选静态类型

  • 基于类的面向对象编程

  1. 编写项目 - 更利于架构维护
  2. 自主检测 - 编译期间检测
  3. 类型检测 - 支持了动态和静态类型检测;ts不是强类型语言=》本质上还是存在类型转换
  4. 运行流程 - 依赖编译
  5. 复杂特性 - 模块化,泛型,接口
2.TS基础类型与写法
* boolean string number array null undefined
// es
let isEnable = true;
let class = "ts";
let classNum = 2;
let classArr = ["basic","execute"];// ts
let isEnable:boolean = true;
let class:string = "ts";
let classNum:number = 2;
// 数组的两种写法
let classArr:string[]= ["basic","execute"];
let classArr:Array<string> = ["basic","execute"];
* tuple - 元组

数组的搭配比较多样,用来声明数组中有多种类型时使用

let tupleType:[string,boolean] tupleType =["ts",true]
* enum - 枚举
// 数字枚举- 默认从零开始,依次递增
enum Score {BAD,NG,GOOD,PERFECT
}
let score:Score = Score.BAD;// 字符串类型
enum Score {BAD="BAD",NG="NG",GOOD="GOOD",PERFECT="PERFECT"
}// 反响映射
enum Score {BAD,NG,GOOD,PERFECT
}
let scoreName = Score[0]; // "BAD",因为默认依次递增
let scoreValue = Score["BAD"];// 0// 异构 (数字和字符串都有)
// 字符串设置什么就是什么
// 数字类型依据上一个加一
enum Score {A, //0B, //1C='C',D="D",E=6,F // 7
}
* any unknown void
// 输入
//any - 绕过所有检查 => 类型检测和编译筛查全部失效
let anyValue:any =123;anyValue ="anyValue";// unknown - 绕过赋值检查=> 禁止更改传递
// 传递
let unkonwnValue:unknown;unknownValue="unknownValue";let value1:unknown =unknownValue;//ok
let value2:any=unknownValue;//ok
let value3:boolean = unknownValue;/nok// 返回
// void - 声明函数返回值 不返回任何值
function voidFunction():void{console.lg("no return")
}// nerver - 永不返回
function error(msg:string):never{throw new Error(msg)
}
function longlongloop():never{while(true)
}
* object | Object | {} - 对象
// object - 非原始类型
interface ObjectConstrutor {create(o:object | null):any;
}const proto = {};
Object.create(proto);//ok// Object  - 原型属性
// Object.prototype 上的属性
interface Object {constructor:Function;toString():string;valueOf():Object
}// {} - 空对象 - 没有成员的对象
const a = {} as A; // 通过断言来设置
a.class = "es"; 
a.name=30; // {} 表示空对象,赋值会抛出异常

二. 接口 - interface

在TypeScript中,接口是一种定义对象形状的方式,它描述了对象应该有哪些属性和方法,但并不直接提供这些属性和方法的实现。接口主要用于确保类或其他结构(如对象字面量)符合特定的契约

  1. 定义属性:接口可以定义对象的属性类型,但不包括属性值。
  2. 定义方法:接口可以定义对象的方法,但不包括方法的实现
  3. 只读属性:使用 readonly 关键字可以定义只读属性,即这些属性只能做对象被创建时被赋值,之后不能被修改
  4. 继承接口:一个接口可以继承另一个或者多个接口,从而继承它们的属性和方法
interface Class {name:string;time:number
}
let course:Class = {name:"ts",time:2
}//只读
interface Class {readonly name:string;time:number
}
// 任意
interface Class {name:string;time:number[propName:string]:any
}
// 面试题:ts 和 js的引用的不同
let arr:number[] = [1,2,3,4];
let ro:ReadonlyArray<number> = arr;ro[0] = 12; //Error - 只读状态不可赋值
ro.push(5); //Error - 增加
ro.length = 100; //Error - 长度改写arr = ro;//Error - 覆盖//定义方法
interface Greeter {greet(message: string): void;
}class PersonGreeter implements Greeter {greet(message: string) {console.log(`Hello, ${message}`);}
}//继承
interface Named {name:string;
}
interface Person extends Named{age:number
}const person:Person = {name:"张三"age:18
}

三.交叉类型

在TypeScript中,交叉类型是一种组合多个类型到一个单一类型的方式。通过交叉类型,你可以创建一个新的类型,这个类型具有所有被组合类型的特性。当一个对象具有多个类型的属性时通过&符号来定义的

  • 交叉类型和运算符里面的 与( && ) 是一样的,既要 … 又要 … 还要
  • 可以把两个对象合并到一个对象
// 合并
interface A {x:D}
interface B {x:E}
interface C {x:F}interface D {d:boolean}
interface E {e:string}
interface F {f:number}type ABC = A & B & C;let abc:ABC ={x:{d:false,e:"class",f:5}
}// 合并冲突
interface A {c:string;d:string
}
interface B {c:number;d:string
}
type AB = A & B;
// 合并关系是并且 => c:never

四.断言 - 类型声明,转换

在TypeScript中,断言是一种告诉编译器我们对某个表达式类型的明确预期的方式。通过使用断言,我们可以为编译器提供额外的信息,以确保在编译时能够正确地处理类型。断言不仅用于声明变量的类型,还可以用于在类型之间进行显式转换,从而确保代码的类型安全性。

// 尖括号
let anyValue:any = 'hi ts';
// 当anyValue是 string 时去取length
let anyLength:number = (<string>anyValue).length; //阶段性声明;// as 声明
let anyLength:number = (anyValue as string).length; //阶段性声明;// 非空判断 - 非空断言操作符 !
// 非空断言操作符,用于告知编译器我确定这个值是非空的,不需要再进行类型检查
type ClassTime = () => number;const start = (classTime:ClassTime | undefined)=>{let num = classTime!(); //确认一定不会为空
}

五.类型守卫 -Type Guards

在TypeScript中,类型守卫是一种特殊的表达式,它允许你执行运行时检查以缩小一个值的类型范围。类型守卫可以用于确保一个值是某种特定的类型,或者在多种类型之间进行区分。

typeof | instanceof 类型守卫

在TypeScript中,typeof 和 instanceof 运算符被特殊对待,并被认为是类型守卫。当它们用于类型检查时,TypeScript会缩小变量的类型范围。

interface Teacher {name:string;courses:string[];
}
interface Student{name:string;startTime:Date;
}type Class = Teacher | Studentfunction startCourse(cls:Class){if('courses' in cls){// teacher}if("startTime" in cls){// student}
}function startCourse(cls:Class){if(cls intanceof Teacher){// teacher}if(cls intanceof Student){// student}
}function startCourse(name:string,score:string | number){if(typeof score === "number"){// teacher}if(typeof score === "string"){// student}
}

六.TS进阶

1.泛型(Generics) - 重用

在 TypeScript 中,泛型是一种允许你为组件(如类、接口和函数)创建可复用的类型的方式,而无需在每次使用组件时都明确指定类型。泛型提供了一种创建可重用组件的方式,这些组件可以工作于多种数据类型。

  1. 泛型函数:泛型函数是指在调用指定类型参数的函数。在函数后面使用(其中 T 是类型变量)
  2. 泛型类:泛型类是在类定义中使用类型变量的类
  3. 泛型接口:中接口定义中引入类型变量
  4. 泛型约束:定义泛型时,可以对泛型参数添加一些约束,以确保它符合某些结构。可以通过中类型参数上设置extends 约束来实现
  5. 类型推断与默认类型:typeScript的类型推断机制可以自动推断泛型类型参数;泛型类型可以设置默认类型
//泛型函数
function startClass<T,U>(name:T,score:U):T{return name + score
}console.log(startClass(<stringnumber>('yy',5)))function startClass<T,U>(name:T,score:U):string{return `${name}${score}`
}function startClass<T,U>(name:T,score:U):T{return (name + String(score)) as any as T;
}// 泛型接口
interface GenericIdentityFn<T> {(arg: T): T;
}
function identityFn<T>(arg: T): T {return arg;
}
let myIdentity: GenericIdentityFn<number> = identityFn;// 泛型约束
interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);  // 现在我们可以访问.length属性了return arg;
}// 使用泛型约束
loggingIdentity({length: 10, value: 3});
2.装饰器 - decorator

在 TypeScript 中,装饰器是一种特殊类型的声明,它可以被附加到类声明、方法、访问符、属性或参数上。装饰器使用 @expression 的形式,其中 expression 必须在运行时求值为一个函数,它将在编译时调用,

装饰器可以使用在许多不同的上下文中,但它们的主要用途是修改类的行为,为类添加元数据,或者为类、方法、属性等提供额外的功能。

function Roo(target:Function):void{// 拿到的类target.prototype.startClass = function():void{// 逻辑}
}// 类装饰器
@@Roo
class Course {constructor(){// 业务逻辑}
}// 属性装饰器
function nameWrapper(target:any,key:string){// 逻辑处理Object.defineProerty(target,key){// 数据劫持}
}class Course {constructor(){// 业务逻辑}@nameWrapperpublic name:string
}

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

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

相关文章

深度学习-转置卷积

转置卷积 转置卷积&#xff08;Transposed Convolution&#xff09;&#xff0c;也被称为反卷积&#xff08;Deconvolution&#xff09;&#xff0c;是深度学习中的一种操作&#xff0c;特别是在卷积神经网络&#xff08;CNN&#xff09;中。它可以将一个低维度的特征图&#x…

echarts学习篇

一、使用echarts 1.引入 Apache ECharts <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <!-- 引入刚刚下载的 ECharts 文件 --> <script src"echarts.js"></script> </head> </html> 2.…

数据结构---链表

1、链表分类 对于链表可以分为几种&#xff0c;不同的分类对应不同的应用场景&#xff0c;其中&#xff0c;双向循环链表和单向链表最常用。 1.1链表按照有头无头分类 也就是说有无哨兵位&#xff0c;哨兵位&#xff0c;是一个开辟的空间&#xff0c;但是不放置数据&#xf…

AURIX TC3xx单片机介绍-启动过程介绍1

从各个域控制器硬件解决方案来看,MPU可能来自多个供应商,有瑞萨,有NXP等,但对于MCU来说,基本都采用英飞凌TC3xx。 今天我们就来看一下TC3xx的启动过程,主要包含如下内容: uC上电过程中,会经过一个上电时序,从复位状态“脱离”出来;Boot Firmware是复位后第一个执行的…

金职优学:分析央国企面试如何通关?

在当今竞争激烈的就业市场中&#xff0c;中央和国有企业&#xff08;以下简称“央国企”&#xff09;的面试机会对求职者来说是非常有吸引力的。这些企业通常拥有稳定的发展前景、良好的薪酬福利和广阔的职业发展空间。但是&#xff0c;要想成功通过央国企的面试&#xff0c;求…

YOLOv8+PyQt5西红柿成熟度检测系统完整资源集合(yolov8模型,从图像、视频和摄像头三种路径识别检测,包含登陆页面、注册页面和检测页面)

西红柿成熟度检测&#xff08;https://mbd.pub/o/bread/mbd-ZpWbk5ly&#xff09;_哔哩哔哩_bilibili 资源包含可视化的西红柿成熟度检测系统&#xff0c;基于最新的YOLOv8训练的西红柿成熟度检测模型&#xff0c;和基于PyQt5制作的可视化西红柿成熟度检测系统&#xff0c;包含…

加速模型训练 GPU cudnn

GPU的使用 在定义模型时&#xff0c;如果没有特定的GPU设置&#xff0c;会使用 torch.nn.DataParallel 将模型并行化&#xff0c;充分利用多GPU的性能&#xff0c;这在加速训练上有显著影响。 model torch.nn.DataParallel(model).cuda() cudnn 的配置&#xff1a; cudnn.…

Habicht定理中有关子结式命题3.4.6的证明

个人认为红色区域有问题&#xff0c;因为 deg ⁡ ( ϕ ( S j ) ) r \deg{\left( \phi\left( S_{j} \right) \right) r} deg(ϕ(Sj​))r&#xff0c;当 i ≥ r i \geq r i≥r时&#xff0c; s u b r e s i ( ϕ ( S j 1 ) , ϕ ( S j ) ) subres_{i}\left( \phi(S_{j 1}),\p…

景源畅信电商:做抖店的成本高吗?

在当今数字化时代&#xff0c;抖音不仅仅是一个分享短视频的平台&#xff0c;更是一个充满商机的市场。随着抖音用户量的激增&#xff0c;越来越多的商家和个人开始关注在抖音上开设店铺&#xff0c;即所谓的“抖店”。那么&#xff0c;做抖店的成本高吗?这个问题困扰着许多初…

《python编程从入门到实践》day40

# 昨日知识点回顾 编辑条目及创建用户账户 暂没能解决bug&#xff1a; The view learning_logs.views.edit_entry didnt return an HttpResponse object. It returned None instead.# 今日知识点学习 19.2.5 注销 提供让用户注销的途径 1.在base.html中添加注销链接 …

数据仓库ETL

小白的数据仓库学习笔记 2024/5/20 18:25 文章目录 ETLdim打开创建项目&#xff08;选这个&#xff0c;这个是做etl的&#xff09;建立元数据的连接同样的&#xff0c;建立与数据仓库的连接新建ssis包序列容器全量etl增量etl建立sql任务双击打开&#xff0c;设置连接、内容 双击…

linux 阿里云服务器安装ImageMagick和php扩展imagick

操作系统版本 Alibaba Cloud Linux 3.2104 LTS 64位 # 1.安装ImageMagick yum install -y ImageMagick ImageMagick-devel # 没有pecl要先安装pecl 和头文件 sudo yum install php-devel # 2.pecl 安装扩展 pecl install imagick #寻找所有php.ini文件 find / -name php.…

Word整理论文参考文献

1.安装Zotero软件 2.安装Zotero的Chrome网站插件&#xff0c;并将插件固定到浏览器 3.安装Word的Zotero插件 4.在DBLP网站https://dblp.org/search 搜索需要添加的参考文献->点击BibTex->点击网页右上角的Zotero符号&#xff08;即第二步所指的符号&#xff09;->至…

《python本机环境多版本切换》-两种方式以及具体使用--venv/pyenv+pycharm测试

阿丹&#xff1a; source myenv/bin/activate 在开发使用rasa的时候发现自己安装的python环境是3.12的&#xff0c;和rasa不兼容&#xff0c;所以实践一下更换多python环境。 使用虚拟环境 在Python中使用虚拟环境来切换Python版本是一个常见的做法&#xff0c;这可以帮助你…

创新实训2024.05.28日志:记忆化机制、基于MTPE与CoT技术的混合LLM对话机制

1. 带有记忆的会话 1.1. 查询会话历史记录 在利用大模型自身能力进行对话与解答时&#xff0c;最好对用户当前会话的历史记录进行还原&#xff0c;大模型能够更好地联系上下文进行解答。 在langchain chat chat的chat函数中&#xff0c;通过实现langchain框架提供的ChatMemo…

Redisson集成SpringBoot

前言&#xff1a;Redisson集成SpringBoot主要有两种方式&#xff0c;一个是使用redisson-spring-boot-starter依赖&#xff08;优先推荐&#xff09;&#xff0c;毕竟springboot主打的就是约定大于配置&#xff0c;这个依赖就是为springboot准备的。 再一种方式就是引入rediss…

springboot+vue+mybatis基于java web的公益网站的设计与实现+jsp+PPT+论文+讲解+售后

现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本公益网站就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&#xff0c;使…

第八大奇迹

目录 题目描述 输入描述 输出描述 输入输出样例 示例 输入 输出 运行限制 原题链接 代码思路 题目描述 在一条 R 河流域&#xff0c;繁衍着一个古老的名族 Z。他们世代沿河而居&#xff0c;也在河边发展出了璀璨的文明。 Z 族在 R 河沿岸修建了很多建筑&#xff0c…

指纹识别经典图书、开源算法库、开源数据库

目录 1. 指纹识别书籍 1.1《精通Visual C指纹模式识别系统算法及实现》 1.2《Handbook of Fingerprint Recognition》 2. 指纹识别开源算法库 2.1 Hands on Fingerprint Recognition with OpenCV and Python 2.2 NIST Biometric Image Software (NBIS) 3. 指纹识别开源数…

超级逼真人脸生成,Stable Diffusion的3个关键技巧

学习如何使用基础模型生成图像&#xff0c;如何升级到Stable Diffusion XL模型以提高图像质量&#xff0c;以及如何使用自定义模型生成高质量的人物肖像。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 简介 你是否曾想过&#xff0c;为什…