2024年最全《TypeScript》入门与精通-tsconfig(2)，2024年最新Web前端内存优化面试题

2401_84447112

于 2024-05-14 13:33:11 发布

阅读量679

点赞数 28

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447112/article/details/138851510

版权

程序员专栏收录该内容

158 篇文章 2 订阅

订阅专栏

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

然后，我们再来看一下glob匹配模式，根据官网的说明，一共有以下三种：

简单的说，就是_代表的是任意文件，代表的是任意文件夹，拿例子中的"src//_"说明，就是src目录下任意文件夹下的任意.ts文件，再加上它是include，那么就是代表这个路径下的所有.ts文件都需要被编译；如果还是不大明白，那么可以直接去官网查看，官网对应的地址为：tsconfig.json

exclude配置项

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配置项

============================================================================

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

}

这是初始化时候的原文，但是这东西理解起来还是有难度的，博主挑一些常用的解释一下

target

编译后的目标版本，我们知道JavaScript有很多版本，而不同的浏览器，不同的版本所支持JS版本也是不同的，比如：ES5，ES6什么的，最终打包的时候，我们肯定是期望是打包完的代码能最终运行到绝大多数浏览器上的（又想吐槽一句，他瞄的IE走开），那么这里我们可以填：

“compilerOptions”: {

// …

// 这里可以填很多，比如：‘ES3’ (default)，‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’ or ‘ESNEXT’

// “target”: “ES5”,

// …

}

module

编译后代码遵循的规范，众所周知，自从有了NodeJS之后，js代码不仅仅是在前端使用了，各种地方，各种环境都可以用到，那么不同的环境JS代码遵循的规范也是不一样的，比如，常见的规范有ES规范有：es规范，commonjs规范

“compilerOptions”: {

// …

// 这里可以填很多，比如：‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es2015’, or ‘ESNext’

// “module”: “es2015”,

// …

}

在这里设置了生成代码的规范后，打包完成的代码将遵循该规范进行编译；

removeComments

“removeComments”: true /* Do not emit comments to output. */,

注释清空，默认为false，当值为true的时候，编译时会自动删除注释说明

strict

“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不香吗；

rootDir

入口文件，这个其实和编译范围的用法很接近，都是告诉TypeScript，从哪里开始编译，差不多就是编译范围的意思，假设，目录结构

├── src

│ ├── index1.ts

│ ├── index2.ts

│ ├── index3.ts

├── tsconfig.json

如果tsconfig.json中的rootDir如下所写

“compilerOptions”: {

// …

// “rootDir”: “./src”,

// …