Typescript tsconfig.json 详解

来源: 阅读：- 2020-03-29 07:56:46

[提要]环境搭建安装tsnpm i -g typescript初始化工程mkdir ts-demonpm init -y 安装rollupnpm i -g rollupnpm i rollup -D添加rollup.config.jstouch rollup.config....

环境搭建

安装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 &#39;rollup-plugin-json&#39;;
import typescript from &#39;rollup-plugin-typescript&#39;;

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

package.json

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

main.ts

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

const user = &#34;Jane User,this is js hello from ts&#34;;

document.body.textContent = greeter(user);

index.html

&lt;!DOCTYPE html&gt;
&lt;html lang=&#34;en&#34;&gt;
&lt;head&gt;
 &lt;meta charset=&#34;UTF-8&#34;&gt;
 &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt;
 &lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;ie=edge&#34;&gt;
 &lt;title&gt;Document&lt;/title&gt;
 
&lt;/head&gt;
&lt;body&gt;
 
 &lt;script src=&#34;./app.js&#34;&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

打开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

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

其中，

相对路径，都是相对配置文件所在路径
优先级：命令行配置 > 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也可以互斥。

移除代码中注释

{
 &#34;files&#34;: [
 &#34;src/main.ts&#34;
 ],
 &#34;compilerOptions&#34;: {
 &#34;removeComments&#34;: 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(&#39;xiaoming&#39;,&#39;hello&#39;);

document.body.textContent = greeter(user);

//编译后
&#39;use strict&#39;;

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

开启null、undefined检测

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

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

参考文献

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

（正文已结束）

免责声明及提醒：此文内容为本网所转载企业宣传资讯，该相关信息仅为宣传及传递更多信息之目的，不代表本网站观点，文章真实性请浏览者慎重核实！任何投资加盟均有风险，提醒广大民众投资需谨慎！

热点排行

返回首页

Typescript tsconfig.json 详解

[提要]环境搭建安装tsnpm i -g typescript初始化工程mkdir ts-demonpm init -y 安装rollupnpm i -g rollupnpm i rollup -D添加rollup.config.jstouch rollup.config....

相关图文

热点排行

更多阅读

图文阅读