TypeScript编译(tsconfig.json配置)

简介: TypeScript编译(tsconfig.json配置)

一、编译TypeScript单个文件

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

二、编译项目文件

1、新建tsconfig.json文件

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

2、配置tsconfig.json文件

1.{
  /*
    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

目录
相关文章
|
1天前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
|
5天前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
|
28天前
|
JavaScript 编译器
35.【TypeScript 教程】编译选项
35.【TypeScript 教程】编译选项
16 2
|
2月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
24天前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
27 0
|
28天前
|
JavaScript 编译器 IDE
36.【TypeScript 教程】tsconfig.json 配置
36.【TypeScript 教程】tsconfig.json 配置
13 0
|
2月前
|
JavaScript 前端开发 编译器
【TypeScript技术专栏】深入理解TypeScript编译过程
【4月更文挑战第30天】TypeScript编译过程包括解析、类型检查、语义分析和代码生成四个步骤。解析阶段将源代码转为AST;类型检查确保代码符合类型规则,捕获类型错误;语义分析检查代码逻辑一致性;最后生成JavaScript代码。这一过程保证了代码的语法、类型和语义正确性,提升开发效率和代码质量。了解此过程有助于开发者更好地理解和解决问题。
|
26天前
|
JavaScript 前端开发 Java
TypeScript 类型兼容性
TypeScript 类型兼容性
|
26天前
|
JavaScript 前端开发
typescript 混合类型
typescript 混合类型
|
10天前
|
JavaScript 前端开发 IDE
TypeScript中的声明文件(.d.ts):扩展类型系统
TypeScript的`.d.ts`声明文件为JS库提供类型信息,增强IDE支持,如自动完成和类型检查。通过声明合并,可在全局作用域定义类型。示例包括为`my-library`创建声明模块,导出函数和接口。声明文件通常存于`@types`或指定`typeRoots`。用于旧JS代码的类型注解,如`myGlobalObject`。学习更多,参阅TypeScript官方文档。分享你的TS声明文件经验!