草庐IT

自学 TypeScript 第二天 编译选项

六扇有伊人 2023-03-28 原文

前言:

昨天我们学习了 TS 的数据类型,不知道大家回去以后练习没练习,如果你练习了一定会发现一个问题,我们的 TS 好像和 JS 不太一样

JS 写完之后直接就可以放到页面上,就可以用了,而我们的 TS 需要用 tsc 编译一下,编译为 JS 才能在页面中使用

这时就会有同学说了,诶呀,六扇老师,这也太麻烦了吧!

别急,好好阅读今天的文章,关于 TS 的编译选项

编译选项:

自动编译文件:

编译文件时,使用   -w  指令后, TS 编译器会自动监视文件的变换,如果 TS 文件变化会自动重新进行编译

tsc xxx.ts -w

图片示例:

自动编译成功了,问题也就来了,我们发现这样虽然是不用手动编译了,但我有两个 TS 文件呢,我需要打开两个窗口,输入两遍  tsc xxx.ts -w 那我要是有十个呢,百个呢?

自动编译整个项目:

我们在实际开发,写项目的时候,都看过配置文件吧,我们的 TS 也有,叫 tsconfig.json

tsconfig.json 是一个 JSON 文件,添加完配置文件之后,只需要在命令行中输入 tsc -w 即可完成对整个项目的自动编译

那怎么创建 tsconfig.json 文件呢,有的编辑器会自带,右键就可以创建了

如果不自带,自己新建文件创建就行了,创建完的 tsconfig.json 文件放那就行,打开命令行直接输入 tsc -w 

这时我们项目下的所有 TS 文件都会被自动编译

tsconfig.json的配置选项:

虽然整个项目都被编译了,但我们正常开发的时候肯定是用不到整个项目编译的,都是指定某个文件下,或几个文件,这时就需要配置选项了

include:

是我们最常用的配置选项,指定被编译文件的目录

默认值: [ " **/* " ] 

 ** 表示 任意目录  * 表示 任意文件 " src/**/* " 就表示 src 下的任意目录任意文件 

exclude:

上边说了, include 表示包含指定的意思,而我们的 exclude 正好相反,表示不包含

不希望被编译

什么意思呢,比如说我们在 src 里面又新加了一个 hello 文件夹,里面有一个 ts 文件,这时在执行那肯定都被编译,但我不想让 hello 目录下的 ts 文件被编译 怎么做

如图,只有 src 目录下的 app.ts 被编译了

 exclude 是可选的,一般的话不需要写,它默认值是 ["node_modules","bower_commponents","jspm_packages"] 

extends:

定义被继承的配置文件

”extends“:”./configs/base“

当前配置文件中会自动包含 config 目录下 base.json 中的所有配置信息

files:

指定被编译文件的列表,和 inclued 差不多 不过一个是文件 一个是目录

"files":[

"core.ts",

"sys.ts",

.....

]

compilerOptions:

conmpilerOptions 决定了编译器如何对我们的 ts 文件进行编译

里面有很多的子选项

target

用来设置 ts 代码的目标版本

可选值:

ES3,ES5,ES5/ES2015,ES7/ES2016,ES2017,ES2018,ES2019,ES2020,ESNext

语法:
"compilerOptions":{
"target": "ES3",
}

 

 

 module

用来指定使用的模块化规范

可选值:

none,commonjs,ES5/ES2015,ES7/ES2016,amd,system,ES2020,ESNext

语法:

"compilerOptions":{
"module": "ES2015",
}
lib

用来指定项目中所要用的库

一般情况下不需要改,正常在浏览器当中运行的代码 lib 是不需要设置的

语法:

"compilerOptions":{
"lib": ["es5","es6"."dom".....],
}
outDir

我们编译完 ts 生成 js 文件之后,我们的 js 文件是和 ts 文件在一起的,在正常开发的时候我们不希望它俩生成在同一个文件下边,就用到 outDir 了

语法:

"compilerOptions":{
"outDir": "./dist“,
}

outFile

可以将我们的代码合并为一个文件

语法:

"compilerOptions":{
"outFile": "./dist/app.js“,
}

allowJs  chenckJs removeComments noEmit noEmitOnError

allowJs 意思是,是否对我们的 js 文件进行编译,默认是 false

chenckJs 意思是,是否检查 js 代码符合 ts 语法规范,默认是 false

removeComments 意思是,是否移除注释
noEmit 意思是,执行编译,但不生成编译之后的文件,通常用来检查代码规范的

noEmitOnError 意思是,当有错误的时候不生成编译后的文件,避免错误代码编译

接下来的选项都是和 TS 语法检查相关的

alwaysStrict

我们都知道在我们写 js 代码的时候,都会有一个严格模式,在前边加上 “use strict” 就行了,那用 ts怎么加呢,设置的就是 alwaysStrict

语法:

"alwaysStrict":false (默认是 false)

noImplicitAny

前文说了,当 ts 中出现没设定类型的变量时候,会默认为any noimolictAny为true之后则不允许该值是 any

语法:

"noImplicitAny": true (默认是 false)

noImplicitThis

不允许不明的 this。我们在写函数的时,有时候函数的 this 不明,noImplicitThis 设置为 true 可以防止不明的 this 编译

语法:

"noImplicitThis":true (默认是 false)
strictNullChecks

严格的检查空值

语法:

"strictNullChecks": true(默认是 false)
strict

ts 配置中所有严格检查的总开关,值为 ture 上边的就可以都不写了,全部为 ture,false 同理

语法:

"strict": false(默认是 false)

开发建议为 true ,开启所有的严格检查,使我们的代码更严谨,不想要那个检查再单独设置为 false

好关于配置选项我们就先讲这么多,其实除此之外还有许多的配置,感兴趣的大家可以去查查官方文档,这里是六扇有伊人我们明天再见!

个人博客链接:http://blog.qianbaiyv.cn/get/my/blog/details/2311887075%40qq.com/150

 

有关自学 TypeScript 第二天 编译选项的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  3. ruby - Sinatra set cache_control to static files in public folder编译错误 - 2

    我不知道为什么,但是当我设置这个设置时它无法编译设置:static_cache_control,[:public,:max_age=>300]这是我得到的syntaxerror,unexpectedtASSOC,expecting']'(SyntaxError)set:static_cache_control,[:public,:max_age=>300]^我只想将“过期”header设置为css、javaascript和图像文件。谢谢。 最佳答案 我猜您使用的是Ruby1.8.7。Sinatra文档中显示的语法似乎是在Ruby1.

  4. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要,需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源,并重新打包,签名生成新的自定义的apk,下面我来介绍一下我的实现过程。APK修改,分为以下几步:反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机(针对系统自带apk,其他软件免root)3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了,直接进入主题:按键win+R输入cmd,打开命令窗口,并将路

  5. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言,一个比另一个好吗?还有更好的方法吗? 最佳答案 总结:Array#include?包含String元素,在接受和拒绝输入时均胜出,对于您的示例只有三个可接受的值。对于要检查的更大的集合,看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  6. ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2

    有没有办法跳过CSV文件的第一行,让第二行作为标题?我有一个CSV文件,第一行是日期,第二行是标题,所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组,我真的很想将其读取为CSV,以便我可以利用header。 最佳答案 根据您的数据,您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|

  7. .net - 是否有 Ruby .NET 编译器? - 2

    是否有适用于Ruby语言的.NETFramework编译器?我听说过DLR(动态语言运行时),这是否将使Ruby能够用于.NET开发? 最佳答案 IronRuby是Microsoft支持的项目,建立在动态语言运行时之上。 关于.net-是否有Ruby.NET编译器?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/199638/

  8. ruby - 选项卡的 Rubocop - 2

    我们想使用Rubocop来验证我们的ruby​​在语法上是否正确并遵循基本代码指南。除此之外我们有这个规则:我们使用制表符缩进以允许任何人决定他们希望如何呈现它们(将它们显示为2或4个空格)问题是rubocop似乎设计为完全拒绝缩进标签。我们怎样才能超越所有这些规则成为太空合规者?编辑:我正在考虑覆盖这个模块https://github.com/bbatsov/rubocop/blob/master/lib/rubocop/source_parser.rb将我文件中的所有制表符替换为2个空格,以创建gem的幻觉... 最佳答案 添加

  9. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单,以便根据用户输入的内容,取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  10. python - 使用 Python、Ruby 和 Perl 重新编译 MacPort 版本的 MacVim - 2

    关闭。这个问题是off-topic.它目前不接受答案。想改进这个问题吗?Updatethequestion所以它是on-topic用于堆栈溢出。关闭10年前。ImprovethisquestionLinux专家正在转向Mac(10.8)。因为我懒...我使用MacPorts安装MacVim。它似乎安装没有错误。我只需要mvim中的python、ruby和perl支持。$/opt/local/bin/mvim--version|egrep'patches|python|ruby|perl'Includedpatches:1-244,246-646+multi_lang-mzscheme+

随机推荐