长春大都市欢迎您!
长春大都市>汽车>正文

Typescript tsconfig.json 详解

2020-03-29 11:53:09 来源: 阅读:-

环境搭建

安装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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

</head>
<body>

<script src="./app.js"></script>

</body>
</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

本文为企业推广,本网站不做任何建议,仅提供参考,作为信息展示!

推荐阅读:物理灭蚊

网友评论
请登录后进行评论| 0条评论

请文明发言,还可以输入140

您的评论已经发表成功,请等候审核

小提示:您要为您发表的言论后果负责,请各位遵守法纪注意语言文明

回到首页 回到顶部
长春大都市 关于我们| 联系我们| 招聘信息| 老版地图| 网站地图
免责声明:长春大都市所有文字、图片、视频、音频等资料均来自互联网,不代表本站赞同其观点,本站亦不为其版权负责。相关作品的原创性、文中陈述文字以及内容数据庞杂本站无法一一核实,如果您发现本网站上有侵犯您的合法权益的内容,请联系我们,本网站将立即予以删除!
Copyright © 2012-2019 http://www.ccddushi.com, All rights reserved.