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,执行