TypeScript笔记（4）—— TypeScript中的类型注解

jcLee95

已于 2022-01-25 16:27:09 修改

阅读量887

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScripj笔记文章标签： typescript javascript

于 2021-04-11 10:59:24 首次发布

本文链接：https://blog.csdn.net/qq_28550263/article/details/115588580

TypeScripj笔记专栏收录该内容

25 篇文章

订阅专栏

本文通过对比JavaScript和TypeScript的代码示例，详细介绍了如何使用类型注解避免因类型错误导致的问题。通过具体实例展示了类型注解的重要性及其实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeScript（4）：类型注解

【导读】JavaScript是若类型语言，而TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式，为我们提供了静态类型分析能力，这样我们就可以避免由于传入错误类型造成一系列不必要的麻烦。

现在我们还是通过实际操作来掌握类型注解。打开VSCode，接着上次新建一个文件夹04_TypeAnnotation，并建立一个JavaScript文件without_ta.js，输入以下代码：

function add(a, b) {
    return (a + b).toString();
}

var a = 3;
var b = "6"

document.body.innerHTML = add(a,b);

你在VSCode编辑器上不会看到任何报错提示，甚至在console中也看不到任何报错，然而执行的时候结果却会和我们预期的有不一样：
在这里插入图片描述
预期为9，而实际成为了36。这是因为JavaScript为了执行"+"操作，将数字类型自动转换成为了字符串类型。这种行为过于隐性，常常给调试带来很多不必要麻烦。
现在我们建立一个TypeScript文件tp_anatt.ts，使用类型注解来试一试：

function add(a: number, b: number) {
    return (a + b).toString();
}

let a = 3;
let b = "6";

document.body.innerHTML = add(a,b);

开启自动运行编译任务（见第二节），可以看到，编译和代码都有错误提示：
在这里插入图片描述
也就是说，虽然JavaScript是弱类型语言，但是在将其升级改造引入"类型注解"这一概念后的TypeScript中，类型注解相当于强类型语言中声明了某个变量的类型，以后该变量就必须为此类型，否则ts编译器将报错，并不能正确地编译成js文件。
因此我们需要纠正错误：

function add(a: number, b: number) {
    return (a + b).toString();
}

let a = 3;
let b = 6;

document.body.innerHTML = add(a,b);

这时将编译成js文件，在html中引入编译后的js文件，打开浏览器，发现终于和我们预想的功能一致了：
在这里插入图片描述