TypeScript

常用编译选项该选项全部都是compilerOption配置中的选项。allowJs:说明:在编译时,默认编译的全是.ts文件,然后在编译输出的文件夹中,存放的只是被编译的.ts转.js文件。例如:在上图中,src中存在index.js文件,我们也需要将该文件进行编译,然后让它也输出的被编译的build文件中。只需要将allowJs设置为true即可。checkJs:说明:将allowJs打开后,如果js文件中的类型设置错误了,默认是不进行提示的,而将checkJS选项设置为true后,在编译js文件时,也会对js文件进行编译检查。removeComments:说明:当为该选项设置成true时,在编译时,将被编译文件中的注释给删除掉。noEmit:说明:在编译时,只进行编译语法检查,不生成编译后的.js文件。noEmitOnError:说明:在编译时,如果存在错误,不生成编译后的.js文件,只有没有错误时,才会生成编译后的js。alwayStript:说明:它的默认值是一个true,当为true时,被编译生成的文件,都是严格模式的.js文件。当为false时,则关闭严格模式。script:说明:它是类型检查的总开关,如果将该选项置为false,则可以根据自己去打开某个具体的子选项。noImplicitAny:说明:当打开该选项时,如果有隐式的any则会报错,必须声明any或者其他类型。//如果不对a和b进行声明类型,那么它就是一个隐式的any,则会报错,我们必须需要对它声明类型,哪怕是any。functionadd(a,b){returna+b;}strictNullChecks:说明:检查null和undefined,如果该值为null或undefined,则不允许去调用其他内容。//假设页面上现在没有a标签leta=document.querySelector('a');console.log(a.style);//由于a是null,所以此时会报错。

2022-7-12 82 0
TypeScript

TypeScript是JavaScript的一个超集,优化了JavaScript中没有静态类型的缺点。并且在编译时,可以发现一些错误,在vscode中,当出错时,未当编译时就会出现红色波浪线。1.安装提示:在安装TypeScript之前,需要先安装Node.npminstall-gtypescript当安装之后,全局中则多了一个tsc命令。2.编写及编译在安装TypeScript之后,我们则可以创建以.ts为后缀的文件了,以.ts为后缀的文件,里面就是TypeScript代码。当TypeScript文件中的代码写完之后,我们需要对它进行编译成JavaScript文件,就像Java一样,需要将.java文件编译成.class。需要在终端中执行以下命令,进行编译。tsc文件名.ts当执行完以下命令后,则生成了一个编译好的.js文件。vscode报错问题:在vscode中,如果不生成tsconfig.json配置文件,在编译TypeScript生成JavaScript文件后,就会报重复定义的错误。解决办法:只需要生成一下该文件即可[无论是用tsc命令生成,还是手动创建一个tsconfig.json文件]。3.编译错误在编译的过程中,会检查你编写的TypeScript代码有没有问题,如果出现了问题,那么在终端中则会显示哪里出现了问题。但是,它并不会影响生成JavaScript文件,就算编译时出现了错误,它依旧会生成JavaScript文件。我们可以在tsconfig.json中把noEmitOnError这个选项解开注释使其生效,这样当TypeScript编译错误时,就不会在生成JavaScript文件了。4.tsc命令1.编译某个文件tsc文件名.ts2.监听某个文件,变化时自动编译tsc文件名.ts--wach3.一次性编译所有文件tsc4.监听所有文件的变化,变化时自动编译tsc--watch5.生成配置文件tsc--init5.配置文件我们可以通过tsc--init命令去生成一个配置文件,在终端运行以下命令。tsc--init当运行完如上命令后,在文件夹中则会生成一个tsconfig.json文件夹。该文件中,存储的都是配置选项,noEmitOnError选项就在其中[TypeScript编译错误时不生成JavaScript]。在该JSON文件中,是可以写注释的,并且它一共有5个大选项。compilerOptions:编译选项,生成配置文件时默认就带该选项。files:单独需要编译的文件,此次编译只会编译里面的文件。include:指定文件夹,此次编译文件夹中的文件。exclude:不编译该文件夹中的内容,默认值为:node_modules…extends:表示继承的其他配置文件。“compilerOptions”说明:编译选项.target:说明:将TypeScript编译成ECMAScript哪个版本?"compilerOptions":{"target":"es2015"或者"target":"es6"}outDir:说明:默认情况下,是将编译后的.js文件放到根目录的,我们可以通过该选项去指定编译生成的.js文件放到哪个位置。假如main.ts放在了src目录下,并且将outDir设置成了./js,那么编译后,这个被编译生成的main.js是放在./js/src/main.js中的。"compilerOptions":{"outDir":"./js"}module:说明:该选项可以选择模块化系统。可选值:CommonJS【require】、Es6【import】、UMD、AMD、System、ES2020、ESNext."compilerOptions":{"module":"CommonJS"}“files”说明:如果在该数组中指定了文件路径,那么此次编译就只会编译元素中的文件。提示:该选项的元素中,只能指定一个单独的.ts文件,不能指定文件夹。"files":["./src/index.ts"]“extends”说明:继承其他配置文件的配置。"extends":"./src/tsconfig.json"“include”说明:每个元素的内容为一个文件夹地址,编译时会编译文件夹中的文件。提示:可以选择通配符,详情看代码注释。"include":[//编译src文件夹下的,所有文件夹[**]中的所有文件[*]"./src/**/*"]“exclude”说明:数组每个元素是一个地址,对这些元素中的地址不进行编译。默认值:node_module…"exclude":["..."]

2022-7-10 74 0