环境搭建

安装ts

npm i -g typescript

初始化工程

mkdir ts-demo
npm init -y 

安装rollup

npm i -g rollup
npm i rollup -D

添加rollup.config.js

touch rollup.config.js 
npm i rollup-plugin-json -D
npm i rollup-plugin-typescript typescript tslib -D

import json from 'rollup-plugin-json';
import typescript from 'rollup-plugin-typescript';

export default {
 input: 'src/main.ts',
 output: {
 file: 'dist/app.js',
 format: 'cjs'
 },
 plugins: [ typescript() ]
};

package.json

{
 "name": "ts-demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "dev-build": "rollup -c",
 "dev": "npm run dev-build && node ./dist/app.js"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "rollup": "^1.27.5",
 "rollup-plugin-json": "^4.0.0",
 "rollup-plugin-typescript": "^1.0.1",
 "tslib": "^1.10.0",
 "typescript": "^3.7.2"
 }
}

main.ts

// src/main.ts
function greeter(person: string):string {
 return "Hello, " + person;
}

const user = "Jane User,this is js hello from ts";

document.body.textContent = greeter(user);

index.html

• 打开index.html, 界面出现Hello, Jane User,this is js hello from ts ,恭喜你，你已经typescript入门了！！！

typescript配置文件

typescript支持两种配置文件：

• tsconfig.json
• xxx.json，其中包含其需要的配置项
  下方将侧重介绍tsconfig.json

http://json.schemastore.org/tsconfig

{
 "files": [ # 指定需要编译文件，相对配置文件所在
 "core.ts",
 "sys.ts",
 "types.ts",
 "scanner.ts",
 "parser.ts",
 "utilities.ts",
 "binder.ts",
 "checker.ts",
 "emitter.ts",
 "program.ts",
 "commandLineParser.ts",
 "tsc.ts",
 "diagnosticInformationMap.generated.ts"
 ],
 "exclude": [ # 指定不需要编译文件
 "node_modules",
 "**/*.spec.ts"
 ],
 "include": [ # 指定需要编译文件; 不配置files,include，默认除了exclude的所有.ts,.d.ts,.tsx
 "src/**/*"
 ],
 # 指定基础配置文件路径 大部分配置 compilerOptions, files, include, and exclude。切忌循环引用。
 "extends": "./configs/base",
 "compilerOptions": { # 告知TypeScript 编译器怎么编译
 "baseUrl": "./",
 "paths": { # 相对于baseUrl配置 
 "jquery": ["node_modules/jquery/dist/jquery"] ,
 "*": [
 "*",
 "generated/*"
 ]
 },
 "rootDirs":[ # 找平路径配置依赖
 "src/views",
 "generated/templates/views"
 ],
 "module": "commonjs",
 "noImplicitAny": true,
 "removeComments": true, # 移除代码注解 
 "preserveConstEnums": true,
 "sourceMap": true
 "types": [] #不会自动导入@types定义的包
 "noResolve":true , # 不会自动导入import 依赖, 编译会报错
 "downlevelIteration":true # 进行js 语法降级 for..of 
 "module": "esnext",
 "moduleResolution": "node",
 "strictNullChecks": true # 开启null，检测
 "target":'ES5'
 "strictBindCallApply":true
 "skipLibCheck":true, 
 },
 # 以上属性，为常用配置属性
 "compileOnSave": false, # 整个工程而言，需要编译器支持，譬如Visual Studio 2015 with TypeScript 1.8.4+
 "typeAcquisition":{ # 整个工程的类型定义.d.ts
 "enable":false, # 默认值 false 
 "include" : ["jquery", "lodash"] 
 "exclue"：["jquery", "lodash" ]
 },
 "references":[{ # 引用的工程 
 path: 'xxxx'
 }] 
}

其中，

• 相对路径，都是相对配置文件所在路径
• 优先级：命令行配置 > files > exclude > include 。
• exclude默认为：nodemodules, bowercomponents, jspm_packages and outDir配置项
• A.ts 引用B.ts ; A.ts在files 或者include中，B.ts也会被默认导入。
• 一个路径或者一个文件，在include与exclude之间是互斥的。
• typeRoots与@types互斥，types、@types也可以互斥。

移除代码中注释

{
 "files": [
 "src/main.ts"
 ],
 "compilerOptions": {
 "removeComments": true,
 }
}

// main.ts
//add the person type
interface Person{
 firstName: string;
 lastName: string;
}
class Student{
 firstName: string;
 lastName: string;
 constructor(firstName:string , lastName: string){
 this.firstName = firstName;
 this.lastName = lastName;
 }
}
// add the greeter 
function greeter(person: Person):string {
 return `Hello,${person.firstName}:${person.lastName}`
}
//new a student
const user = new Student('xiaoming','hello');

document.body.textContent = greeter(user);

//编译后
'use strict';

var Student = (function () {
 function Student(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
 }
 return Student;
}());
function greeter(person) {
 return "Hello," + person.firstName + ":" + person.lastName;
}
var user = new Student('xiaoming', 'hello');
document.body.textContent = greeter(user);

开启null、undefined检测

{
 "files": ["./src/main.ts"],
 "compilerOptions": {
 "removeComments": true,
 "declaration": true,
 "declarationDir": "./",
 "noResolve": false,
 "strictNullChecks": true
 },
}

const user ;
user = new Student('xiaoming','hello'); # 编译报错

参考文献

• www.rollupjs.com/

• www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

• github.com/rollup/rollup-plugin-typescript

• json.schemastore.org/tsconfig

本文作者：前端首席体验师(CheongHu)

联系邮箱：simple2012hcz@126.com

推荐阅读：南京之声