探索现代编程世界之解析TypeScript与JavaScript的差异

直至如今，TypeScript逐渐成为各个公司维护前端项目的方案之一，它的作用很直接——规范，提高代码质量，降低维护成本，延长项目的生命周期。

TypeScript 是由 Microsoft 开发的开源语言，它是 JavaScript 的一种超集。通俗来讲， TypeScript 包含了 JavaScript 的所有功能，并在此基础上添加了更多的特性。

随着TypeScript的普及，面试被提问到TypeScript的几率越来越大，最常见的问题就是介绍下TypeScript的特点，本篇文章将带大家了解TypeScript的使用，明白TypeScript和JavaScript的区别。

一、基本使用

1. 下载TypeScript

npm install typescript -g

2. 使用TypeScript

• 使用tsc指令，将ts文件编译成js文件

    我们使用的是编译后的js文件，ts文件无法直接使用。

tsc index.ts // -> index.js

    我们可以对比编译前后的文件内容:

• 我们也可以使用code runner (vscode) 插件直接运行ts文件中的代码

    需要借助ts-node这个包运行ts文件，否则无法识别运行。

npm install ts-node -g

    看看coderunner的效果:

同学们可以通过第一种方式生成js文件，然后在html文件中引入，也可以通过第二种方式直接运行ts文件，查看运行结果。

注：对打包了解的同学，可以通过webpack/rollup等工具简易地搭建一个自动编译的项目，释放双手。

二、TypeScript的特性

1. 强类型语法

JavaScript属于弱类型语言，我们在进行变量操作的时候，可以进行任何类型的赋值。

var num = 1 // typeof num == 'number'

num = '1' // typeof num == 'string'

与JavaScript不同，TypeScript在对变量进行声明时必须声明变量的类型。

var num : number = 1

num为number类型的变量，那后续的操作中，则不能对num进行其他类型数据的赋值

num = '1' // 不能将类型“string”分配给类型“number”

强类型的意义：安全，严谨的代码编写

假如我创建了num变量是用于计数的number类型，那后续的操作中，num变量就不允许被更改为其他类型的数据，防止相关功能因为num变量不是一个数值导致出错的情况。

2.静态类型检查（编译时的错误提示）

TypeScript 提供了静态类型系统，可以在编译时发现类型错误，从而避免运行时的错误。

对熟用JavaScript的同学们来讲，这一点不难理解，JavaScript是一种解释型语言，我们只有在运行时才能发现代码是否有错误，例如：​​​​​​​

var num = 1

num.toLowerCase()//a.tolowerCase is not num function

具体的报错，是代码在浏览器运行时才能看到:

有些同学下意识的反应就是：“谁看不出来这是一个数值，肯定没有字符串的方法，没人会写这种报错代码。”

这个想法没错，但是在工作中，也肯定没有人只会写这两行代码，一个变量的定义，从起初的几行代码，经过维护人员的变更，功能的扩展，会让这个变量功能性变得"不稳定“

结合强类型的特性，我们在书写代码时就能看到ts为我们带来的友好提示​​​​​​​

var num : number = 1

num.toLowerCase()

//类型“number”上不存在属性“toLowerCase”。ts(2339)

看看实际的提示效果:D

是不是很棒，我们在书写代码的时候，就能避免许多意料之外的隐患，例如你的前任在某个偏僻的角落定义的同名变量（哀）。

3. 自动推导

TypeScript 具备类型的自动推导功能，我们在书写代码时如果没有对目标进行类型定义，则默认使用ts推导出的类型。

var num = 1 // => var num : number = 1

像这段代码，即使我们没有定义变量num的类型，TS也会将初始化赋值的数值类型(number)作为变量num的类型。

在后续对num变量的操作中，TS则将num变量作为一个number类型的数据进行检测。

Typescript根据上下文语境对目标进行自动推导的特性，大幅度地减轻了使用者的工作成本，官方不希望用户在大量且重复的类型定义上浪费时间，而是根据功能结构去进行类型设计。

但有一点需要注意，Typescript的自动推导并不参与用户的复杂逻辑检测，我们可以通过一个函数重载的案例进行简单区分（不清楚的同学可以在本系列文章中学到函数重载再回头复习）：​​​​​​​

function fn(num : number ) : number

function fn(num : string ) : string

function fn(num : number | string) : string | number {

if(typeof num == 'string') return 1

return 1

}

const a = fn('1') // a的类型为string

在这个简单的案例上就有一系列重复出现的疑问：

同学："我这里返回值似乎是number类型，a变量的提示却是string？"

我："从代码逻辑上看，你设定了一个重载列表，当函数参数类型为string时，返回值就是string类型，没问题。但这个案例上的代码，a变量实际数据确实是number类型，错的没毛病"。

同学："错的没毛病？Typescript的检测出错了吗？还是我写错了？"

我："Typescript的自动推导并不参与用户的复杂逻辑检测，实际上确实是你逻辑有问题导致这种现象。"

这个问题，我拿去反问一些工作中常写Typescript的同学，也有不少有出现错愕的反应。

简单来说，面对函数重载，Typescript在检测时只会确定你的重载列表的设定，而不会去检查你在函数内部做了什么复杂的逻辑。

根据这三个特性的具体展现，我们可以对Typescript的优点进行总结及划分：

1. 类型安全：静态类型检查的特性让使用者在编写代码时就能检测到类型错误，不用在运行代码后才发现，提高代码的质量。

2. 工具支持：许多代码编辑器类似IDE、VScode、webStome等都支持Typescript，其中包括代码提示，自动补全，类型检查等，大幅度提高使用者的开发效率。

3. 可读性与可维护性：强类型语法的特点，以及我们在上文的静态类型检查中，能明确看到vscode在Typescript语法检查上的有效提示，根据类型的定义以及语法检查的提示，代码更容易阅读和理解，增加代码的可读性和可维护性。

4. 面向对象编程特性：Typescript支持类、接口、和抽象类等面向对象编程的特性，这些特性能让使用者更好地书写功能和管理代码（关于类的学习，同学们可以在本系列文章中继续深入）。

综合上述，我们在面试的过程中，可以先详细讲解Typescript的语言特点，静态检查，自动推导等特性细节，最后再总结它的优点。

总结​​​​​​​

在文章中我们先了解TypeScript怎么使用，TypeScript需要通过编译器将ts文件编译成js文件，其中ts的相关语法都会被剔除，不影响js运行。

明白TypeScript和JavaScript的区别，知道TypeScript优势，比如强语言的安全性，书写检测的错误排查等，避免在面试中被问到两者区别又回答不出的尴尬情景。在后续文章中，我们再继续了解typescript的类型有哪些，泛型，接口等如何使用。