当前位置： 首页 > news >正文

禹神：三小时快速上手TypeScript，TS速通教程(上篇、中篇、下篇，装饰器)，根据视频整理

news 2025/7/7 18:21:57

目录

  • 一、TS简介
  • 二、为什么需要TS
    • 1、今非昔比的 JavaScript(了解)
    • 2、JavaScript 中的困扰
    • 3、在TS中不用运行就有提示
    • 4、静态类型检查
  • 三、TS编译
  • 四、类型声明
  • 五、类型推断
  • 六、类型总览
    • 1、JS中数据类型
    • 2、TS中数据类型
    • 3、注意点
  • 七、常用类型与语法
    • 1、any
    • 2、unknown
    • 3、never
    • 4、void
    • 5、object
      • ①声明对象类型
      • ②声明函数类型
      • ③声明数组类型
    • 6、tuple（元组）
    • 7、enum（枚举）
      • ①数字枚举
      • ②字符串枚举
      • ③常量枚举
    • 8、type （自定义类型）
      • ①基本用法
      • ②联合类型
      • ③交叉类型
    • 9、一种特殊情况
    • 10、复习类相关知识
    • 11、属性修饰符
      • ①public修饰符
      • ②属性的简写形式
      • ③protected修饰符
      • ④private修饰符
      • ⑤readonly修饰符
    • 12、抽象类
    • 13、interface（接口）
      • ①定义类结构
      • ②定义对象结构
      • ③定义函数结构
      • ④接口之间的继承
      • ⑤接口自动合并（可重复定义）
    • 14、一些相似概念的区别
      • ①interface和type的区别
      • ②interface和抽象类的区别
  • 八、泛型
  • 九、类型声明文件
  • 十、TS装饰器
    • 1、简介
    • 2、类装饰器
      • ①. 基本语法
      • ②. 应用举例
      • ③. 关于返回值
      • ④. 关于构造类型
      • ⑤. 替换被装饰的类
    • 3、装饰器工厂
    • 4、装饰器组合
    • 5、属性装饰器
      • ①基本语法
      • ②关于属性遮蔽
      • ③应用举例
    • 6、方法装饰器
      • ①基本语法
      • ②应用举例
    • 7、访问器装饰器
      • ①基本语法
      • ②应用距离
    • 8、参数装饰器
      • 基本语法

一、TS简介

  1. TypeScript 由微软开发，是基于 JavaScript 的一个扩展语言。
  2. TypeScript 包含了 JavaScript 的所有内容，即:Typescript 是 Javascript 的超集。
  3. TypeScript 增加了:静态类型检查、接口、泛型等很多现代开发特性，因此更适合大型项目的开发。
  4. TypeScript 需要编译为 JavaScript，然后交给浏览器或其他 JavaScript 运行环境执行。

二、为什么需要TS

1、今非昔比的 JavaScript(了解)

JavaScript 当年诞生时的定位是浏览器脚本语言而且代码量很少。用于在网页中嵌入一些简单的逻辑随着时间的推移，JavaScript 变得越来越流行，如今的 JavaScript 已经可以全栈编程了。
现如今的 JavaScript 应用场景比当年丰富的多代码量也比当年大很多，随便一个JavaScript 项目的代码量，可以轻松的达到几万行，甚至十几万行!然而 JavaScript 当年“出生简陋”，没考虑到如今的应用场景和代码量，逐渐的就出现了很多困扰。

2、JavaScript 中的困扰

  1. 不清不楚的数据类型
    在这里插入图片描述
  2. 有漏洞的逻辑
    在这里插入图片描述
  3. 访问不存在的属性
    在这里插入图片描述
  4. 低级的拼写错误
    在这里插入图片描述
    …

3、在TS中不用运行就有提示

  1. 不清不楚的数据类型
    在这里插入图片描述

  2. 有漏洞的逻辑
    在这里插入图片描述

  3. 访问不存在的属性
    在这里插入图片描述

  4. 低级的拼写错误
    在这里插入图片描述

…

4、静态类型检查

在代码运行前进行检查，发现代码的错误或不合理之处，减小运行时异常的出现的几率，此种检查叫『静态类型检查』，TypeScript 和核心就是『静态类型检查』，简言之就是把运行时的错误前置。
同样的功能，TypeScript 的代码量要大于JavaScript，但由于 TypeScript 的代码结构更加清晰，在后期代码的维护中 TypeScript 却远胜于JavaScript。

三、TS编译

浏览器不能直接运行 TypeScript 代码，需要编译为 JavaScript 再交由浏览器解析器执行。

  1. 命令行编译
    在这里插入图片描述
  2. 自动化编译
    在这里插入图片描述
  3. tsconfig.json配置文件
    在这里插入图片描述
    在这里插入图片描述

四、类型声明

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

五、类型推断

在这里插入图片描述

六、类型总览

1、JS中数据类型

在这里插入图片描述

2、TS中数据类型

在这里插入图片描述

3、注意点

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

七、常用类型与语法

1、any

在这里插入图片描述

2、unknown

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、never

在这里插入图片描述

4、void

在这里插入图片描述
在这里插入图片描述
3. 区别
在这里插入图片描述
在这里插入图片描述

5、object

在这里插入图片描述
在这里插入图片描述

①声明对象类型

在这里插入图片描述

②声明函数类型

在这里插入图片描述

③声明数组类型

在这里插入图片描述

6、tuple（元组）

在这里插入图片描述

7、enum（枚举）

在这里插入图片描述

①数字枚举

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

②字符串枚举

在这里插入图片描述

③常量枚举

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8、type （自定义类型）

①基本用法

在这里插入图片描述

②联合类型

在这里插入图片描述

③交叉类型

在这里插入图片描述
在这里插入图片描述

9、一种特殊情况

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10、复习类相关知识

在这里插入图片描述
在这里插入图片描述

11、属性修饰符

在这里插入图片描述

①public修饰符

在这里插入图片描述

②属性的简写形式

在这里插入图片描述

③protected修饰符

在这里插入图片描述
在这里插入图片描述

④private修饰符

在这里插入图片描述
在这里插入图片描述

⑤readonly修饰符

在这里插入图片描述

12、抽象类

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13、interface（接口）

在这里插入图片描述

①定义类结构

在这里插入图片描述

②定义对象结构

在这里插入图片描述

③定义函数结构

在这里插入图片描述

④接口之间的继承

在这里插入图片描述

⑤接口自动合并（可重复定义）

在这里插入图片描述

14、一些相似概念的区别

①interface和type的区别

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

②interface和抽象类的区别

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

八、泛型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

九、类型声明文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

拓展：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

十、TS装饰器

1、简介

在这里插入图片描述

2、类装饰器

①. 基本语法

类装饰器是一个应用在类声明上的函数，可以为类添加额外的功能，或添加额外的逻辑。

在这里插入图片描述
在这里插入图片描述

②. 应用举例

需求:定义一个装饰器，实现 Person 实例调用 tostring 时返回 JS0N.stringify 的执行结果。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

③. 关于返回值

在这里插入图片描述

④. 关于构造类型

在 TypeScript 中， Function 类型所表示的范围十分广泛，包括:普通函数、箭头函数、方法等等。但并非 Function 类型的函数都可以被 new 关键字实例化，例如箭头函数是不能被实例化的，那么TypeScript 中概如何声明一个构造类型呢?有以下两种方式:

  • 仅声明构造类型
    在这里插入图片描述
  • 声明构造类型+指定静态属性
    在这里插入图片描述

⑤. 替换被装饰的类

对于高级一些的装饰器，不仅仅是覆盖一个原型上的方法，还要有更多功能，例如添加新的方法和状态。需求:设计一个 LogTime 装饰器，可以给实例添加一个属性，用于记录实例对象的创建时间，再添加一个方法用于读取创建时间。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、装饰器工厂

装饰器工厂是一个返回装饰器函数的函数，可以为装饰器添加参数，可以更灵活地控制装饰器的行为。

需求:定义一个 LogInfo 类装饰器工厂，实现 Person 实例可以调用到 introduce 方法，且 introduce中输出内容的次数，由 LogInfo 接收的参数决定。

在这里插入图片描述

4、装饰器组合

装饰器可以组合使用，执行顺序为:先【由上到下】的执行所有的装饰器工厂，依次获取到装饰器，然后再【由下到上】执行所有的装饰器
在这里插入图片描述
在这里插入图片描述

5、属性装饰器

①基本语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

②关于属性遮蔽

在这里插入图片描述

如下代码中:当构造器中的 this.age = age 试图在实例上赋值时，实际上是调用了原型上 age 属性的 set 方法。

在这里插入图片描述

③应用举例

需求:定义一个 state 属性装饰器，来监视属性的修改。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

6、方法装饰器

①基本语法

在这里插入图片描述

②应用举例

需求:
1.定义一个 Logger 方法装饰器，用于在方法执行前和执行后，均追加一些额外逻辑。
2.定义一个 Validate 方法装饰器，用于验证数据。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7、访问器装饰器

①基本语法

在这里插入图片描述

②应用距离

需求:对 weather 类的 temp 属性的 set 访问器进行限制，设置的最低温度-58 ，最高温度 58

在这里插入图片描述

在这里插入图片描述

8、参数装饰器

基本语法

在这里插入图片描述

http://www.dtcms.com/a/109218.html

相关文章：

  • Windows查重工具，强烈推荐大家收藏！
  • 前端接收客户端返回的token值使用pinia持久化保存token
  • 元素定位-xpath
  • verl单机多卡与多机多卡使用经验总结
  • MCP的基本组成部分有哪些？MCP Servers服务器起到什么作用？
  • Jetpack Compose 状态管理指南：从基础到高级实践
  • 机器学习算法分类全景解析：从理论到工业实践（2025新版）
  • Electron读取本地Json文件（Win、Mac）
  • JSVMP逆向实战：原理分析与破解思路详解
  • day21 学习笔记
  • 【SPP】蓝牙链路控制（LC）在SPP中互操作性深度解析
  • Cron表达式
  • 什么是混杂模式？为什么 macvlan 依赖它
  • B2B2C商城系统开发：从规划到上线的全流程指南
  • 函数柯里化（Currying）介绍（一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术）
  • 数字孪生在智慧城市中的前端呈现与 UI 设计思路
  • CentOS 7 镜像源失效解决方案（2025年）
  • 【Mysql】之索引详解
  • 游戏无法启动？XINPUT1_3.dll 丢失的终极解决方案
  • 国产替代新选择：CCLink IE与EtherCAT网关在制药行业的应用，配置详解
  • python之 “__init__.py” 文件
  • DeepSeek-R1 面试题汇总
  • SAP-ABAP：SAP ABAP UPDATE 语句用法详解
  • 如何像母语一样学习英语
  • VMware ESXi：企业级虚拟化平台详解
  • MySQL-- 函数（单行函数）: 日期和时间函数
  • Linux内核TCP/IP协议栈中的设计模式：从面向对象到系统级软件的跨界实践
  • 数据结构——顺序表
  • 思维链（Chain-of-Thought, CoT）与强化学习区别
  • Java基础之反射的基本使用