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

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文件，打开浏览器，发现终于和我们预想的功能一致了：