TypeScript基础(一): 初识TypeScript

news/2024/10/22 5:45:07/

TS是什么?

TypeScript是微软公司开发的一种基于JavaScript语言的编程语言,

可以看做是JavaScript的超集, 即它继承了后者的全部语法, 所有JavaScript脚本都可以当作TypeScript脚本(但是可能会报错), 此外它增加了一些自己的语法。

TypeScript对JavaScript添加的最主要部分,就是一个独立的类型系统。

为什么要使用 TS ? TypeScript 相对于 JavaScript 的优势是什么?

TypeScript 的主要功能是为 JavaScript 添加类型系统。

TypeScript 引入了一个更强大、更严格的类型系统,属于静态类型语言。

(1)有利于代码的静态分析。

有了静态类型,不必运行代码,就可以确定变量的类型,从而推断代码有没有错误。这就叫做代码的静态分析。

这对于大型项目非常重要,单单在开发阶段运行静态检查,就可以发现很多问题,避免交付有问题的代码,大大降低了线上风险。

(2)有利于发现错误。

由于每个值、每个变量、每个运算符都有严格的类型约束,TypeScript 就能轻松发现拼写错误、语义错误和方法调用错误,节省程序员的时间。

(3)更好的 IDE 支持,做到语法提示和自动补全。

IDE(集成开发环境,比如 VSCode)一般都会利用类型信息,提供语法提示功能(编辑器自动提示函数用法、参数等)和自动补全功能(只键入一部分的变量名或函数名,编辑器补全后面的部分)。

(4)提供了代码文档。

类型信息可以部分替代代码文档,解释应该如何使用这些代码,熟练的开发者往往只看类型,就能大致推断代码的作用。借助类型信息,很多工具能够直接生成文档。

(5)有助于代码重构。

修改他人的 JavaScript 代码,往往非常痛苦,项目越大越痛苦,因为不确定修改后是否会影响到其他部分的代码。

类型信息大大减轻了重构的成本。一般来说,只要函数或对象的参数和返回值保持类型不变,就能基本确定,重构后的代码也能正常运行。如果还有配套的单元测试,就完全可以放心重构。越是大型的、多人合作的项目,类型信息能够提供的帮助越大。

综上所述,TypeScript 有助于提高代码质量,保证代码安全,更适合用在大型的企业级项目。这就是为什么大量 JavaScript 项目转成 TypeScript 的原因。

 

 ts 中有哪些类型?

1. **基本类型**:

- `string`:表示文本数据。

- `number`:表示数值,包括整数和浮点数。

- `boolean`:表示逻辑值 `true` 和 `false`。

- `array`:表示元素类型相同的数组,可以写作 `T[]` 或 `Array<T>`。

- `tuple`:表示已知元素数量和类型的数组,各元素类型不必相同。

:2. **联合类型**(Union Types)

- 将多个类型合并为一个类型,表示值可以是多种类型之一。例如:`type StringOrNumber = string | number`。

3. **交叉类型**(Intersection Types):

- 将多个类型合并为一个类型,表示值必须同时是所有指定的类型。例如:`type ExtendsBoth = StringOrNumber & Callable`。

4. **任意类型**(Any):

- `any` 类型表示任意类型,用于绕过类型检查。

5. **未知类型**(Unknown):

- `unknown` 类型表示任意类型,但是是一个安全的类型,需要进行类型检查后才能使用。

6. `never`:

- 表示那些永不存在的值的类型,例如总是抛出异常或根本就不会有返回值的函数表达式或箭头函数的返回值类型。

7. `void`:

- 表示没有任何类型,通常用作没有返回值的函数的返回类型。

8. `null` 和 `undefined`:

- `null` 和 `undefined` 是所有类型的子类型,可以赋值给任何类型。

9. **类型别名**(Type Aliases):

- 使用 `type` 关键字为类型创建一个别名。例如:`type Name = string`。

10. **接口**(Interfaces):

- 使用 `interface` 关键字定义对象的形状。接口可以定义函数形状、对象形状,甚至可以扩展其他接口。

11. **类类型**(Class Types):

- 类本身也具有类型,包括其成员方法和属性。

12. **枚举类型**(Enum):

- `enum` 用于定义命名的常量集合。

13. **类型字面量**(Type Literals):

- 直接使用字面量定义类型,例如:`type EmptyObject = { [K in keyof any]: any }`。

14. **映射类型**(Mapped Types):

- 使用 `keyof` T 获取 T 的所有键,然后构造一个新类型,其键与 T 相同,但类型不同。

15. **条件类型**(Conditional Types):

- 使用 `extends` 关键字在类型上进行条件判断。

16. **类型查询**(Type Queries):

- 使用 `typeof` 获取变量的类型,或者使用 `T[key]` 获取属性的类型。

17. **索引访问类型**(Indexed Access Types):

- 使用 `T[K]` 访问类型 T 的 K 索引上的类型。

18. **工具类型**(Utility Types):

- TypeScript 提供了一系列内置的工具类型,如 `Partial<T>`、`Readonly<T>`、`Pick<T, K>` 等,用于构造新类型。

19. **模板字面量类型**(Template Literal Types):

- 使用反引号(`` ` ``)和 `${expression}` 语法创建字符串字面量类型。

20. **类型断言**(Type Assertions):

- 使用 `as` 关键字手动指定一个值的类型。



any 和 unknown的区别是?

在 TypeScript 中,`any` 和 `unknown` 类型都是用来表示任意类型的值,但它们在使用上有一些重要的区别:



1. **类型安全性**:

- `any` 类型是一种类型擦除,它允许你对变量执行任何操作,而不需要进行类型检查。这意味着你可以对 `any` 类型的值做任何事情,TypeScript 编译器不会对这些操作进行任何类型检查。

- `unknown` 类型则是一种类型保留。它表示任何类型,但是当你对 `unknown` 类型的值执行操作时,必须先进行类型检查,以确保操作的安全性。这有助于 TypeScript 编译器捕获潜在的类型错误。



2. **操作限制**:

- `any` 类型的值可以直接赋值给其他类型,也可以从其他类型赋值而来,无需任何特殊处理。

- `unknown` 类型的值在赋值给其他类型或从其他类型赋值时,需要先进行类型检查或类型断言。



3. **类型检查**:

- `any` 类型的值不需要任何类型检查就可以执行任何操作。

- `unknown` 类型的值在执行操作之前,通常需要使用类型守卫(如 `typeof`、`instanceof` 或自定义类型守卫)来缩小类型的范围,或者使用类型断言来指定一个更具体的类型。



4. **最佳实践**:

- `any` 类型应该谨慎使用,因为它会跳过 TypeScript 的类型检查,这可能导致运行时错误。

- `unknown` 类型是更安全的选择,因为它强制你在使用变量之前进行类型检查,从而提高代码的类型安全性。



下面是一个简单的示例,展示 `any` 和 `unknown` 类型的区别:

let anyValue: any = "Hello";anyValue = 42; // OKanyValue.toUpperCase(); // OKanyValue.substr(2); // Error: Property 'substr' does not exist on type 'any'.let unknownValue: unknown = "Hello";unknownValue = 42; // OKif (typeof unknownValue === "string") {unknownValue.toUpperCase(); // OK} else {unknownValue.substr(2); // Error: Property 'substr' does not exist on type 'never'.}// 或者使用类型断言(unknownValue as string).toUpperCase(); // OK

在这个示例中,`anyValue` 可以直接调用任何方法,而 `unknownValue` 需要先进行类型检查。如果没有进行类型检查,尝试对 `unknownValue` 调用 `toUpperCase` 方法时,TypeScript 编译器会报错,因为它不知道 `unknownValue` 是否一定是字符串类型。

总的来说,`unknown` 类型比 `any` 类型更安全,因为它要求在使用变量之前进行类型检查,从而帮助避免潜在的类型错误。在 TypeScript 中,推荐尽可能使用 `unknown` 类型,而不是 `any` 类型。



void 和 never 的区别是?

`void` 和 `never` 是 TypeScript 中的两种类型,它们都与类型的不存在或缺失有关,但用途和行为有所不同:



1. **void**:

- `void` 类型通常用作函数没有返回值的返回类型。

- 当你有一个函数确实会返回一个值,但有时候你不关心这个返回值时,也可以使用 `void` 来明确表示这一点。

- `void` 类型的变量实际上只能被赋值为 `undefined` 或者 `null`(如果你在 TypeScript 配置中启用了 `--strictNullChecks` 或 `--strict`,则只能是 `undefined`)。

- `void` 可以被赋值给任何类型,但任何类型都不能被赋值给 `void` 类型,除非是 `undefined` 或 `null`。

示例:

function warnUser(): void {console.warn("This is a warning message");}

2. **never**:

- `never` 类型表示那些永不存在的值的类型,例如总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数的返回值类型。

- `never` 是 `any`、`unknown`、`never` 之外的所有类型的子类型,这意味着你可以将 `never` 类型的变量赋值给任何类型。

- `never` 类型的变量只能被赋值为 `never` 类型的值,例如总是会抛出错误的函数或者根本就不会有返回值的函数。



示例:

function error(message: string): never {throw new Error(message);}function fail(): never {return error("Something failed");}


总结来说,`void` 用来表示“没有类型”或“没有任何返回值”,而 `never` 用来表示“永不存在的类型”,即那些根本不可能被成功返回的类型。`never` 是 `void` 的子类型,但 `void` 不是 `never` 的子类型。在函数返回类型中,`never` 可以用来表示函数总是会抛出错误或根本就不会有返回值的情况。




http://www.ppmy.cn/news/1540993.html

相关文章

git禁用 SSL 证书验证

命令 git config --global http.sslVerify false注意&#xff1a;禁用 SSL 证书验证是不安全的&#xff0c;可能会使你的 Git 操作面临中间人攻击的风险。因此&#xff0c;只有在你确信网络环境是安全的&#xff0c;且了解禁用 SSL 验证的后果时&#xff0c;才应该使用这个配置…

git入门操作

文章目录 git入门操作git创建仓库&#xff1a;git initgit clone工作区域&#xff1a;文件状态git添加和提交git add git statusgit add .git commit -m 版本描述git ls-filesgit log git的reset回退版本git log 查看版本号git reset --softgit reset --hardgit reset --mixed总…

Python基于OpenCV的实时疲劳检测

2.检测方法 1&#xff09;方法 与用于计算眨眼的传统图像处理方法不同&#xff0c;该方法通常涉及以下几种组合&#xff1a; 1、眼睛定位。 2、阈值找到眼睛的白色。 3、确定眼睛的“白色”区域是否消失了一段时间&#xff08;表示眨眼&#xff09;。 相反&#xff0c;眼睛长…

exchange_proxy exchange 安全代理

1. 软件简介 exchange_proxy 是由小米公司开发并开源的,以 go 语言开发的 exchange 安全代理,可以将内网的 exchange 服务器的 https 服务安全地发布出去, 支持的功能如下: WEB 端增加 OTP 二次认证手机端增加设备激活绑定的功能屏蔽了 PC 端的 EWS 协议(意思就是不支持)…

VAS1802奇力线性芯片LED驱动芯片车规认证AEC-Q100

VAS1802Q 可编程恒流调节器在汽车照明中的应用与技术分析 随着LED技术在汽车照明和工业照明中的广泛应用&#xff0c;对LED驱动电路的要求也日益提高。为了满足这些需求&#xff0c;VAS1802Q作为一款可编程恒流调节器&#xff0c;凭借其宽输入电压范围、精准电流调节以及多重保…

Prometheus运维监控平台之服务发现配置、标签及监控规则编写(二)

系列文章目录 运维监控平台组件介绍及RPM包构建 文章目录 系列文章目录前言一、服务发现机制1.服务发现概述2.prometheus常用的服务发现协议3.服务发现原理分析 二、服务发现配置示例1.静态服务发现配置示例2.基于consul服务发现配置示例 三、监控指标标签1.指标抓取生命周期2…

【Echarts动态排序图,series使用背景色更新动画,背景底色不同步跟随柱子动画】大家有没有解决方案

echarts动态排序图背景色动画不同步 echarts试一试 series下面添加了showBackground属性&#xff0c;动画时底色背景不同步跟随柱图 showBackground: true, backgroundStyle: {borderRadius: 9,color: RGB(255,199,91, 0.2) }const data []; for (let i 0; i < 5; i) {d…

简述 C# 二维数据集合 List 的创建、遍历、修改、输出

简述 C# 二维数据集合 List 的创建、遍历、修改、输出 1、为什么要使用列表 List2、引入命名空间3、声明一维列表 List4、声明创建一个二维列表 List&#xff0c;数据类型 int5、 简单访问元素6、遍历二维列表&#xff0c;控制台输出7、遍历二维列表&#xff0c;修改数据&#…