hanyeah-TypeScript入门-02

12

2016
08

TypeScript入门-02

上一篇已成功编译了一个ts文件。实际项目中肯定不会只有一个文件，多个ts文件怎么编译呢？

1、使用tsconfig.json

多个文件编译就用到了tsconfig.json，只需要把tsconfig.json放到ts的同级目录，就会使用tsconfig.json配置的参数进行变异了，不需要输入参数了。

tsconfig.json内容如下，

{
    "compilerOptions": {
        "target":"es5",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "test01.ts"
    ]
}

ctrl+b再试一下，是不是不用输入参数了。有问题的话，重启一下sublime试试。(要在打开ts的窗口中按下快捷键，不要再json的窗口)。

2、编译多个文件

一个文件成功了，多个文件怎么办呢？我们看到test01.ts是写在files数组里边的，多个文件就在数组里接着加呗。

测试一下，确实是这样的。

但是如果多个文件里边有相同的变量会报错。

想起之前用egret的时候了，egret里边是用到了module，模块。我们也找着来就好了。

test01.ts

module hanyeah{
	export class Test01{
		public name:string;
		constructor(name:string){
			this.name=name;
		}
		public sayHello(){
			console.log("hello I'm "+this.name);
		}
	}
}

test02.ts

module hanyeah{
	export class Test02{
		public name:string;
		constructor(name:string){
			this.name=name;
		}
		public sayHello(){
			console.log("hello I'm "+this.name);
		}
	}
}

tsconfig.json

{
    "compilerOptions": {
        "target":"es5",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "test01.ts",
        "test02.ts"
    ]
}

3、ts之间相互引用

如果tsconfig.json中files中列出了所有的ts文件，那么我们就可以直接在ts文件中使用其他文件中到处的类。

比如，我们修改上面的test02.ts,如下：

module hanyeah{
	export class Test02{
		public name:string;
		constructor(name:string){
			this.name=name;
			let t01:hanyeah.Test01=new hanyeah.Test01("test01");
		}
		public sayHello(){
			console.log("hello I'm "+this.name);
		}
	}
}

我们在test02.ts中定义了一个Test01的实例。

let t01:hanyeah.Test01=new hanyeah.Test01("test01");

ctrl+b,编译成功。如果我们把tsconfig.json中files数组中的test01.ts注释掉，代码中没有报错，按ctrl+b编译，就会发现报错了。

我们能否只在tsconfig.json中只填写主类，其他类通过依赖关系自动编译呢？

当然是可以的。

我们继续修改test02.ts，修改如下：

///<reference path='test01.ts'/>
module hanyeah{
	export class Test02{
		public name:string;
		constructor(name:string){
			this.name=name;
			let t01:hanyeah.Test01=new hanyeah.Test01("test01");
		}
		public sayHello(){
			console.log("hello I'm "+this.name);
		}
	}
}

在文件的头部添加了一句

///<reference path='test01.ts'/>

编译一下，是不是成功了。

如果我们不想每次定义类，都带着“hanyeah.”,比如

let t01:hanyeah.Test01=new hanyeah.Test01("test01");

直接写成

let t01:Test01=new Test01("test01");

怎么办呢？

很简单，只需要

import Test01=hanyeah.Test01;

就可以了。

修改后完整的修改test02.ts如下：

///<reference path='test01.ts'/>
import Test01=hanyeah.Test01;
module hanyeah{
	export class Test02{
		public name:string;
		constructor(name:string){
			this.name=name;
			let t01:Test01=new Test01("test01");
		}
		public sayHello(){
			console.log("hello I'm "+this.name);
		}
	}
}

TypeScript中有require，namespace，interface,lambda等等高深的东西，我还不会用。

4、编译成js之后的加载问题

无论typescript有多少高深的语法糖，最终还是要编译成js来运行的。typescript的作用是使js的开发和项目管理更方便，而不是提高运行效率。上面我们列举的例子中，test01.ts和test02.ts是独立的两个文件，编译之后，会编译成test01.js和test02.js，我们要使用这两个文件，还需要手动在html文件中引用这两个js文件，引用顺序也需要自己考虑。

typescript只是作用于js的编写阶段，js的使用和调试，还是要用传统的方法。egret中是IDE自动为我们生成了html并引用了相应的js文件。在其他项目中，我们还只能手动写（或者有我不知道的工具）。

项目稍微大一点，手动引入js文件也是很麻烦的一件事，而且还得考虑js的引入顺序。使用requie可以解决这个问题。不过目前我还没学会用。

在tsconfig.json中，我们可以指定编译之后的js文件名，可以把所有的ts文件编译成一个js文件。其实这样就足够了，这样我们就可以只引入一个js文件了，顺序问题在变异的时候typescript就为我们考虑了。

还是上面的例子，我们修改tsconfig.json如下：

{
    "compilerOptions": {
        "target":"es5",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "out":"out/main.js",
        "sourceMap": true
    },
    "files": [
        "test02.ts"
    ]
}

然后，打开test02.ts所在的窗口，ctrl+b,编译成功，在test02.ts所在的文件加，多出来一个out文件夹，里边有一个main.js 。打开main.js，里边是test02和test01合并后的结果，而且，由于test02中用到了test01,所以test01定义在前，test02定义在后。

源码打包下载