您所在的位置: > 主页 > 天津资讯网 > 汽车 > 正文
Typescript tsconfig.json 详解来源：　日期：2020-03-23 06:25:51  阅读：-

    环境搭建

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

    （正文已结束）

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

推荐图文
《歌唱祖国一首歌一座城》“家乡“采撷城市记忆，合奏时代之声”，由国家广播电视总局、中央广播电视总台联合...
最新资讯