React教程(二) : TypeScript
<p>使用--typescript参数新建React项目<br>create-react-app react-ts-demo --template typescript</p>
<p>新建Header.tsx文件，加入以下代码：</p>
<pre><code>import React, { FC } from 'react';
</code></pre>
<pre><code>interface MyProps {
Name: string,
ID: number
}
export const Header:FC<MyProps> = props => {
return(
<>
`${props.ID} - ${props.Name}`
</>
)
}
</code></pre>
<p>注： export const Header:FC<myprops> = props => {<br>
也可以写成：export const Header:FC<footerprops> = ({Name, ID}) => {<br>
也就是对props对象结构(destructure)</footerprops></myprops></p>
<p>思考：<br>
<strong>1：interface 与 type的区别</strong><br>
1.1 interface 必须是Object类型，不能使用primitive类型(string, number, boolean, undefined, null), 如下例所示：<br>
<img src="https://img2020.cnblogs.com/blog/2199371/202011/2199371-20201111163846570-1577747879.png"></p>
<p>1.2 interface可以merge，但type不行<br>
interface:<br>
<img src="https://img2020.cnblogs.com/blog/2199371/202011/2199371-20201111164039484-1906631722.png"><br>
type会提示duplicate identifier error:<br>
<img src="https://img2020.cnblogs.com/blog/2199371/202011/2199371-20201111164129216-1957244582.png"></p>
<p>1.3 type中的property可以通过遍历集合获得<br>
<img src="https://img2020.cnblogs.com/blog/2199371/202011/2199371-20201111194254140-2091895694.png"></p>
<p>而interface不行</p>
<p>参考：<br>
https://microsoft.github.io/TypeScript-New-Handbook/everything/#interface-vs-alias<br>
https://pawelgrzybek.com/typescript-interface-vs-type/<br>
其中的：接口 vs. 类型别名<br>
https://www.tslang.cn/docs/handbook/advanced-types.html</p>
<p><strong>2：鸭式辨型法 (Duck typing)</strong><br>
如果一只鸟，长得像鸭子、走路像鸭子、叫起来像鸭子，那它就是鸭子。<br>
怎么理解这句话呢，且看以下代码示例</p>
<pre><code>interface IPoint {
x:number
y:number
}
function addPoints(p1:IPoint,p2:IPoint):IPoint {
var x = p1.x + p2.x
var y = p1.y + p2.y
return {x:x,y:y}
}
// 正确
var newPoint = addPoints({x:3,y:4},{x:5,y:1})
</code></pre>
<p>上述代码中，调用addPoints函数时，我们传递的两个参数{x:3,y:4},{x:5,y:1}，并没有继承自IPoint，但他们符合IPoint的定义。 所以该调用也是合法的。</p>
<p>tsconfig.json中的配置表</p>
<h2>编译选项</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>选项</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>--allowJs</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>允许编译javascript文件。</td>
</tr>
<tr>
<td>
<code>--allowSyntheticDefaultImports</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>module === "system"</code>
或设置了
<code>--esModuleInterop</code>
且
<code>module</code>
不为
<code>es2015</code>
/
<code>esnext</code>
</td>
<td>允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。</td>
</tr>
<tr>
<td>
<code>--allowUnreachableCode</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不报告执行不到的代码错误。</td>
</tr>
<tr>
<td>
<code>--allowUnusedLabels</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不报告未使用的标签错误。</td>
</tr>
<tr>
<td>
<code>--alwaysStrict</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>以严格模式解析并为每个源文件生成
<code>"use strict"</code>语句</td>
</tr>
<tr>
<td>
<code>--baseUrl</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>解析非相对模块名的基准目录。查看
模块解析文档了解详情。</td>
</tr>
<tr>
<td>
<code>--charset</code>
</td>
<td>
<code>string</code>
</td>
<td>
<code>"utf8"</code>
</td>
<td>输入文件的字符集。</td>
</tr>
<tr>
<td>
<code>--checkJs</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>在
<code>.js</code>文件中报告错误。与
<code>--allowJs</code>配合使用。</td>
</tr>
<tr>
<td>
<code>--declaration</code>
<br>
<code>-d</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>生成相应的
<code>.d.ts</code>文件。</td>
</tr>
<tr>
<td>
<code>--declarationDir</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>生成声明文件的输出路径。</td>
</tr>
<tr>
<td>
<code>--diagnostics</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>显示诊断信息。</td>
</tr>
<tr>
<td>
<code>--disableSizeLimit</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>禁用JavaScript工程体积大小的限制</td>
</tr>
<tr>
<td>
<code>--emitBOM</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>在输出文件的开头加入BOM头（UTF-8 Byte Order Mark）。</td>
</tr>
<tr>
<td>
<code>--emitDecoratorMetadata</code>
<sup></sup>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>给源码里的装饰器声明加上设计类型元数据。查看
issue #2577了解更多信息。</td>
</tr>
<tr>
<td>
<code>--experimentalDecorators</code>
<sup></sup>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>启用实验性的ES装饰器。</td>
</tr>
<tr>
<td><code>--extendedDiagnostics</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>显示详细的诊段信息。</td>
</tr>
<tr>
<td>
<code>--forceConsistentCasingInFileNames</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>禁止对同一个文件的不一致的引用。</td>
</tr>
<tr>
<td>
<code>--help</code>
<br>
<code>-h</code>
</td>
<td></td>
<td></td>
<td>打印帮助信息。</td>
</tr>
<tr>
<td>
<code>--importHelpers</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>从
<code>tslib</code>
导入辅助工具函数（比如
<code>__extends</code>，
<code>__rest</code>等）</td>
</tr>
<tr>
<td>
<code>--inlineSourceMap</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>生成单个sourcemaps文件，而不是将每sourcemaps生成不同的文件。</td>
</tr>
<tr>
<td>
<code>--inlineSources</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>将代码与sourcemaps生成到一个文件中，要求同时设置了
<code>--inlineSourceMap</code>或
<code>--sourceMap</code>属性。</td>
</tr>
<tr>
<td>
<code>--init</code>
</td>
<td></td>
<td></td>
<td>初始化TypeScript项目并创建一个
<code>tsconfig.json</code>文件。</td>
</tr>
<tr>
<td>
<code>--isolatedModules</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>将每个文件作为单独的模块（与“ts.transpileModule”类似）。</td>
</tr>
<tr>
<td>
<code>--jsx</code>
</td>
<td>
<code>string</code>
</td>
<td>
<code>"Preserve"</code>
</td>
<td>在
<code>.tsx</code>文件里支持JSX：
<code>"React"</code>或
<code>"Preserve"</code>。查看
JSX。</td>
</tr>
<tr>
<td>
<code>--jsxFactory</code>
</td>
<td>
<code>string</code>
</td>
<td>
<code>"React.createElement"</code>
</td>
<td>指定生成目标为react JSX时，使用的JSX工厂函数，比如
<code>React.createElement</code>或
<code>h</code>。</td>
</tr>
<tr>
<td>
<code>--listFiles</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>编译过程中打印文件名。</td>
</tr>
<tr>
<td>
<code>--locale</code>
</td>
<td>
<code>string</code>
</td>
<td>
<em>(platform specific)</em>
</td>
<td>显示错误信息时使用的语言，比如：en-us。</td>
</tr>
<tr>
<td>
<code>--mapRoot</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>为调试器指定指定sourcemap文件的路径，而不是使用生成时的路径。当
<code>.map</code>文件是在运行时指定的，并不同于
<code>js</code>文件的地址时使用这个标记。指定的路径会嵌入到
<code>sourceMap</code>里告诉调试器到哪里去找它们。</td>
</tr>
<tr>
<td>
<code>--maxNodeModuleJsDepth</code>
</td>
<td>
<code>number</code>
</td>
<td>
<code>0</code>
</td>
<td>node_modules依赖的最大搜索深度并加载JavaScript文件。仅适用于
<code>--allowJs</code>。</td>
</tr>
<tr>
<td>
<code>--module</code>
<br>
<code>-m</code>
</td>
<td>
<code>string</code>
</td>
<td>
<code>target === "ES6" ? "ES6" : "commonjs"</code>
</td>
<td style="">指定生成哪个模块系统代码：
<code>"None"</code>，
<code>"CommonJS"</code>，
<code>"AMD"</code>，
<code>"System"</code>，
<code>"UMD"</code>，
<code>"ES6"</code>或
<code>"ES2015"</code>。
<br>► 只有
<code>"AMD"</code>和
<code>"System"</code>能和
<code>--outFile</code>一起使用。
<br>►
<code>"ES6"</code>和
<code>"ES2015"</code>可使用在目标输出为
<code>"ES5"</code>或更低的情况下。</td>
</tr>
<tr>
<td>
<code>--moduleResolution</code>
</td>
<td>
<code>string</code>
</td>
<td>
<code>module === "AMD" or "System" or "ES6" ? "Classic" : "Node"</code>
</td>
<td>
决定如何处理模块。或者是<code>"Node"</code>对于Node.js/io.js，或者是<code>"Classic"</code>（默认）。查看模块解析了解详情。
</td>
</tr>
<tr>
<td>
<code>--newLine</code>
</td>
<td>
<code>string</code>
</td>
<td>
<em>(platform specific)</em>
</td>
<td>当生成文件时指定行结束符：
<code>"crlf"</code>（windows）或
<code>"lf"</code>（unix）。</td>
</tr>
<tr>
<td>
<code>--noEmit</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不生成输出文件。</td>
</tr>
<tr>
<td>
<code>--noEmitHelpers</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不在输出文件中生成用户自定义的帮助函数代码，如
<code>__extends</code>。</td>
</tr>
<tr>
<td>
<code>--noEmitOnError</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>报错时不生成输出文件。</td>
</tr>
<tr>
<td>
<code>--noErrorTruncation</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不截短错误消息。</td>
</tr>
<tr>
<td>
<code>--noFallthroughCasesInSwitch</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）</td>
</tr>
<tr>
<td>
<code>--noImplicitAny</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>在表达式和声明上有隐含的
<code>any</code>类型时报错。</td>
</tr>
<tr>
<td>
<code>--noImplicitReturns</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不是函数的所有返回路径都有返回值时报错。</td>
</tr>
<tr>
<td>
<code>--noImplicitThis</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>当
<code>this</code>表达式的值为
<code>any</code>类型的时候，生成一个错误。</td>
</tr>
<tr>
<td>
<code>--noImplicitUseStrict</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>模块输出中不包含
<code>"use strict"</code>指令。</td>
</tr>
<tr>
<td>
<code>--noLib</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不包含默认的库文件（
<code>lib.d.ts</code>）。</td>
</tr>
<tr>
<td>
<code>--noResolve</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不把
<code>/// <reference``></code>或模块导入的文件加到编译文件列表。</td>
</tr>
<tr>
<td>
<code>--noStrictGenericChecks</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>禁用在函数类型里对泛型签名进行严格检查。</td>
</tr>
<tr>
<td>
<code>--noUnusedLocals</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>若有未使用的局部变量则抛错。</td>
</tr>
<tr>
<td>
<code>--noUnusedParameters</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>若有未使用的参数则抛错。</td>
</tr>
<tr>
<td>
<s>
<code>--out</code>
</s>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>弃用。使用
<code>--outFile</code> 代替。</td>
</tr>
<tr>
<td>
<code>--outDir</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>重定向输出目录。</td>
</tr>
<tr>
<td>
<code>--outFile</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>将输出文件合并为一个文件。合并的顺序是根据传入编译器的文件顺序和
<code>///<reference``></code>和
<code>import</code>的文件顺序决定的。查看输出文件顺序文件了解详情。</td>
</tr>
<tr>
<td>
<code>paths</code>
<sup></sup>
</td>
<td>
<code>Object</code>
</td>
<td></td>
<td>模块名到基于
<code>baseUrl</code>的路径映射的列表。查看
模块解析文档了解详情。</td>
</tr>
<tr>
<td>
<code>--preserveConstEnums</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>保留
<code>const</code>和
<code>enum</code>声明。查看
const enums documentation了解详情。</td>
</tr>
<tr>
<td>
<code>--preserveSymlinks</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不把符号链接解析为其真实路径；将符号链接文件视为真正的文件。</td>
</tr>
<tr>
<td><code>--preserveWatchOutput</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>保留watch模式下过时的控制台输出。</td>
</tr>
<tr>
<td>
<code>--pretty</code>
<sup></sup>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>给错误和消息设置样式，使用颜色和上下文。</td>
</tr>
<tr>
<td>
<code>--project</code>
<br>
<code>-p</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>编译指定目录下的项目。这个目录应该包含一个
<code>tsconfig.json</code>文件来管理编译。查看
tsconfig.json文档了解更多信息。</td>
</tr>
<tr>
<td>
<code>--reactNamespace</code>
</td>
<td>
<code>string</code>
</td>
<td>
<code>"React"</code>
</td>
<td>当目标为生成
<code>"react"</code> JSX时，指定
<code>createElement</code>和
<code>__spread</code>的调用对象</td>
</tr>
<tr>
<td>
<code>--removeComments</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>删除所有注释，除了以
<code>/!*</code>开头的版权信息。</td>
</tr>
<tr>
<td>
<code>--rootDir</code>
</td>
<td>
<code>string</code>
</td>
<td>
<em>(common root directory is computed from the list of input files)</em>
</td>
<td>仅用来控制输出的目录结构
<code>--outDir</code>。</td>
</tr>
<tr>
<td>
<code>rootDirs</code>
<sup></sup>
</td>
<td>
<code>string[]</code>
</td>
<td></td>
<td>
<i>根（root）</i>文件夹列表，表示运行时组合工程结构的内容。查看
模块解析文档了解详情。</td>
</tr>
<tr>
<td>
<code>--skipDefaultLibCheck</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>忽略
库的默认声明文件的类型检查。</td>
</tr>
<tr>
<td>
<code>--skipLibCheck</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>忽略所有的声明文件（
<code>*.d.ts</code>）的类型检查。</td>
</tr>
<tr>
<td>
<code>--sourceMap</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>生成相应的
<code>.map</code>文件。</td>
</tr>
<tr>
<td>
<code>--sourceRoot</code>
</td>
<td>
<code>string</code>
</td>
<td></td>
<td>指定TypeScript源文件的路径，以便调试器定位。当TypeScript文件的位置是在运行时指定时使用此标记。路径信息会被加到
<code>sourceMap</code>里。</td>
</tr>
<tr>
<td>
<code>--strict</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>启用所有严格类型检查选项。
<br>启用
<code>--strict</code>相当于启用
<code>--noImplicitAny</code>,
<code>--noImplicitThis</code>,
<code>--alwaysStrict</code>，
<code>--strictNullChecks</code>和
<code>--strictFunctionTypes</code>和<code>--strictPropertyInitialization</code>。</td>
</tr>
<tr>
<td>
<code>--strictFunctionTypes</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>禁用函数参数双向协变检查。</td>
</tr>
<tr>
<td><code>--strictPropertyInitialization</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>确保类的非<code>undefined</code>属性已经在构造函数里初始化。若要令此选项生效，需要同时启用<code>--strictNullChecks</code>。</td>
</tr>
<tr>
<td>
<code>--strictNullChecks</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>在严格的
<code>null</code>检查模式下，
<code>null</code>和
<code>undefined</code>值不包含在任何类型里，只允许用它们自己和
<code>any</code>来赋值（有个例外，
<code>undefined</code>可以赋值到
<code>void</code>）。</td>
</tr>
<tr>
<td>
<code>--stripInternal</code>
<sup></sup>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>不对具有
<code>/** @internal */</code> JSDoc注解的代码生成代码。</td>
</tr>
<tr>
<td>
<code>--suppressExcessPropertyErrors</code>
<sup></sup>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>阻止对对象字面量的额外属性检查。</td>
</tr>
<tr>
<td>
<code>--suppressImplicitAnyIndexErrors</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>阻止
<code>--noImplicitAny</code>对缺少索引签名的索引对象报错。查看
issue #1232了解详情。</td>
</tr>
<tr>
<td>
<code>--target</code>
<br>
<code>-t</code>
</td>
<td>
<code>string</code>
</td>
<td>
<code>"ES3"</code>
</td>
<td style="">指定ECMAScript目标版本
<code>"ES3"</code>（默认），
<code>"ES5"</code>，
<code>"ES6"</code>/
<code>"ES2015"</code>，
<code>"ES2016"</code>，
<code>"ES2017"</code>或
<code>"ESNext"</code>。
<br>
<br> 注意：
<code>"ESNext"</code>最新的生成目标列表为
ES proposed features
</td>
</tr>
<tr>
<td>
<code>--traceResolution</code>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
<td>生成模块解析日志信息</td>
</tr>
<tr>
<td>
<code>--types</code>
</td>
<td>
<code>string[]</code>
</td>
<td></td>
<td>要包含的类型声明文件名列表。查看
@types，--typeRoots和--types章节了解详细信息。</td>
</tr>
<tr>
<td>
<code>--typeRoots</code>
</td>
<td>
<code>string[]</code>
</td>
<td></td>
<td>要包含的类型声明文件路径列表。查看
@types，--typeRoots和--types章节了解详细信息。</td>
</tr>
<tr>
<td>
<code>--version</code>
<br>
<code>-v</code>
</td>
<td></td>
<td></td>
<td>打印编译器版本号。</td>
</tr>
<tr>
<td>
<code>--watch</code>
<br>
<code>-w</code>
</td>
<td></td>
<td></td>
<td>在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。监视文件和目录的具体实现可以通过环境变量进行配置。详情请看配置 Watch。</td>
</tr>
</tbody>
</table>
</div>
<ul>
<li>
<sup></sup> 这些选项是试验性的。</li>
<li>
<sup></sup> 这些选项只能在
<code>tsconfig.json</code>里使用，不能在命令行使用。</li>
</ul>
<h2>相关信息</h2>
<ul>
<li>在
<code>tsconfig.json</code>
文件里设置编译器选项。</li>
<li></li>
</ul>
</article>
<p>参考：https://www.tslang.cn/docs/handbook/compiler-options.html</p><br><br>
来源：https://www.cnblogs.com/Andy1982/p/13921256.html
頁:
[1]