简介●百度百科介绍TypeScript是微软开发的一种开源编程语言，在JavaScript的基础上加入静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel翻译成JavaScript代码，可以运行在任何浏览器，任何操作系统●看了上面的介绍，我还是不太明白什么是TypeScript。让我们看看下面的例子。例子○一个很简单的js代码//封装函数，求两数之和functionand(a,b){returna+b}接下来调用试试constres=and(10,20)○这么简单内容，谁不知道，这东西有什么问题？○大家想一想，假设你调用这个函数的时候■你传了一个数字■你传了一个字符串■会不会有问题？○你可能会疑惑：为什么要少传一个数字，为??什么要传一个字符串？○可能这个函数稍微简单一点○那么我们来看一个稍微复杂一点的代码vartimes=''functionmove(ele,target,way){clearInterval(times)times=setInterval(function(){varonOff=truefor(letattrintarget){letnow=parseInt(getPos(ele,attr))letspeed=(target[attr]-now)/10speed=speed>0?Math.ceil(speed):Math.floor(speed);if(now==target[attr]){onOff=true}ele.style[attr]=now+speed+'px';}for(vartipintarget){if(target[tip]!==parseInt(getPos(ele,tip))){onOff=false;休息;}}if(onOff){clearInterval(times);方式&&方式();}},30)}这段代码封装了什么无所谓，不用仔细看○接下来就是调用○好了，问题出现了，怎么解决呢？我们只能看代码，只要看懂代码现在，一切都解决了TS●这时候，TypeScript就可以派上用场●TypeScript○是在JS代码的基础上，对每个数据○期间添加了数据类型限制开发阶段，可以在某个位置提示你需要什么类型的数据？在开发阶段，当你给的数据类型错误时，可以及时提示你的错误。在开发阶段，如果需要给的数据少或者类型不对，会出现提示。再看一个TS例子○还是很简单的一段代码functionand(a:number,b:number):number{returna+b}看不懂也没关系，我不懂需要你先了解一下，先别看，等会儿再说○接下来看看调用时会出现什么○这是用TS写的一段代码。我们会发现我不需要运行代码或检查结果。在开发过程中，我可以使用编辑器给你报错信息○如果是这样，是不是可以避免开发过程中的很多错误，很多时候不需要去记住一些函数的参数类型.反正有错小编会提示的。到时候再看看报错信息就知道了。百度百科介绍TypeScript是微软开发的一种开源编程语言。它是在JavaScript的基础上加入静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel翻译成JavaScript代码可以运行在任何浏览器和任何操作系统上。初体验。聊了半天，接下来，我们写一个TS，跑起来试试。安装TS编译器●浏览器无法直接运行TS代码。我们需要工具将你写的TS代码编译成JS代码，并在浏览器中运行。安装TS编译器○只用npm安装全局ts工具○windowsnpminstall--globaltypescript○MACsudonpminstall--globaltypescript编译TS代码接下来写一段代码，TS代码写在一个文件中，有一个.ts后缀//index.ts文件functionsayHi(name){console.log(`你好，我叫${name}`)}sayHi('千峰大前端')打开命令行开始编译。tscindex.ts会编译index.ts文件，编译后会生成一个同名的js文件，index.js。js○这里我们暂时不写ts的内容，只是按照js的代码写●原来的ts文件每次修改都需要重新编译，很麻烦●我们可以使用--watch命令监控文件变化tsc--eatchindex.ts○会实时监控index.ts文件的变化，只要代码有变化，就会自动重新编译编译TS成功？失败的？我们在代码中加入一些ts相关的内容，然后尝试编译一下//index.ts文件//TS的含义：限制name参数为string类型数据functionsayHi(name:string){console.log(`你好，我是${name}`)}sayHi('前锋大前端')○执行编译，发现编译没有问题●做一些修改，重新做//index.tsfile//TS含义：限制name参数只能是string类型数据functionsayHi(name:string){console.log(`你好，我的名字是${name}`)}sayHi(1024)○还在执行编译，我们会发现编译器报错○会告诉我们一个数字类型的参数不能赋值给字符串键入○这个我能看懂○但是仔细看目录下的内容，发现正常编译了一个index.js文件，里面的代码也正常。如果没有问题，我成功了吗？还是我失败了？?●解析一波的意思//index.ts文件//TS:limitthenameparametertostringtypedatafunctionsayHi(name:string){console.log(`Hello,Mynameis${name}`)}sayHi(1024)○ts中解析这段代码的意思是形参名称的数据类型必须是string类型○如果传其他类型的数据会报错，但是这个类型是错误的，也就是ts的错误○所以在编译过程中会提示你的type有错误但是○不管你传什么实参，编译出来的js代码是这样的//index.js文件函数sayHi(name){console.log(`Hello,Mynameis${name}`)}sayHi(1024)○从js的角度来看，这是一段合法的代码○所以一个js文件会编译成功总结●当你在写ts，只要你的语法正确，就会编译出一个js文件●ts只会在编译时检测数据类型是否有错误并提示你●JavaScript○弱类型s脚本语言○对数据类型没有限制●TypeScript○基于JS，加上类型限制○是类型限制比较强的脚本语言，浏览器无法识别，需要编译成js才能运行●百度百科介绍TypeScript是由微软开发的一种开源编程语言，通过在JavaScript之上添加静态类型定义而构建。TypeScript通过TypeScript编译器或Babel翻译成JavaScript代码，可以运行在任何浏览器和任何操作系统上
