【学员提问】对于typescript的assert和casting，即类型断言和类型转换，我还不太理解，请结合例子梳理下知识点，并且出几道题考考我
文章目录
- 一. 类型断言 (Type Assertion)
- 示例 1：类型断言
- 二. 类型转换 (Type Casting)
- 示例 2：类型转换
- 三、两者的主要区别：
- 四、练习题
- 题目 1
- 题目 2
- 题目 3
- 题目 4
- 五、答案
最近有学员问我这个问题类型断言和类型转换有何区别。其实也是很多刚学ts的小伙伴经常会迷惑的问题。肝了2小时，整理出了一份笔记，供大家参考。
以下是 类型断言（Type Assertion）与类型转换（Type Casting）的区别和用法。
一. 类型断言 (Type Assertion)
类型断言是在 TypeScript 中告诉编译器，开发者更了解某个值的类型。通过类型断言，开发者可以明确告诉编译器这个值的类型，而不是让 TypeScript 推断其类型。类型断言 不会 进行实际的类型转换，它仅仅是用于编译时的检查。
语法形式：
值 as 类型<类型>值（这种形式主要用于旧版本 TypeScript，不推荐）
示例 1：类型断言
let someValue: unknown = "Hello, TypeScript";// 断言 someValue 是 string 类型
let strLength: number = (someValue as string).length;
在这个例子中，someValue 的类型是 unknown，我们通过 as 断言告诉 TypeScript，它实际上是一个 string，因此可以调用 string 上的属性（如 length）。
二. 类型转换 (Type Casting)
类型转换通常指的是在运行时将一种类型的数据转换为另一种类型。例如，将字符串 "123" 转换为数值 123。类型转换会发生在运行时，并且实际会改变数据的存储方式或表现形式。
语法形式：
- 使用
Number(),String(),Boolean()等全局对象进行转换。
示例 2：类型转换
let strValue: string = "123";// 类型转换，将字符串转换为数字
let numValue: number = Number(strValue);console.log(numValue); // 123
在这个例子中，strValue 是字符串，通过 Number() 进行类型转换，转换为数值类型。
三、两者的主要区别：
- 类型断言：仅在编译时检查，不会改变数据的实际类型或内容，只是告诉编译器如何处理。
- 类型转换：发生在运行时，改变数据的实际表示形式或内容。
四、练习题
题目 1
请问下面这段代码是否正确？如果不正确，请修正并解释原因。
let val: unknown = "I am a string";
let length = val.length;
题目 2
请将下面的字符串 "456" 转换为数值，并将其与数值 123 相加，打印结果。
let str: string = "456";
题目 3
在以下代码中，假设你知道 inputElement 是一个 HTML 的 <input> 元素，如何使用类型断言来正确访问其 value 属性？
let inputElement = document.getElementById('my-input');
题目 4
下面代码的 as 用法正确吗？为什么？
let someValue: any = "This is a string";
let strLength: number = <number>someValue.length;
五、答案
1、不正确。正确的代码为：
let val: unknown = "I am a string";
let length = (val as string).length;
2、答案：
let str: string = "456";
let num:number = Number(str);
let count:number=num+123;
console.log(count);
3、答案：
let inputElement:unknown = document.getElementById('my-input');
let newipt=inputElement as HTMLInputElement;
console.log(newipt.value)
4、答案：
不正确。它没有使用as关键字。在react中，可能会误认为是react的类型。
解释：
a.没有使用 as 关键字：在这段代码中使用的是 <> 语法来进行类型断言，这是 TypeScript 旧版本中的一种类型断言方式。在现代 TypeScript 中，推荐使用 as 语法来进行类型断言。
b.可能与 React JSX 冲突：在React项目中，<> 是 JSX 语法的一部分，表示一个空的 JSX 容器。因此，在 React 环境中使用 <> 语法可能会引起混淆，或者导致编译错误。为了避免这种冲突，建议使用 as 语法。
let someValue: any = "This is a string";
let strLength: number = (someValue as string).length; // 使用 as 语法断言类型