什么是TypeScript
理解
TypeScript(Typed JavaScript at Any Scale),就是指添加了类型系统的JavaScript,适用于任何规模的项目。TypeScript强调了两个重要的特性--“类型系统”、“适用于任何规模”。
特性
类型系统
“类型系统”是TypeScript最核心的特性。
类型分类
类型系统按照类型检查机制可以分为动态类型和静态类型。TypeScript是静态类型。
静态类型是指编译阶段就能确定每个变量的类型,这种语言的类型错误往往会导致语法错误。TypeScript在运行时先编译为JavaScript,在编译阶段就会进行类型检查,所以TypeScript是静态类型。
let foo = 10;
foo.split(' '); // 类型“number”上不存在属性“split”,直接类型检查报错
动态类型是指在运行的时候才会进行类型检查,这种语言的类型错误往往都是在运行的时候出现错误,而JavaScript是一门解释型语言,没有编译阶段,所以它是动态类型。下面这个代码只有在运行的时会报错:
let foo = 10
foo.split(" ") // TypeError: foo.split is not a function
上面两个代码块看起来是一样的,都是报错原因和检查原因为什么会不一样呢?原因是在于TypeScript有着强大的类型推断能力,即使不用声明变量foo的类型,TypeScript也能推断出这事一个number类型的变量,而完整的写法是如下的。
let foo: number = 10
foo.split(' ') // 类型“number”上不存在属性“split”。
弱类型语言
类型系统按照是否允许隐式类型转换来分类,可以分为强类型和弱类型。
以下的代码不管在JavaScript还是在TypeScript中都可以正常运行,运行时候数字1会被隐式类型转换为字符串1,而+号会被识别为字符串拼接,所以它们最后输出的结果都是"11"
console.log(1 + '1') // 11
TypeScript完全兼容JavaScript的,它不会修改JavaScript运行时的特性,所以它们都是弱类型语言。
类型系统体现了TypeScript核心设计理念,在完整保留了JavaScript运行时行为的基础上,引入静态类型系统来提高代码的可维护性,减少可能出现的bug。
适用于任何规模
TypeScript 非常适用于大型项目——这是显而易见的,类型系统可以为大型项目带来更高的可维护性,以及更少的 bug。
在中小型项目推行TypeScript的最大障碍就是认为TypeScript需要编写一些额外的代码,降低开发效率,但是有了类型推论,大部分类型都不需要手动声明,相反,TypeScript增强了编辑器的功能,包括代码补全,接口提示,跳转到定义,代码重构等。这在很大程度上提高了开发效率,而且,TypeScript有近百个编译选项,可以自定义编译选项来降低类型检查的标准。
发展
目前的TypeScript版本已经迎来了TypeScript 4.5.4时代,目前很多大型项目都是基于TypeScript编写,成功经受住了考验。
TypeScript始终保持着与ECMAScript标准的同步发展。
安装
TypeScript采用命令行工具进行安装。
npm install -g typescript
首先就是全局安装TypeScript,在安装完成之后,我们就可以在任何地方执行了tsc命令。
编译一个TypeScript文件如下:
tsc Hello-TypeScript.ts
同时也可以采用如下的编辑方式,采用ts-node命令编译,可以直接在控制台查看编译输出的结果,不需要将ts编译成js。
安装ts-node。
npm install -g ts-node
采用全局安装的方式进行安装即可,具体的ts-node的一些配置请访问其github地址查看ts-node。
编译一个简单的TypeScript代码。
console.log(1 + '1') // 11
通过如下命令编译。
ts-node Hello-TypeScript.ts
编译结果如下图。

编写一个Hello-TypeScript.ts文件之后,通过tsc + 文件名的方式就可以编译一个ts文件,将文件编译成.js文件。后续不再使用tsc命令编译,统一采用ts-node编译。

Hello TypeScript
下面通过一个简单的例子来了解TypeScript。
function sayTypeScript(info: string) {
if (typeof info === "string") {
return 'Hello, ' + info;
} else {
throw new Error("typescript is not a string")
}
}
let info = 'TypeScript';
console.log(sayTypeScript(info));
上面代码中定义了一个函数sayTypeScript,sayTypeScript的形参info的类型是一个string字符串类型的,通过判断info类型,然后输出不同的结果,如果info的类型为string为真,输出下图所示结果,为假就编译不通过。具体请继续阅读下面内容。
。
将上面代码函数的参数info的类型改为number类型,再进行编译。
function sayTypeScript(info: string) {
if (typeof info === "string") {
return 'Hello, ' + info;
} else {
throw new Error("typescript is not a string")
}
}
let info = 1;
console.log(sayTypeScript(info));
通过查看编译结果,直接就编译失败了,报错信息如下,*Argument of type 'number' is not assignable to parameter of type 'string。类型装换失败。



