首页 > 其他分享 >42 Typescript编译配置-webpack-babel

42 Typescript编译配置-webpack-babel

时间:2024-04-13 10:33:23浏览次数:26  
标签:文件 Typescript babel 42 ts js 编译 compilerOptions 默认值

TS编译配置

自动编译单个文件

tsc 1.ts

# 如果想要自动监视文件的变化,需要添加 `-W` 配置
tsc 1.ts -W

自动编译整个项目

初始化,会自动生成一个 tsconfig.json 文件,然后直接执行 tsc 命令,就可以对当前目录的所有ts文件进行编译,生成对应的js文件

# 初始化项目
tsc --init

# 编译项目
tsc

tsconfig.json 配置选项

include

定义希望被编译文件所在的目录,默认值:["**/*"]

# 所有src目录和tests目录下的文件都会被编译
"include":["src/**/*", "tests/**/*"]
exclude

定义需要排除在外的目录
默认值:["node_modules", "bower_components", "jspm_packages"]

# src目录下的hello目录下的文件都不会被编译
"exclude": ["./src/hello/**/*"]
extends

定义被继承的配置文件

# 当前配置文件中会自动包含config目录下base.json中的所有配置信息
"extends": "./configs/base"
files

指定被编译文件的列表,只有需要编译的文件少时才会用到

# 列表中的文件都会被TS编译器所编译
"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
compilerOptions选项
target

设置ts代码编译的目标版本,可选值: ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

# 我们所编写的ts代码将会被编译为ES6版本的js代码
"compilerOptions": {
    "target": "ES6"
}
lib

指定代码运行时所包含的库(宿主环境),可选值:ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......

"compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "outDir": "dist",
    "outFile": "dist/aa.js"
}
module

设置编译后代码使用的模块化系统,可选值:CommonJS、UMD、AMD、System、ES2020、ESNext、None

"compilerOptions": {
    "module": "CommonJS"
}
outDir

编译后文件的所在目录,默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置

# 设置后编译后的js文件将会生成到dist目录
"compilerOptions": {
    "outDir": "dist"
}
outFile

将所有的文件编译为一个js文件
默认会将所有的编写在全局作用域中的代码合并为一个js文件,如果module制定了None、System或AMD则会将模块一起合并到文件之中

"compilerOptions": {
    "outFile": "dist/app.js"
}
rootDir

指定代码的根目录,默认情况下编译后文件的目录结构会以最长的公共目录为根目录,通过rootDir可以手动指定根目录

"compilerOptions": {
    "rootDir": "./src"
}
allowJs

是否对js文件编译

checkJs

是否对js文件进行检查

"compilerOptions": {
    "allowJs": true,
    "checkJs": true
}
removeComments

是否删除注释,默认值:false

noEmit

不对代码进行编译,默认值:false

sourceMap

是否生成sourceMap,默认值:false

严格检查
  • strict
    • 启用所有的严格检查,默认值为true,设置后相当于开启了所有的严格检查
  • alwaysStrict
    • 总是以严格模式对代码进行编译
  • noImplicitAny
    • 禁止隐式的any类型
  • noImplicitThis
    • 禁止类型不明确的this
  • strictBindCallApply
    • 严格检查bind、call和apply的参数列表
  • strictFunctionTypes
    • 严格检查函数的类型
  • strictNullChecks
    • 严格的空值检查
  • strictPropertyInitialization
    • 严格检查属性是否初始化
额外检查
  • noFallthroughCasesInSwitch
    • 检查switch语句包含正确的break
  • noImplicitReturns
    • 检查函数没有隐式的返回值
  • noUnusedLocals
    • 检查未使用的局部变量
  • noUnusedParameters
    • 检查未使用的参数
高级
  • allowUnreachableCode
    • 检查不可达代码
    • 可选值:
      • true,忽略不可达代码
      • false,不可达代码将引起错误
  • noEmitOnError
    • 有错误的情况下不进行编译
    • 默认值:false

标签:文件,Typescript,babel,42,ts,js,编译,compilerOptions,默认值
From: https://www.cnblogs.com/songxia/p/18132556

相关文章

  • P4211 LCA 题解
    前置知识:树剖、差分题意给定一个\(n\)个节点的有根树树,根为\(1\)。有\(m\)个询问,每个询问给定\(l,r,z\),求\(\sum\limits_{i=l}^rdep[\textrm{LCA}(i,z)]\)。其中\(dep[x]\)表示\(x\)的深度,有\(dep[1]=1\)。题解式子中的\(dep\)不太好算,考虑转化成形式化......
  • TypeScript的严格模式,any和unknown都是顶级类型,any 和 unknown 的区别
    TypeScript中的严格模式在TS的严格模式中;不可以将null,undefined赋值给void;但是在非严格模式中就可以。Tip:在项目中;我们还是要开启严格模式,否则会出现意想不到的错误,我们可以在tsconfig.json文件的compilerOptions的strict中去配置tsconfig.json{"compilerOpti......
  • 鸿蒙开发TypeScript语言:【TypeScript 安装】
    TypeScript安装本文介绍TypeScript环境的安装。我们需要使用到npm工具安装。NPM安装TypeScript如果你的本地环境已经安装了npm工具,可以使用以下命令来安装。使用国内镜像:npmconfigsetregistryhttps://registry.npmmirror.com安装typescript:npminstall-g......
  • Typescript 详细总结1
    基本数据类型类型注释:numberlet num:number=5//数字类型let str:string='str'//字符串类型let boolen:boolean =true//布尔 类型断言,确定类型后,不能赋其他类型值any类型let  anything:any='ssssss'let  anything:any=223any类型......
  • 鸿蒙开发TypeScript语言:【简介与Hello World!】
    TypeScript教程TypeScript是JavaScript的一个超集,支持ECMAScript6标准([ES6教程])。TypeScript由微软开发的自由和开源的编程语言。TypeScript设计目标是开发大型应用,它可以编译成纯JavaScript,编译出来的JavaScript可以运行在任何浏览器上。语言特性TypeScript......
  • TypeScript 与组合式 API
    看吧:https://cn.vuejs.org/guide/typescript/composition-api.html为组件的props标注类型<scriptsetuplang="ts">constprops=defineProps({foo:{type:String,required:true},bar:Number})props.foo//stringprops.bar//number|undefine......
  • 042、古意
    042、古意唐●李颀男儿事长征,少小幽燕客。赌胜马蹄下,由来轻七尺。杀人莫敢前,须如猬毛磔。黄云陇底白云飞,未得报恩不得归。辽东小妇年十五,惯弹琵琶解歌舞。今为羌笛出塞声,使我三军泪如雨。 【现代诗意译】古意好男儿远去从军守卫边僵,他们从小就在幽燕之地游历。个个......
  • 基于java+springboot+vue实现的人事管理系统(文末源码+Lw)23-242
    摘 要使用旧方法对人事管理系统的信息进行系统化管理已经不再让人们信赖了,把现在的网络信息技术运用在人事管理系统的管理上面可以解决许多信息管理上面的难题,比如处理数据时间很长,数据存在错误不能及时纠正等问题。这次开发的人事管理系统对字典管理、公告管理、绩效管理、......
  • LC 429.N叉树的层序遍历
    429.N叉树的层序遍历给定一个N叉树,返回其节点值的层序遍历。(即从左到右,逐层遍历)。树的序列化输入是用层序遍历,每组子节点都由null值分隔(参见示例)。示例1:输入:root=[1,null,3,2,4,null,5,6]输出:[[1],[3,2,4],[5,6]]示例2:输入:root=[1,null,2,3,4,5,n......
  • 深入解析MySQL数据库报错:`ERROR 1146 (42S02): Table ‘mysql.user‘ doesn‘t exist`
    在安装或升级MySQL数据库时,你可能会遇到ERROR1146(42S02):Table'mysql.user'doesn'texist错误。这个错误表明尝试访问的mysql.user表不存在,这是MySQL用于存储用户账户和权限信息的关键系统表。本文将详细探讨这一错误的原因和解决方案,帮助你顺利完成MySQL的安装或恢复......