这个配置的意思是,编译的时候是否需要去掉注释,也就是,如果TS中存在注释代码那么编译完成后,注释内容会被主动清除,放开后该行注释执行一下编译命令:
tsc ./app.ts
编译成功后,它会在当前目录下生成一个js文件,名字为:app.js,打开编译后的js文件:
// 这是一个测试文件
var app = “这是一个测试文件”;
很明显,配置并没有生效,是不是很奇怪,但确实是的,当我们直接使用tsc 某个文件时,配置文件并不会生效,只要当只执行命令:
tsc
只有执行这个命令,后面不跟随具体的文件名字,那么此时的编译会根据配置文件去生成对应的js文件;
那么第一个问题来了,TS怎么知道去编译哪个文件,实际上TS不是去知道编译哪个文件,而是,如果我们在tsconfig.json没有设定编译范围,那么TS会去编译所有的.ts后缀的文件,将其生成一份js文件;
==============================================================
在TS中一共有三个字段代表编译范围,直接看例子:
{
“compilerOptions”: {
// …
},
“include”: [
“src/**/*”
],
“exclude”: [
“node_modules”,
“**/*.spec.ts”
],
“files”: [
“core.ts”,
“sys.ts”,
“types.ts”,
“scanner.ts”,
“parser.ts”,
“utilities.ts”,
“binder.ts”,
“checker.ts”,
“emitter.ts”,
“program.ts”,
“commandLineParser.ts”,
“tsc.ts”,
“diagnosticInformationMap.generated.ts”
]
}
通过例子可知,分别是:“include”,“exclude”,“files”
files配置项,它代表有哪些ts文件需要被编译,它的值类型为数组,里面存储的都是相对路径或绝对路径,它不支持匹配模式,具体示例如下:
{
“files”: [
“./core.ts”,
“…/sys.ts”,
“types.ts”,
]
}
include配置项,它的用法和files有点类似,主要也是用来描述有哪些ts文件需要被编译,区别是,它支持glob匹配模式,先看个具体的例子:
“include”: [
“src/**/*”
],
然后,我们再来看一下glob匹配模式,根据官网的说明,一共有以下三种:
-
- 匹配0或多个字符(不包括目录分隔符)
-
? 匹配一个任意字符(不包括目录分隔符)
-
**/ 递归匹配任意子目录
简单的说,就是_代表的是任意文件,代表的是任意文件夹,拿例子中的"src//_"说明,就是src目录下任意文件夹下的任意.ts文件,再加上它是include,那么就是代表这个路径下的所有.ts文件都需要被编译;如果还是不大明白,那么可以直接去官网查看,官网对应的地址为:tsconfig.json
include配置项,它和Include的用法正好相反,它代表着,在其内的文件是排除在外,不被编译,除此之外的所有ts文件都会被编译,先看个例子:
“exclude”: [
“node_modules”,
“**/*.spec.ts”
],
用法和include一摸一样,具体可以参照include这一节,到这里,可能有的小伙伴会问,如果exclude和include以及files一起写,会怎么样,总结下来,大概就这么几条:
- include中的文件,可以被exclude过滤掉,比如:
“include”: [
“src/**/*”
],
“exclude”: [
“src/**/*”
],
等于啥都没干,因为include的文件被exclude给排除掉了;
- files中的文件,是不会被exclude给过滤掉的,比如
{
“files”: [
“./core.ts”,
“…/sys.ts”,
“types.ts”,
],
“exclude”: [
“./core.ts”,
“…/sys.ts”,
“types.ts”,
],
}
那么这几个文件还是会被编译,并不会因为exclude就将这几个排除在外;
另外exclude存在默认值,node_modules,bower_components,jspm_packages和目录,这几个目录如果没有特殊指定,会被默认排除在外;
============================================================================
compilerOptions,也就是配置项,这个对象中存储着所有TypeScript编译时的规则选项,对应在tsconfig.json中就是这么个样子:
{
“compilerOptions”: {
/* Basic Options */
// “incremental”: true, /* Enable incremental compilation */
“target”: “es5” /* Specify ECMAScript target version: ‘ES3’ (default), ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’ or ‘ESNEXT’. */,
“module”: “commonjs” /* Specify module code generation: ‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es2015’, or ‘ESNext’. */,
// “lib”: [], /* Specify library files to be included in the compilation. */
// “allowJs”: true, /* Allow javascript files to be compiled. */
// “checkJs”: true, /* Report errors in .js files. */
// “jsx”: “preserve”, /* Specify JSX code generation: ‘preserve’, ‘react-native’, or ‘react’. */
// “declaration”: true, /* Generates corresponding ‘.d.ts’ file. */
// “declarationMap”: true, /* Generates a sourcemap for each corresponding ‘.d.ts’ file. */
// “sourceMap”: true, /* Generates corresponding ‘.map’ file. */
// “outFile”: “./”, /* Concatenate and emit output to single file. */
// “outDir”: “./”, /* Redirect output structure to the directory. */
// “rootDir”: “./”, /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// “composite”: true, /* Enable project compilation */
// “tsBuildInfoFile”: “./”, /* Specify file to store incremental compilation information */
“removeComments”: true /* Do not emit comments to output. */,
// “noEmit”: true, /* Do not emit outputs. */
// “importHelpers”: true, /* Import emit helpers from ‘tslib’. */
// “downlevelIteration”: true, /* Provide full support for iterables in ‘for-of’, spread, and destructuring when targeting ‘ES5’ or ‘ES3’. */
// “isolatedModules”: true, /* Transpile each file as a separate module (similar to ‘ts.transpileModule’). */
/* Strict Type-Checking Options */
“strict”: true /* Enable all strict type-checking options. */,
// “noImplicitAny”: true, /* Raise error on expressions and declarations with an implied ‘any’ type. */
// “strictNullChecks”: true, /* Enable strict null checks. */
// “strictFunctionTypes”: true, /* Enable strict checking of function types. */
// “strictBindCallApply”: true, /* Enable strict ‘bind’, ‘call’, and ‘apply’ methods on functions. */
// “strictPropertyInitialization”: true, /* Enable strict checking of property initialization in classes. */
// “noImplicitThis”: true, /* Raise error on ‘this’ expressions with an implied ‘any’ type. */
// “alwaysStrict”: true, /* Parse in strict mode and emit “use strict” for each source file. */
/* Additional Checks */
// “noUnusedLocals”: true, /* Report errors on unused locals. */
// “noUnusedParameters”: true, /* Report errors on unused parameters. */
// “noImplicitReturns”: true, /* Report error when not all code paths in function return a value. */
// “noFallthroughCasesInSwitch”: true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
// “moduleResolution”: “node”, /* Specify module resolution strategy: ‘node’ (Node.js) or ‘classic’ (TypeScript pre-1.6). */
// “baseUrl”: “./”, /* Base directory to resolve non-absolute module names. */
// “paths”: {}, /* A series of entries which re-map imports to lookup locations relative to the ‘baseUrl’. */
// “rootDirs”: [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// “typeRoots”: [], /* List of folders to include type definitions from. */
// “types”: [], /* Type declaration files to be included in compilation. */
// “allowSyntheticDefaultImports”: true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
“esModuleInterop”: true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies ‘allowSyntheticDefaultImports’. */
// “preserveSymlinks”: true, /* Do not resolve the real path of symlinks. */
// “allowUmdGlobalAccess”: true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// “sourceRoot”: “”, /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// “mapRoot”: “”, /* Specify the location where debugger should locate map files instead of generated locations. */
// “inlineSourceMap”: true, /* Emit a single file with source maps instead of having a separate file. */
// “inlineSources”: true, /* Emit the source alongside the sourcemaps within a single file; requires ‘–inlineSourceMap’ or ‘–sourceMap’ to be set. */
/* Experimental Options */
// “experimentalDecorators”: true, /* Enables experimental support for ES7 decorators. */
// “emitDecoratorMetadata”: true, /* Enables experimental support for emitting type metadata for decorators. */
}
}
这是初始化时候的原文,但是这东西理解起来还是有难度的,博主挑一些常用的解释一下
编译后的目标版本,我们知道JavaScript有很多版本,而不同的浏览器,不同的版本所支持JS版本也是不同的,比如:ES5,ES6什么的,最终打包的时候,我们肯定是期望是打包完的代码能最终运行到绝大多数浏览器上的(又想吐槽一句,他瞄的IE走开),那么这里我们可以填:
“compilerOptions”: {
// …
// 这里可以填很多,比如:‘ES3’ (default),‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’ or ‘ESNEXT’
// “target”: “ES5”,
// …
}
编译后代码遵循的规范,众所周知,自从有了NodeJS之后,js代码不仅仅是在前端使用了,各种地方,各种环境都可以用到,那么不同的环境JS代码遵循的规范也是不一样的,比如,常见的规范有ES规范有:es规范,commonjs规范
“compilerOptions”: {
// …
// 这里可以填很多,比如:‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es2015’, or ‘ESNext’
// “module”: “es2015”,
// …
}
在这里设置了生成代码的规范后,打包完成的代码将遵循该规范进行编译;
“removeComments”: true /* Do not emit comments to output. */,
注释清空,默认为false,当值为true的时候,编译时会自动删除注释说明
“strict”: true // 可以理解成书写规范的总开关,
// “noImplicitAny”: true, /* 是否必须写any类型, */
// “strictNullChecks”: true, /* 不强制验证null类型 */
// “strictFunctionTypes”: true, /* 不强制验证函数类型 */
// “strictBindCallApply”: true, /* Enable strict ‘bind’, ‘call’, and ‘apply’ methods on functions. */
// “strictPropertyInitialization”: true, /* Enable strict checking of property initialization in classes. */
// “noImplicitThis”: true, /* Raise error on ‘this’ expressions with an implied ‘any’ type. */
// “alwaysStrict”: true, /* Parse in strict mode and emit “use strict” for each source file. */
严格书写规范,这一块区域的内容代表Typescript的书写规范,其中,如果strict的值为true,那么代表所有的都为true,最显著的区别就是,如下
const getName = name => {
return name + “oliver”;
};
这段代表,如果strict的值为true,会报错,因为name的类型没有定义,如果是任意类型,那么也应该定一个any类型,可以如果将strict的值改为false,那么就代表上面这个例子中的写法是允许的,其实就相当于在写JavaScript了,这个属性建议不要改,还是开启好,否则TS就没有意义了,JS不香吗;
入口文件,这个其实和编译范围的用法很接近,都是告诉TypeScript,从哪里开始编译,差不多就是编译范围的意思,假设,目录结构
├── src
│ ├── index1.ts
│ ├── index2.ts
│ ├── index3.ts
├── tsconfig.json
如果tsconfig.json中的rootDir如下所写
“compilerOptions”: {
// …
// “rootDir”: “./src”,
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
最后
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
…(img-oa6SxmZP-1712206522217)]
最后
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算