TypeScript是微软开发的一种开源、跨平台的编程语言。它是javaScript的超集，最终编译成javaScript代码。通常简称为TS，支持JS和ES语法。TS的特点：从javaScript到javaScript。强大的类型系统。高级javaScript。适合开发大型项目，编译成纯js代码，js可以在任何浏览器上运行。typeScript是一种区分大小写的语言。本文主要带大家完成ts安装，环境配置，简单介绍。1、安装TS使用前需要安装：npminstall-gtypescript安装完成后，使用tsc-v查看安装的版本。第一个ts文件：01.ts，代码如下：(()=>{functionshow(msg){return"string:"+msg}letstr="frontend"console.log(show(str))})()通过脚本导入html文件页面运行正常，因为ts可以支持js语法，直接在文件，另外，也可以使用node命令运行文件，也可以正常执行。如果此时，在ts文件中添加ts语法：//添加类型支持(()=>{functionshow(msg:string){//添加字符串的意义在于传入的msg值只能是字符串,not可以是其他类型return"string:"+msg}letstr="frontend"console.log(show(str))})()这时候浏览器运行的时候会报错并且无法继续执行。此时需要将ts文件编译成js文件，打开命令行工具，运行：tsc01.ts运行后会自动生成一个01.js文件。查看js代码内容如下：functionshow(msg){return"string:"+msg;}(function(){varstr="frontend";console.log(show(str));})();总结：直接在ts文件中输入js文件，在html文件中导入ts文件，直接在浏览器中运行即可。如果ts文件中有ts语法代码，如果在html文件中引入ts文件，直接在浏览器运行会报错。这种情况下，需要先编译成js文件。如果ts文件函数中的形参被某种类型修饰，那么最终编译出来的js文件中就没有这种类型。ts内部的let修饰符在编译后的js文件中变成了var。2、vscode自动编译ts新建工程目录，在当前目录下打开命令行工具，执行tsc--init自动生成tsconfig.json文件，代码如下：{"compilerOptions":{"target":"es2016","module":"commonjs","outDir":"./js","esModuleInterop":true,"forceConsistentCasingInFileNames":true,"strict":true,"skipLibCheck":true}}注：outDir表示ts文件编译后生成js文件的存放目录。如果属性值后面的文件夹不存在，会自动创建。strict表示严格模式。新建一个index.ts文件，代码如下：(()=>{functionshowStr(str:string){returnstr}leta:string="front-endperson"//调用函数console.log("a",showStr(a));})()类型注解：函数terrain参数后加修饰符，限制传入参数的类型，string表示只能是字符串类型。在命令行运行tsc-w//或tsc-watch自动生成js文件夹，包括index.js文件。运行这条命令后，每当ts文件发生变化时，都会自动编译。一切运行良好，没有任何错误。如果调用函数的参数作为值传递：console.log(showStr(123));这时候编辑器报错：“number”类型的参数不能赋值给“string”类型的参数。ts可以智能提示问题是因为ts提供静态代码分析，可以分析代码结构，提供类型注解。但是tsc编译的时候，虽然会提示错误，但是还是会编译成js文件，执行的时候js是不会报错的，因为js是弱类型语言。3.入门TS基本数据类型boolean是一种布尔值类型。例如：让isDone:boolean=false;number是数值类型，ts可以支持二进制、八进制、十进制、十六进制数据。例如：letdecLiteral:number=6;string是字符串类型。例如：letname:string="bob";表示数组类型。在数组名称后添加元素类型[]，后跟数组值。如：letlist:number[]=[1,2,3];元组类型。如：letarr:[string,number,boolean]=['str',1,true]枚举，给一组值起友好的名字。例如：enumColor{red,green,blue}anytype，有时候你不确定传入的值是什么类型，所以你可以使用anytype。如：letnotSure:any=1空值，正好和any相反，表示没有类型。如：functionshow():void{}null和undefinednever类型，代表的是永远不存在的值。functionerror(message:string):never{thrownewError(message);接口接口只是一个约束。在ts中，接口的作用就是为这些类型命名，为你的代码或第三方代码定义契约。TypeScript中的接口是一个非常灵活的概念。除了用来抽象类的部分行为外，它还经常被用来描述“对象的形状（Shape）”。使用形式：(()=>{//定义一个接口interfacePerson{firstName:string,//添加类型限制lastName:string}functionshowFullName(person:Person){//添加类型限制后，接口会自动内部提示Returnperson.firstName+'_'+person.lastName}constp={firstName:"Hello",lastName:"World"}console.log("Name",showFullName(p));})()如果p中的firstName被注释掉，会报错，提示：本例中，接口的意思是限制传入showFullName函数的数据属性。接口优点：自动检测传入的数据是否符合接口规范，不符合则报错。类Typescript类引入了传统的JavaScript程序，这些程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方法的程序员来说是棘手的，因为它们使用基于类的继承和从类构建的对象从ECMAScript2015开始，也称为ECMAScript6，JavaScript程序员将能够使用基于类的面向对象方法。借助TypeScript，我们现在允许开发人员使用这些功能，并编译JavaScript以在所有主要浏览器和平台上运行，而无需等待下一个JavaScript版本。ts类只是一个语法糖，本质是js函数实现的。使用示例：(()=>{//定义一个接口interfacePerson{firstName:string,lastName:string}//定义一个类classPersonal{//定义公共字段属性firstName:stringlastName:stringfullName:string//Constructorconstructor(firstName:string,lastName:string){//更新属性数据this.firstName=firstNamethis.lastName=lastNamethis.fullName=this.firstName+this.lastName}}constp=newPersonal('你','OK')functionshowFullName(person:Person){returnperson.firstName+person.lastName}console.log("p",showFullName(p));})()
