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

已于 2025-04-03 11:28:20 修改
阅读量864 收藏 23
点赞数 19
分类专栏： 前端基础 文章标签： typescript javascript 前端 笔记
于 2025-04-03 11:23:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41549971/article/details/146915254
版权

目录

一、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、参数装饰器

基本语法

在这里插入图片描述

前端 | （ 十三）CSS3简介及基本语法（下）| 伸缩盒模型 | 尚硅谷前端html+css零基础教程2023最新
知识库搭建ing
07-24 1584
CSS3简介及基本语法（下）| 伸缩盒模型 | 尚硅谷前端html+css零基础教程2023最新
三小时快速上手TypeScript，TS速通教程(上篇、中篇、下篇、附加篇)
无名小小卒的博客
09-28 3132
禹神：三小时快速上手TypeScript，TS速通教程(上篇、中篇、下篇，3合1笔记)，根据视频笔记整理，附加部分标注。TypeScript 、常用类型、常用语法、泛型、类、接口、装饰器等
禹神：三小时快速上手TypeScript，TS速通教程(上篇、中篇、下篇，3合1笔记)，根据视频整理
宝码香车的博客
08-22 3413
1.TypeScript由微软开发，是其于JavaScript的一个.扩展语言 2.TypeScript包含了JavaScript的所有内容，即：TypeScript是JavaScript的 3.TypeScript增加了：静态奖型检查、接口、泛型等很多，因此吏适合的开发。 4.TypeScript需要为JavaScript,然后交给浏览器成其他JavaScript运行环境执行1️⃣今非昔比的JavaScript(了解)2️⃣JavaScript中的困扰 😔1,不清不楚的数据类型 😔2.有漏涧的逻辑
TypeScript 快速上手--禹神
Xiao_die888的博客
04-15 669
TypeScript 由微软开发,是基于 JavaScript 的⼀个扩展语⾔。TypeScript 包含了 JavaScript 的所有内容,即: TypeScript 是 JavaScript 的超集。TypeScript 增加了:静态类型检查、接⼝、 泛型等很多现代开发特性,更适合⼤型项⽬ 的开发。TypeScript 需要编译为 JavaScript,然后交给浏览器或其他 JavaScript 运⾏环境执⾏。装饰器本质是一种特殊的函数。
尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程
制定持续可量化的目标，不断坚持。
03-21 1728
修改姓名
尚硅谷禹神typescript快速入门
qq_53936073的博客
09-18 1339
TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
快速上手TypeScript
qq_43457850的博客
12-18 570
js本身语法 类型太弱了 不适合 开发后端 复杂业务引入ts 代码写起来严谨 可阅读性强很多，更有利于团队开发优点：1.类型检查2.语言扩展3.类型推断机制4.代码设计，团队合作。
基于HTML、CSS、JavaScript的Vue与TypeScript综合开发实战教程设计源码
09-25
在当今快速发展的信息技术领域中，Web前端开发技术的更新迭代速度极快，对开发人员的技术要求也越来越高。项目开发不再局限于传统的HTML、CSS、JavaScript技术，而是需要更多的框架和库来提高开发效率和用户体验。...
一小时速通JavaScript模块化，涵盖CommonJS与ES6模块化
weixin_51591826的博客
10-28 1289
一小时速通JavaScript模块化，涵盖CommonJS与ES6模块化
Vue3快速上手.md
01-21
这个是禹神Vue3的最新笔记！！！
跟着禹神学Vue3.md
01-21
这个是学习禹神最新Vue课程做的笔记！！！
禹神3小时快速上手typescript
wk964269669的博客
09-16 1068
TypeScript 由微软开发，是基于 JavaScript 的⼀个扩展语⾔。TypeScript 包含了 JavaScript 的所有内容，即： TypeScript 是 JavaScript 的超集。TypeScript 增加了：静态类型检查、接⼝、 泛型等很多现代开发特性，更适合⼤型项⽬的开发。TypeScript 需要编译为 JavaScript ，然后交给浏览器或其他 JavaScript 运⾏环境执⾏。
Vue 3 官方 Hooks 的用法与实现原理
farme_guan的博客
05-22 2088
Vue 3 的 Composition API 引入了生命周期钩子（hooks），使得在函数式风格中更清晰地管理组件生命周期。本文详细介绍了官方生命周期 hooks 的使用、实现原理以及如何自定义 hooks。
JS红宝书笔记 10.11-10.16 函数
qq_47804149的博客
06-09 825
读完JS红宝书10.11-10.16节后做的笔记，包括函数表达式、递归、尾调用优化、闭包、立即调用函数表达式、私有变量等内容
盒子宽度自适应的几种方式
最新发布
qq_38295468的博客
06-12 310
盒子宽度自适应
黑马点评开发日记-用户签到
2302_81153890的博客
06-10 640
我们可以先获取本月到目前为止的所有签到记录，返回一个十进制数字。我们可以让它与1做与运算，得到该数字的最后一位。判断最后一位是否为0，为0则终止，为1则计数器+1，继续便利。把每一个bit位对应当月的每一天，形成了映射关系。用0和1标示业务状态，这种思路就称为位图（BitMap）。这样我们就用极小的空间，来实现了大量数据的表示。我们按月来统计用户签到信息，签到记录为1，未签到则记录为0.我们可以采用类似这样的方案来实现我们的签到需求。，转换为bit则是 2^32个bit位。
webpack打包vue项目
qq_45904018的博客
06-09 502
通过以上步骤，你应该能够使用 Webpack 来打包你的 Vue 项目。不过，除非你有特定的需求，否则推荐使用 Vue CLI，因为它极大地简化了整个过程，并提供了开箱即用的最佳实践配置。Vue CLI 是官方提供的一个脚手架工具，它内置了对 Webpack 的支持，并且简化了许多配置工作。如果你需要更细粒度的控制，或者已经有一个不使用 Vue CLI 的项目，你可以手动配置 Webpack。首先，确保你已经初始化了一个 npm 项目，并安装了 Vue 和 Webpack 及其相关加载器和插件。
浏览器兼容-polyfill-本地服务-优化
chestnut_orenge的博客
06-08 940
结合使用Babel和Webpack进行前端代码转换和打包。主要内容：1）使用Babel转换ES6+代码；2）配置Webpack的babel-loader处理JS/JSX文件；3）通过preset-env实现浏览器兼容性；4)引入Browserslist工具管理目标浏览器配置；5)处理React JSX和TypeScript的转换方案；6)对比ts-loader和babel-loader的优缺点，建议同时使用Babel进行代码转换和tsc进行类型检查。文中还详细说明了polyfill的
vue3 禹神笔记
05-06
### 关于Vue3禹神笔记的内容概述 禹神笔记为学习者提供了关于TypeScript的一份快速上手指南，帮助开发者更好地理解并应用TypeScript的相关概念[^1]。这份笔记不仅适合初学者入门，还能够作为长期参考资料使用。 对于Vue3而言，其设计支持向下兼容Vue2的语法结构，同时引入了许多新的特性和改进。例如，在Vue3中模板部分不再强制要求根标签的存在[^2]。这意味着开发人员可以根据实际需求自由构建更灵活的HTML结构。 #### Vue3的核心变化与功能增强 在Vue3的新特性方面，主要体现在以下几个重要领域： - **Options API 和 Composition API** Options API 是传统方式定义组件逻辑的方法；而Composition API 则提供了一种更加模块化的方式来组织代码，尤其适用于复杂业务场景下的状态管理[^2]。 - **组件间通信机制的变化** Vue3 对比Vue2进行了多项调整来改善组件间的交互体验。具体来说： - 原有的事件总线已被移除，推荐采用第三方库`mitt`实现类似的跨组件通讯能力。 - 数据存储解决方案由Vuex升级至Pinia，后者具备更强的功能扩展性以及更好的 TypeScript 支持。 - `.sync`修饰符被整合进了 `v-model` 中统一处理。 - `$listeners` 的内容现在全部归入 `$attrs` 下面进行管理。 - 不再保留对子组件直接访问的支持（即取消了 `$children` 属性）。这些改动旨在简化框架内部运作流程的同时提升性能表现[^3]。 #### 注册全局资源实例演示 以下是通过Vue3注册全局组件的一个简单例子： ```javascript // 定义一个名为 MyButton 的全局按钮组件 app.component('MyButton', { data: () => ({ count: 0, }), template: '<button @click="count++">Clicked {{ count }} times.</button>', }); // 同样也可以创建自定义指令用于自动聚焦输入框等功能 app.directive('focus', { mounted(el) { el.focus(); }, }); ``` 以上展示了如何利用Vue3新增加或者改良后的API完成一些基础操作[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值