TypeScript学习笔记（一）

1、创建简单工程

1）创建一个新目录：

mkdir proj
cd proj

2)在proj文件夹中在src文件夹下创建两个文件夹，经过编译器生成的文件放入dist目录

mkdir src
mkdir dist

3）初始化工程，入口文件使用main.js

npm init

4）安装依赖项，先全局安装TypeScript和Gulp，再安装typescript，gulp，gulp-typescript

npm install -g gulp-cli

npm install --save-dev typescript gulp gulp-typescript

5）实现helloworld

function hello(compiler: string){
    console.log(`Hello from ${compiler}`);
}
hello("TypeScript");

6）在工程的根目录proj下新建一个tsconfig.json文件

{
	"files": [
		"src/main.ts"
	],
	"compilerOptions": {
		"noImplicitAny": true,
		"target": "es5"
	}
}

新建gulpfile.js文件

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
gulp.task("default", function() {
	return tsProject.src()
		.pipe(tsProject())
		.js.pipe(gulp.dest("dist"));
});

7）测试应用

gulp
node dist/main.js

打印出Hello from TypeScript

2、向代码里添加模块

1）新建src/greet.ts文件：

export function sayHello(name: string){
	return `Hello from ${name}`;
}

更改main.ts，从greet.ts导入sayHello

import {sayHello} from "./greet";
console.log(sayHello("TypeScript"));

将greet.ts添加到tsconfig.json

{
	"files": [
		"src/main.ts",
		"src/greet.ts"
	],
	"compilerOptions": {
		"noImplicitAny": true,
		"target": "es5"
	}
}

2）执行gulp，执行