環境搭建
安裝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
<title>Document/<title>
- 打開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)
聯繫郵箱：[email protected]
分享到:
閱讀更多 前端漫談 的文章
