首页 前端知识 TypeScript编译(tsconfig.json配置)

TypeScript编译(tsconfig.json配置)

2024-10-26 09:10:38 前端知识 前端哥 673 932 我要收藏

一、编译TypeScript单个文件

#编译指定文件
tsc .\app.ts  

#监控指定文件变化,并实时编译
tsc .\app.ts -w

二、编译项目文件

1、新建tsconfig.json文件

项目根目录新建sconfig.json文件

2、配置tsconfig.json文件

{
  /*
    tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译
    include 包含编译的文件
    ** 表示任意目录
    *表示任意文件
    exclude 排除编译的文件
  */
  "include": [
    //    src下任意目录下的任意文件
    "./src/**/*"
  ],
  "exclude": [
    "./src/hello/*"
  ],
  /*
compilerOptions 编译器选项
  */
  "compilerOptions": {
    //target    ts编译js版本指定  "ES3","ES5","ES6","ES2015","ES2016","ES2017","ES2018","ES2019","ES2020","ES2021","ES2022","ESNext"
    "target": "ES6",
    // module 指定要使用模块化的规范   "CommonJS","AMD","System","UMD","ES6","ES2015","ES2020","ESNext","None","ES2022","Node16","NodeNext"
    "module": "commonjs",
    //    lib用来指定项目使用的库,浏览器环境不用设置
    //    'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021',
    //'es2022', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.g
    //enerator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object
    //', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'e
    //s2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2019.intl', 'es2020.bigint', 'es2020.date', 'es2020.promise', 'es2020.sharedmem
    //ory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2020.number', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'es2021.intl', 'es2022.array'
    //, 'es2022.error', 'es2022.intl', 'es2022.object', 'es2022.sharedmemory', 'es2022.string', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'.
    //    "lib": [
    //      "dom"
    //    ]

    //    outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",
    // 将代码合并为一个文件
    //     Only 'amd' and 'system' modules are supported alongside --outFile.
    // 设置outFile后,所有的全局作用域中的代码会合并到一个文件,如果有模块化代码,需要设置target System
    //    "outFile": "./dist/app.js",

    //    allowJs 是否对js文件进行编译
    "allowJs": false,
    //   checkJs 是否检查js代码语法
    "checkJs": false,
    //   removeComments 是否移除注释
    "removeComments": false,
    //   noEmit不生成编译后的文件 检查语法用
    "noEmit": false,
    //    noEmitOnError 有错误时,是否生产编译文件
    "noEmitOnError": false,
    //    严格检查总开关 开发环境建议使用true
    "strict": false,
    //    编译后的文件是否使用严格模式
    "alwaysStrict": true,
    //    不允许使用隐式any类型
    "noImplicitAny": false,
    //    不允许不明确类型的this
    "noImplicitThis": false,
    //    严格的检查空值
    "strictNullChecks": false
  }
  //  "compilerOptions": {
  //    "module": "commonjs",
  //    "target": "es5",
  //    "sourceMap": true
  //  },
  //  "exclude": [
  //    "node_modules"
  //  ]
}

 3、编译文件

#编译项目配置文件
tsc    

#监控项目配置文件,变化后自动编译
tsc   -w

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19174.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!