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

网站备案 教程广州花都区网站建设

news 2025/11/4 12:55:20
网站备案 教程,广州花都区网站建设,熊掌号怎么做网站跳转链接,视网站亏损了为什么还做目录 一、TS简介二、为什么需要TS1、今非昔比的 JavaScript(了解)2、JavaScript 中的困扰3、在TS中不用运行就有提示4、静态类型检查 三、TS编译四、类型声明五、类型推断六、类型总览1、JS中数据类型2、TS中数据类型3、注意点 七、常用类型与语法1、any2、unknown3、never4、v…

目录

  • 一、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/560621.html

相关文章：

  • FPC-40P-05转接板-嘉立创EDA设计
  • Java核心概念深度解析：从包装类到泛型的全面指南
  • 灵途科技亮相NEPCON ASIA 2025 以光电感知点亮具身智能未来
  • flash-attn安装过程中编译错误
  • 世界最受欢迎的免费架站平台经营网站 备案信息
  • 7.1 阴影贴图
  • Elastic AI agent builder 介绍（三）
  • React18中在有路由的情况下父组件如何给子组件传递数据？
  • 边缘计算和云计算有什么区别？
  • 做哪种网站流量大嵌入式软件开发工程师工作内容
  • 【第二十周】机器学习笔记09
  • Linux定时任务：crontab使用教程（附案例）
  • 网站建设配色方案wordpress对接静态网页
  • Instant Mail临时邮箱v7.3.0 最新解锁版
  • MPK（Mirage Persistent Kernel）源码笔记（5）--- 执行引擎
  • 微网站菜单网站开发用哪个框架
  • 【Cache缓存】基本概念
  • 数据结构：单链表(1)
  • 4.2 【2018统考真题】
  • swoole怎么做直播网站网站的安全维护
  • 学做ps的软件的网站新网站百度收录要几天
  • Redis数据结构命令
  • 【Dify】通过Docker-Compose的安装部署（Linux系统）
  • SEO优化学习指南
  • betaflight基于自制特殊固件配置文件的 F405 飞控固件升级与配置迁移指南（附 AI 沟通命令适配技巧）
  • 通过条形码获取对应商品信息python程序
  • LaTeX基础使用
  • 【Linux】基础指令（4）：基础指令热键shell运行原理
  • [Dify 实战] 搭建企业内网知识库系统：Dify 自托管部署全攻略
  • LVS 负载