上手Typescript，让JavaScript适用于大型应用开发

Typescript

Typescript是一个基于静态类型的，能编译为JavaScript的JavaScript的超集。也就是说任何JavaScript都可以看成是Typescript，IDE能够更好的在编译期间进行错误检查，更适合于大型应用开发。是由微软开发的开源语言，继承了JavaScript的跨平台特性，可运行于任何浏览器，任何宿主，任何系统。

安装

安装Node.js后，在命令行输入命令:

npm install -g typescript

上面的命令就安装好了Typescript，检查是否安装成功，运行如下命令：

tsc -version

使用

现在非常受欢迎的开源编辑器Visual Studio Code对Typescript有很好的支持。在Visual Studio Code中编写Typescript代码，后缀名为ts，示例main.ts

interface Person {
 name:string;
 age:number;
}
function sortByName(a:Person[]){
 var result = a.slice(0);
 result.sort(function(x,y){
 return x.name.localeCompare(y.name);
 });
 return result;
}
var persons=[];
persons.push({name:"Tom",age:20});
persons.push({name:"Allen",age:30});
console.log(sortByName(persons));

编辑器自动提示错误

编写好代码后，运行tsc命令将Typescript编译成普通的JavaScript

tsc main.ts

编译后的普通的Javascript

用node main.js运行

 

使用自动编译

可以在当前目录下创建一个tsc的配置文件，并watch改文件进行自动边编译，那么每次修改了

ts文件之后就会自动编译成js文件。

运行命令

tsc -init

 

上面的命令会在目录下生成配置文件tsconfig.json

默认编译目标为es5

可以看到编译目标默认为es5，可以调整，所以再也不用担心浏览器兼容的问题。

然后运行命令

tsc -w

就可以自动编译了。

引用普通的JavaScript库

实质上自动提示和报错功能是通过后台的d.ts文件实现的，这是一个修饰文件，没有任何JavaScript实现。

如果我们再Typescript中引用普通的JavaScript的包，那么编辑器不能推断普通JavaScript的类型，这时需要为普通的JavaScript文件添加修饰文件（.d.ts）

示例：如果我们需要在Typescript中引用Person.js库

Person.js

var Person =function(presonData){
 this.names=presonData.name;
 this.age=presonData.age;
}
Person.prototype.sortByName=function(a){
 var result = a.slice(0);
 result.sort(function(x,y){
 return x.name.localeCompare(y.name);
 });
 return result;
}
module.exports=Person;

我们可以创建一个同名的修饰文件Person.d.ts文件：

Person.d.ts

type PersonData = {
 name:string;
 age:number;
}
declare class Person {
 constructor(personData:PersonData);
 name:string;
 age:number;
 sortByName(a:Person[]):Person[];
}
export=Person;

修饰文件

在我们的Typescript中引用，可以看到编辑器会自动提示

 

引用市面上的流行库

像上面所说，如果我们再Typescript中引用市面上流行的JavaScript库，是不需要自己写修饰文件的，所有常用Typescript已经帮我们做好了。

例如需要引用JQuery库

运行如下两个命令即可：

npm install jquery
npm install @types/jquery

 

在Typescript脚本中引用JQuery，具有自动提示功能

 

转载于:https://www.cnblogs.com/guchengnan/p/10132114.html