【学员提问】对于typescript的assert和casting，即类型断言和类型转换，我还不太理解，请结合例子梳理下知识点，并且出几道题考考我

最近有学员问我这个问题类型断言和类型转换有何区别。其实也是很多刚学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 语法断言类型