为什么要用TypeScript（代码详解ts给我们带来的收益）为什么要用TypeScript？代码详解

Typescript经过这么多年的发展，已经打败了所有的竞争对手，成为了事实上的类型Javascript标准，被大量公司所采用，但还是有人问我为什么要用ts？使用ts能给我们带来什么好处？这次我们用一些实际例子来展示使用ts给我们带来的收益。
1. 提供很好的的拼写检查和智能提示
拼写错误大部分人都会犯的常见错误。
然而在js这种动态语言中、排查拼写错误会很痛苦：

const user = { name: '尼古拉斯·赵四', pet: { name: '狗子' } } user.name.spit('·')

我想将user的名字切割成first name和last name，
本来需要使用split方法，不小心拼成了 spit。
不过这种的还好，在运行中运行引擎会报错，告诉我 spit is not a function 。
下面这种错误就很难发现了：

const user = { name: '尼古拉斯·赵四', pet: { name: '狗子' }, occupcation:'保安' }console.log(user.occupation)

user有个属性 职业 ，
职业这个词本来应该是 occupation ，但是我们的小伙伴不小心拼成了occupcation,多了个c。
人都会犯错的，没什么大问题。
但是其他使用的小伙伴并不知道这个单词被拼错了，按照正常的 occupation去调用,那就只会返回一个undefined了。
而且可能由于我们做了一些防空值的处理，导致这种错误更加难以被发现。
即使发现了，我们还面临着一个问题，修改这个词可能需要很大的成本，稍后我们会讲解rename成本。
ts可以解决上述的这些问题吗？我们来试一试

type User = { name: string, pet: { name: string }, occupcation:string, } const user:User = { name: '尼古拉斯·赵四', pet: { name: '狗子' }, occupcation:'保安' } user.name.spit('·')//属性“spit”在类型“string”上不存在。你是否指的是“split”?console.log('他的工作是',user.occupcation)// 属性“occupcation”在类型“IUser”上不存在。你是否指的是“occupation”?

当你使用ts的编译功能，或者的安装了ts相关的lint，很容易就可以得到上面那样的提示。帮助我们在开发阶段就排查出相应的错误。
同时，我们还可以用ts给变量或参数限定类型，用来规避js默认的隐式转换带来的一些困扰。
可能大家见过一些类似下面这种js的面试题：

"" == 0; [] == 0; [] == ![]; [] == ![1,2,3];

上面的几个比较表达式的结果全部都是true。
js有一个比较复杂的隐式转换规则，具体可以参考这篇总结详解一下 javascript 中的比较

// js中， 0、-0、null、false、NaN、undefined、或者空字符串""，在比较运算中都被认为是false "" == 0; //true // 比较的一端是number，则另一端执行toPrimitive(value) // array的toPrimitive返回它的toString // []的toString()是一个空字符串 // 比较的一端是string，另一端是number,则将string转化为Number类型 // 空字符串会被转成0 Number('') == 0 [] == 0; //true // 首先执行![]，上面讲了判断为false的情况，[]作为一个array对象为true，取反后为false，当比较两端有一端为boolean时，将bool值转为number，false是0，true是1，这时又变回了上一个问题，重复上一个问题的操作 [] == ![]; //true [] == ![1,2,3]; //true [0]==![0]//true

建议大家在生产环境中尽量不要使用这些复杂的转换特性，防止写错或记错造成bug。
比较判断尽量写的含义清晰一些，比如 [].length==0 或者 ![].length 这样，简洁易懂。
或者在书写中使用三等号 [].length===0 ,三等号会首先验证等号两侧的类型，类型不同会直接返回false。
隐式转换在代码中也会造成一些隐患:

function incTen(n) { if (n > 1) { return n + 10 } return n }

当给这个方法传入一个正数时，返回加10，否则返回原值 , 现在传进去一个字符串"10" ,会发生什么结果呢?
答案是会返回 "1010"。
由于js中没有类型的限制，因此为了防止传参错误，我们需要在代码中增加很多对参数类型的判断。

function incTen(n) { if(typeof n !== 'number'){ throw Error('type is not number') } if (n > 1) { return n + 10 } return n }

编写类型判断语句会耗费时间不说，即使增加了检查代码，也并不能在第一时间发现调用错误，必须在运行的时候才能发现问题。因此我们可以使用ts来给变量或参数限定类型，第一时间提示参数类型的错误：

function incTen(n: number) { if (n > 1) { return n + 10 } return n }incTen('10')// error：类型“"10"”的参数不能赋给类型“number”的参数。

ts给我们提供了非常好用的智能提示，同时也可以将很大一部分错误在编写或者编译阶段就提示出来，让我们加以修改。

注意！当你将变量的类型设置为any的时候，会绕过类型检查。所以我们要谨慎使用any类型，防止typescript变成"anyscript"

// 例： const num:any = '10' incTen(num) //'1010'

2. 方便快捷的代码重构
在刚刚的例子中讲到了，在js中，即使是一个简单的属性rename，也有可能需要高昂的成本。
举个简单的例子

// a.js export const user = { name: '尼古拉斯·赵四', }// b.js import { user } from './a'function callName(user) { console.log(user.name) }callName(user)// c.js import { user } from './a'function callName(user) { console.log(user.name) }callName(user)

我们在a文件中获取了一个从接口返回的user，user中有一个属性叫name，在b,c文件中分别import了这个user并且输出它的name
这时需求有了变化，接口返回的user中没有了name，变成了realName和nickName
我们现在怎么进行修改呢？
有人可能会说全局搜索name，全部替换成nickName就好了。
那么稍微等一下，我们修改一下代码

// a.js export const user = { name: '尼古拉斯·赵四', pet: { name: '狗子' } }// b.js import { user } from './a'function callName(user) { console.log(user.name) }function hisPet(user) { console.log('他的宠物叫：', user.pet.name) }callName(user) hisPet(user)

现在user中有个pet，pet也有name，
在全局替换的时候会把pet的name也替换成nickName。
这下出错了，pet的name变成了undefined。
所以很明显，在实际开发中经常不能简单的全局替换，只能全局搜索之后，排查每一个name是否是a文件里user的name，之后再一个一个的替换。
如果这是一个有几百个文件的大型项目的话，那一个简单的rename都需要半天的时间。
现在我们看看ts怎么帮我们解决rename问题。

// 首先我们定义一个User类型。 // a.ts export type IUser = { name: string pet: { name: string } } // 将user设置为User类型 export const user:User = { name: '尼古拉斯·赵四', pet: { name: '狗子' } }// b.ts import { user,IUser } from './a'function callName(user:IUser) { console.log(user.name) }function hisPet(user) { console.log('他的宠物叫：', user.pet.name) }callName(user) hisPet(user) // c.ts import { user,IUser } from './a'function callName(user:IUser) { console.log(user.name) }callName(user)

使用vscode的重命名功能 F2，输入新名称并回车。rename结束。
3. 明确定义函数的参数类型和函数重载
axios是目前大家常用的前端HTTP库，它提供了多种请求方式

const url='http://www.baidu.com' // 1 axios.get(url) // 2 axios.request({ url, method:'get' }) }

如果我请求时这样操作，会发送什么请求呢？

const url='http://www.baidu.com' // 1 axios.get(url,{ url:'http://www.google.com', method:'post' }) // 结果是什么呢？自己去试一试吧 }

当我们没有按照作者的意愿来传递参数时，方法会发生什么，只能依赖作者对方法的定义认知，是方法描述优先，还是用户传递的参数描述优先。不同的作者在不同的场景下可能都会有不同的定义。
但是在ts中我们可以定义详细的参数类型来避免这种情况的发生。

type AxiosRequestConfig = { url: string; method: Method; headers?: any; params?: any; data?: any; } function request(config:AxiosRequestConfig){ //do request } type AxiosGetConfig = { headers?: any; params?: any; data?: any; } function get(url:string,config:AxiosGetConfig){ // do get } // 也可以借用ts高级一些的特性减少重复定义 function get(url:string,config:Omit){ // do get }

很多js的库都提供像上面这样的多种调用方式，或者在一个方法中提供多种函数重载，除了像上面的例子一样偶尔会让人产生疑惑之外，也有可能因为手误而产生错误的传参。

// 例: function logPeople() { if (typeof arguments[0] == 'object') { console.log('name', arguments[0].name) console.log('age', arguments[0].age) }else { console.log('name', arguments[0]) console.log('age', arguments[1]) } }

现在这个例子实现了一个简单的输出people个人信息的方法
你可以传入一个people对象

logPeople({name:'赵四',age:18}) //print name 赵四 age 18

也可以将个人属性依次传入 ``

logPeople('赵四',18)//print name 赵四 age 18

如果理解错了用法。就会产生问题

logPeople({name:'赵四'},18)//print name { name: '赵四' } age 18 logPeople('赵四',{age:18})//print name 赵四 age {age:18}

这样的问题还算是比较容易发现的，在运行时就可以发现
但是一些比较有责任心的作者为了方便调用者，会对参数提供一些默认值。

function logPeople() { if (typeof arguments[0] == 'object') { const p = { adulted:true, ...arguments[0], } console.log('name', p.name) console.log('age', p.age) console.log('adulted', p.adulted) } else { console.log('name', arguments[0]) console.log('age', arguments[1]) console.log('adulted', arguments[2].adulted||true) } }

上述方法提供了一个默认值，是否已经成年，默认为true。
这就使得方法写错了也可以正常运行,输出也是正常，只有遇到一些特殊情况或边界值时，才会产生错误。
如果我们的测试用例覆盖范围不够全面，会使得这种错误难以发现，导致在生产环境中发生一些不可预知的错误。

logPeople({name:'赵四',age:18},true)

在ts中，提供了定义函数重载的方法，可以协助我们规避这种错误。

function logPeople(people: { name: string, age: number, adulted?: boolean }): void; function logPeople(name: string, age: number, adulted?: boolean): void; function logPeople(): void { if (typeof arguments[0] == 'object') { const p = { adulted: true, ...arguments[0], } console.log('name', p.name) console.log('age', p.age) console.log('adulted', p.adulted) } else { console.log(2) console.log('name', arguments[0]) console.log('age', arguments[1]) console.log('adulted', arguments[2].adulted ?? true) } }logPeople({ name: 'zhaosi', age: 18, })

3. ts与c#、java都很像
这个理由看起来比较扯，但其实这是一个极大的优势。
ts的领导人是一位顶级大佬，安德斯海尔斯伯格，微软的c#就是这位大佬领导设计的，而c#的语法又是从java而来的，因此ts与c#、java用起来都很像，这就方便了java和c#程序员使用ts参与到项目的开发中。
例如c#，，在游戏领域unity3D目前是市面上占有率最高的游戏引擎，而unity3D使用c#作为主要语言。
随着web端3D渲染的日益成熟，大量的相关从业人员加入到web端3D渲染的开发中，使用ts可以有效减少他们重新学习一门新语言的负担。比如白鹭引擎就使用了ts作为默认开发语言。开发者可以像写c#一样来使用ts。几乎不需要额外的学习成本。
【为什么要用TypeScript（代码详解ts给我们带来的收益）】以上就是这次总结的使用ts能带来的收益。