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
用node main.js运行
使用自动编译
可以在当前目录下创建一个tsc的配置文件,并watch改文件进行自动边编译,那么每次修改了
ts文件之后就会自动编译成js文件。
运行命令
tsc -init
上面的命令会在目录下生成配置文件tsconfig.json
可以看到编译目标默认为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,具有自动提示功能