胡振刚 發表於 2019-12-10 14:02:00

TypeScript tsconfig.json(TypeScript配置)

<p>  如果一个目录下存在一个<code>tsconfig.json</code>文件,那么意味着这个目录是TypeScript项目的根目录。&nbsp;<code>tsconfig.json</code>文件中指定了用来编译这个项目的根文件和编译选项。 一个项目可以通过以下方式之一来编译:</p>
<ul>
<li>不带任何输入文件的情况下调用<code>tsc</code>,编译器会从当前目录开始去查找<code>tsconfig.json</code>文件,逐级向上搜索父目录。</li>
<li>不带任何输入文件的情况下调用<code>tsc</code>,且使用命令行参数<code>--project</code>(或<code>-p</code>)指定一个包含<code>tsconfig.json</code>文件的目录。</li>
</ul>
<p>  当命令行上指定了输入文件时,<code>tsconfig.json</code>文件会被忽略。</p>
<h2>  示例</h2>
<p><code>tsconfig.json</code>示例文件:</p>
<ul>
<li>使用<code>"files"</code>属性</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span>"compilerOptions"<span style="color: rgba(0, 0, 0, 1)">: {
      </span>"module": "commonjs"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"noImplicitAny": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      </span>"removeComments": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      </span>"preserveConstEnums": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      </span>"sourceMap": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
    },
    </span>"files"<span style="color: rgba(0, 0, 0, 1)">: [
      </span>"core.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"sys.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"types.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"scanner.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"parser.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"utilities.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"binder.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"checker.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"emitter.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"program.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"commandLineParser.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"tsc.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"diagnosticInformationMap.generated.ts"<span style="color: rgba(0, 0, 0, 1)">
    ]
}</span></pre>
</div>
<ul>
<li>使用<code>"include"</code>和<code>"exclude"</code>属性</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
    </span>"compilerOptions"<span style="color: rgba(0, 0, 0, 1)">: {
      </span>"module": "system"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"noImplicitAny": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      </span>"removeComments": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      </span>"preserveConstEnums": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      </span>"outFile": "../../built/local/tsc.js"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"sourceMap": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
    },
    </span>"include"<span style="color: rgba(0, 0, 0, 1)">: [
      </span>"src/**/*"<span style="color: rgba(0, 0, 0, 1)">
    ],
    </span>"exclude"<span style="color: rgba(0, 0, 0, 1)">: [
      </span>"node_modules"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"**/*.spec.ts"<span style="color: rgba(0, 0, 0, 1)">
    ]
}</span></pre>
</div>
<p>  </p>
<h2><strong>  初始化tsconfig.json</strong></h2>
<div class="cnblogs_code">
<pre>yarn tsc -init</pre>
</div>
<p>初始化后文件结构如下:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"compilerOptions"<span style="color: rgba(0, 0, 0, 1)">: {
    </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Basic Options </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "incremental": true,                   /* Enable incremental compilation */</span>
    "target": "es5",                        <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    "module": "commonjs",                     <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "lib": [],                           /* Specify library files to be included in the compilation. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "allowJs": true,                     /* Allow javascript files to be compiled. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "checkJs": true,                     /* Report errors in .js files. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "declaration": true,                   /* Generates corresponding '.d.ts' file. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "sourceMap": true,                     /* Generates corresponding '.map' file. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "outFile": "./",                     /* Concatenate and emit output to single file. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "outDir": "./",                        /* Redirect output structure to the directory. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "rootDir": "./",                     /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "composite": true,                     /* Enable project compilation */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "removeComments": true,                /* Do not emit comments to output. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "noEmit": true,                        /* Do not emit outputs. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "importHelpers": true,               /* Import emit helpers from 'tslib'. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */</span>

    <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Strict Type-Checking Options </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    "strict": <span style="color: rgba(0, 0, 255, 1)">true</span>,                           <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Enable all strict type-checking options. </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "noImplicitAny": true,               /* Raise error on expressions and declarations with an implied 'any' type. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "strictNullChecks": true,            /* Enable strict null checks. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "strictFunctionTypes": true,         /* Enable strict checking of function types. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "strictBindCallApply": true,         /* Enable strict 'bind', 'call', and 'apply' methods on functions. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "strictPropertyInitialization": true,/* Enable strict checking of property initialization in classes. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */</span>

    <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Additional Checks </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "noUnusedLocals": true,                /* Report errors on unused locals. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "noUnusedParameters": true,            /* Report errors on unused parameters. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */</span>

    <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Module Resolution Options </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "baseUrl": "./",                     /* Base directory to resolve non-absolute module names. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "typeRoots": [],                     /* List of folders to include type definitions from. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "types": [],                           /* Type declaration files to be included in compilation. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "allowSyntheticDefaultImports": true,/* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */</span>
    "esModuleInterop": <span style="color: rgba(0, 0, 255, 1)">true</span>,                  <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "preserveSymlinks": true,            /* Do not resolve the real path of symlinks. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */</span>

    <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Source Map Options </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "inlineSources": true,               /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */</span>

    <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Experimental Options </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "experimentalDecorators": true,      /* Enables experimental support for ES7 decorators. */</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */</span>

    <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Advanced Options </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    "forceConsistentCasingInFileNames": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Disallow inconsistently-cased references to the same file. </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<p>  我们主要讲解target、module、strict和esModuleInterop四个默认开启项</p>
<ul>
<li>target:指TypeScript源代码编译后的JavaScript版本。</li>
<li>Module:当前代码的组织形式。</li>
<li>strict:指开启JavaScript的严格模式。</li>
<li>esModuleInterop:指允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示,仅为了类型检查。</li>
</ul>
<p>测试</p><br><br>
来源:https://www.cnblogs.com/fanqisoft/p/12016249.html
頁: [1]
查看完整版本: TypeScript tsconfig.json(TypeScript配置)