TypeScript 是什么？

发表于 分类于
本文字数： 1.7k 阅读时长 ≈ 2 分钟

一、JavaScript 是动态弱类型语言

1. 弱类型语言

JavaScript 是一门弱类型语言。语言类型的强弱，业界并没有提供权威的概念进行区分。但大体而言，强类型语言会有更严格的类型约束，不允许已声明类型的变量出现隐式的类型转换。而弱类型语言几乎不受限制，这种变量类型的不确定性可能会给代码带来隐患。

1
2
3
4
5
6
// 强类型语言（java、python 等）
100 - '50' // 报语法错误

// 弱类型语言（js）
100 - '50' // 不报错，结果为 50
100 + '50' // 不报错，结果为 10050

js 程序在运行阶段碰到不符合类型规范的变量时，会自作主张地进行隐式类型转换。当无法转换时则报错，转换成功则返回运算结果（有时候不是开发者所期望的运行结果，即运行不准确）。

2. 动态类型语言

JavaScript 是一门动态类型语言。在静态类型语言中，一旦声明了变量的类型，则不允许再将其改为其它类型的值。而动态类型语言则不受此限制，可以任意转换类型。

1
2
3
4
5
6
7
// 静态类型语言（java）
int a = 100;
a = '100';  // 报语法错误

// 动态类型语言（js）
var a = 100;
a = '100';  // typeof(a) 输出 'string'

二、JS 类型问题原始规避方案

1
2
3
4
5
6
7
const list = 'nolist';
console.info(list[0]); // error

// 防错处理
if(Array.isArray(list)) {
    console.info(list[0])
}

当对变量进行操作时，提前进行类型判断来进行防错处理。这种做法简单粗暴，无需额外的学习成本，也不会带来额外的编译过程。但它仍然存在一些不可避免的局限性：

  • 开发成本的提高：开发者除了需要编写代码的核心逻辑外，还需要花费时间编写避免类型问题的代码；
  • 手动防错容易遗漏：百密一疏，难以在所有变量使用前都考虑到其所有可能的使用场景，并一次性做好类型判断；
  • 代码冗余可读性差：由于在程序中编写了大量类型判断代码语句，这容易导致代码量变大、核心代码不够突出清晰等问题；
  • 运行时性能下降：在运行阶段需要运行这些类型判断逻辑代码，需要消耗更多的运行时间。

三、TypeScript 是什么？

TypeScript 是 JavaScript 的类型检查器。在语法上，Typescript 是 Javascript 的超集（类型系统 + ES6）。
ts 并不能和和 js 相谈并论，它只能算是 js 的切面语言，因为它的变量类型和语法规则只涉及到开发和编译阶段，在编译后被转换为 js 代码，交给 JavaScript 解释器执行。这也意味着，在学习 ts 这门语言的类型和语法时，无需关注它的运行机制与存储规则，只需要理解它与 js 类型和语法的映射关系即可。

四、TypeScript 如何规避类型问题？

1. 类型声明阶段添加类型声明

ts 的类型声明涉及到三个部分，即自己代码中的类型注解、环境下 api（window / node）的类型注解以及第三方库（引入的 lib）中的类型注解。环境下 api 以及第三方库的文件中缺乏类型注解时，我们通常会通过引入类型声明文件的方式来解决。

1
2
3
4
// test.ts
function sum(m: number, n: number): number {
	return m + n
}

2. 类型检查阶段进行类型检查

类型检查分为编码时检查（代码提示）、编码后检查、编译时检查三种。ts 可以归属于静态语言，IDE 对其代码具备很强的感知能力，可以为开发者提供强大的代码提示、错误提示等功能。在编码时检查阶段就已经可以检查出大部分的类型问题（注意 ts 是渐进式的）。

3. 类型编译阶段进行类型编译

ts 源代码并不能直接交给 js 解释器执行，而需要先借助官方提供的 tsc 工具将其编译为 js 代码。当编译失败时，会出现报错信息提示开发者对代码进行修改。

参考文档：

  1. Typescript 也许应该这样入门才对