• typescript的安装与配置


    全局安装typescript

    在命令行输入 npm install -g typescript 或者也可以使用cnpm。安装完成后,假设当前目录下有index.ts文件,在命令行输入tsc index.ts,便可在当前目录下得到index.js文件。

    typescript的配置

    如果相对编译后的文件做一定的细化限制,我们可以使用typescript的配置文件。使用方法很简单,在项目根目录下创建一个json文件,命名为tsconfig.json即可。配置说明如下

    {
      "compilerOptions": {
        "allowUnreachableCode": true, // 不报告执行不到的代码错误。
        "allowUnusedLabels": false,    // 不报告未使用的标签错误
        "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
        "baseUrl": ".", // 工作根目录
        "experimentalDecorators": true, // 启用实验性的ES装饰器
        "jsx": "react", // 在 .tsx文件里支持JSX
        "sourceMap": true, // 是否生成map文件
        "module": "commonjs", // 指定生成哪个模块系统代码
        "noImplicitAny": false, // 是否默认禁用 any
        "removeComments": true, // 是否移除注释
        "types": [ //指定引入的类型声明文件,默认是自动引入所有声明文件,一旦指定该选项,则会禁用自动引入,改为只引入指定的类型声明文件,如果指定空数组[]则不引用任何文件
          "node", // 引入 node 的类型声明
        ],
        "paths": { // 指定模块的路径,和baseUrl有关联,和webpack中resolve.alias配置一样
          "src": [ //指定后可以在文件之直接 import * from 'src';
            "./src"
          ],
        },
        "target": "ESNext", // 编译的目标是什么版本的
        "outDir": "./dist", // 输出目录
        "declaration": true, // 是否自动创建类型声明文件
        "declarationDir": "./lib", // 类型声明文件的输出目录
        "allowJs": true, // 允许编译javascript文件。
        "lib": [ // 编译过程中需要引入的库文件的列表
          "es5",
          "es2015",
          "es2016",
          "es2017",
          "es2018",
          "dom"
        ]
      },
      // 指定一个匹配列表(属于自动指定该路径下的所有ts相关文件)
      "include": [
        "src/**/*"
      ],
      // 指定一个排除列表(include的反向操作)
      "exclude": [
        "demo.ts"
      ],
      // 指定哪些文件使用该配置(属于手动一个个指定文件)
      "files": [
        "demo.ts"
      ]
    }

    下面介绍一些常用的字段细节:

    "baseUrl"

    "baseUrl":"." 说明工作目录的根路径是tsconfig.json所在的目录,如果指定为"baseUrl":"src",则根路径为tsconfig.json所在的目录下的src目录

    "target"

    指定生成的js版本,默认为"ES3",其余选项为'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020',  'ESNEXT',“EXNEXT”包含最新的一些TC39标准提案,具体见 https://github.com/tc39/proposals

    "module"

    指定生成代码的模块类型,选项有'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', 'ESNext'。

    如果不指定,则由target字段决定,target为es3或者es5的时候,module的默认值为commonjs,当target为其他的值的时候,那么module的默认值为es6。

    "types"

    一个数组。如果指定了types,只有被列出来的包才会被包含进来。 比如:

    {
       "compilerOptions": {
            "types" : ["node", "lodash", "express"]
       }
    }

    这个tsconfig.json文件将仅会包含 ./node_modules/@types/node./node_modules/@types/lodash./node_modules/@types/express。/@types/。 node_modules/@types/*里面的其它包不会被引入进来。

    指定"types": []来禁用自动引入@types包。

    注意,自动引入只在你使用了全局的声明(相反于模块)时是重要的。 如果你使用 import "foo"语句,TypeScript仍然会查找node_modulesnode_modules/@types文件夹来获取foo包。

    “lib”

    一个数组,指定需要引入的库。如果--lib没有指定默认注入的库的列表。默认注入的库为:
    ► 针对于--target ES5DOM,ES5,ScriptHost
    ► 针对于--target ES6DOM,ES6,DOM.Iterable,ScriptHost

    其他配置值可参考: https://www.tslang.cn/docs/handbook/compiler-options.html

    这些库主要是为原生的一些类型和api提供类型接口,注意尽量不要引入无用的库,比如写node项目就可以不需要引入DOM相关的库,避免编译时报错。

    ”include“

    一个数组,该数组下的文件都会被编译,该字段可以使用通配符,而”files“字段中只能一个个文件指定,不能使用通配符。所以建议使用include而尽量少用files。

    ”exclude“

    一个数组,与”include“字段相反,该数组内的文件不会被编译,可使用通配符。

    小tips:命令行输入tsc --init会生成一个包含常用的配置的tsconfig.json文件。

     

  • 相关阅读:
    Android导出jar包后的资源使用问题
    怎样设计接口?
    自己动手写shell之chgrp,chown,chmod
    妹子图太多怎么看才好,Swing来支招
    Etcd学习(一)安装和.NETclient測试
    js中return false,return,return true的使用方法及区别
    C语言运算符的优先级
    运动物体检测与跟踪——累积权重构建背景模型
    推理集 —— 现场的观察
    推理集 —— 现场的观察
  • 原文地址:https://www.cnblogs.com/AwenJS/p/13839905.html
Copyright © 2020-2023  润新知