使用--typescript參數新建React項目
create-react-app react-ts-demo --template typescript
新建Header.tsx文件,加入以下代碼:
import React, { FC } from 'react';
interface MyProps {
Name: string,
ID: number
}
export const Header:FC<MyProps> = props => {
return(
<>
`${props.ID} - ${props.Name}`
</>
)
}
注: export const Header:FC
也可以寫成:export const Header:FC
也就是對props對象結構(destructure)
思考:
1:interface 與 type的區別
1.1 interface 必須是Object類型,不能使用primitive類型(string, number, boolean, undefined, null), 如下例所示:
1.2 interface可以merge,但type不行
interface:
type會提示duplicate identifier error:
1.3 type中的property可以通過遍歷集合獲得
而interface不行
參考:
https://microsoft.github.io/TypeScript-New-Handbook/everything/#interface-vs-alias
https://pawelgrzybek.com/typescript-interface-vs-type/
其中的:接口 vs. 類型別名
https://www.tslang.cn/docs/handbook/advanced-types.html
2:鴨式辨型法 (Duck typing)
如果一只鳥,長得像鴨子、走路像鴨子、叫起來像鴨子,那它就是鴨子。
怎么理解這句話呢,且看以下代碼示例
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})
上述代碼中,調用addPoints函數時,我們傳遞的兩個參數{x:3,y:4},{x:5,y:1},並沒有繼承自IPoint,但他們符合IPoint的定義。 所以該調用也是合法的。
tsconfig.json中的配置表
編譯選項
選項 | 類型 | 默認值 | 描述 |
---|---|---|---|
--allowJs |
boolean |
false |
允許編譯javascript文件。 |
--allowSyntheticDefaultImports |
boolean |
module === "system" 或設置了 --esModuleInterop 且 module 不為 es2015 / esnext |
允許從沒有設置默認導出的模塊中默認導入。這並不影響代碼的輸出,僅為了類型檢查。 |
--allowUnreachableCode |
boolean |
false |
不報告執行不到的代碼錯誤。 |
--allowUnusedLabels |
boolean |
false |
不報告未使用的標簽錯誤。 |
--alwaysStrict |
boolean |
false |
以嚴格模式解析並為每個源文件生成 "use strict" 語句 |
--baseUrl |
string |
解析非相對模塊名的基准目錄。查看 模塊解析文檔了解詳情。 | |
--charset |
string |
"utf8" |
輸入文件的字符集。 |
--checkJs |
boolean |
false |
在 .js 文件中報告錯誤。與 --allowJs 配合使用。 |
--declaration -d |
boolean |
false |
生成相應的 .d.ts 文件。 |
--declarationDir |
string |
生成聲明文件的輸出路徑。 | |
--diagnostics |
boolean |
false |
顯示診斷信息。 |
--disableSizeLimit |
boolean |
false |
禁用JavaScript工程體積大小的限制 |
--emitBOM |
boolean |
false |
在輸出文件的開頭加入BOM頭(UTF-8 Byte Order Mark)。 |
--emitDecoratorMetadata [1] |
boolean |
false |
給源碼里的裝飾器聲明加上設計類型元數據。查看 issue #2577了解更多信息。 |
--experimentalDecorators [1] |
boolean |
false |
啟用實驗性的ES裝飾器。 |
--extendedDiagnostics |
boolean |
false |
顯示詳細的診段信息。 |
--forceConsistentCasingInFileNames |
boolean |
false |
禁止對同一個文件的不一致的引用。 |
--help -h |
打印幫助信息。 | ||
--importHelpers |
string |
從 tslib 導入輔助工具函數(比如 __extends , __rest 等) |
|
--inlineSourceMap |
boolean |
false |
生成單個sourcemaps文件,而不是將每sourcemaps生成不同的文件。 |
--inlineSources |
boolean |
false |
將代碼與sourcemaps生成到一個文件中,要求同時設置了 --inlineSourceMap 或 --sourceMap 屬性。 |
--init |
初始化TypeScript項目並創建一個 tsconfig.json 文件。 |
||
--isolatedModules |
boolean |
false |
將每個文件作為單獨的模塊(與“ts.transpileModule”類似)。 |
--jsx |
string |
"Preserve" |
在 .tsx 文件里支持JSX: "React" 或 "Preserve" 。查看 JSX。 |
--jsxFactory |
string |
"React.createElement" |
指定生成目標為react JSX時,使用的JSX工廠函數,比如 React.createElement 或 h 。 |
--listFiles |
boolean |
false |
編譯過程中打印文件名。 |
--locale |
string |
(platform specific) | 顯示錯誤信息時使用的語言,比如:en-us。 |
--mapRoot |
string |
為調試器指定指定sourcemap文件的路徑,而不是使用生成時的路徑。當 .map 文件是在運行時指定的,並不同於 js 文件的地址時使用這個標記。指定的路徑會嵌入到 sourceMap 里告訴調試器到哪里去找它們。 |
|
--maxNodeModuleJsDepth |
number |
0 |
node_modules依賴的最大搜索深度並加載JavaScript文件。僅適用於 --allowJs 。 |
--module -m |
string |
target === "ES6" ? "ES6" : "commonjs" |
指定生成哪個模塊系統代碼: "None" , "CommonJS" , "AMD" , "System" , "UMD" , "ES6" 或 "ES2015" 。 ► 只有 "AMD" 和 "System" 能和 --outFile 一起使用。 ► "ES6" 和 "ES2015" 可使用在目標輸出為 "ES5" 或更低的情況下。 |
--moduleResolution |
string |
module === "AMD" or "System" or "ES6" ? "Classic" : "Node" |
決定如何處理模塊。或者是"Node" 對於Node.js/io.js,或者是"Classic" (默認)。查看模塊解析了解詳情。 |
--newLine |
string |
(platform specific) | 當生成文件時指定行結束符: "crlf" (windows)或 "lf" (unix)。 |
--noEmit |
boolean |
false |
不生成輸出文件。 |
--noEmitHelpers |
boolean |
false |
不在輸出文件中生成用戶自定義的幫助函數代碼,如 __extends 。 |
--noEmitOnError |
boolean |
false |
報錯時不生成輸出文件。 |
--noErrorTruncation |
boolean |
false |
不截短錯誤消息。 |
--noFallthroughCasesInSwitch |
boolean |
false |
報告switch語句的fallthrough錯誤。(即,不允許switch的case語句貫穿) |
--noImplicitAny |
boolean |
false |
在表達式和聲明上有隱含的 any 類型時報錯。 |
--noImplicitReturns |
boolean |
false |
不是函數的所有返回路徑都有返回值時報錯。 |
--noImplicitThis |
boolean |
false |
當 this 表達式的值為 any 類型的時候,生成一個錯誤。 |
--noImplicitUseStrict |
boolean |
false |
模塊輸出中不包含 "use strict" 指令。 |
--noLib |
boolean |
false |
不包含默認的庫文件( lib.d.ts )。 |
--noResolve |
boolean |
false |
不把 /// <reference``> 或模塊導入的文件加到編譯文件列表。 |
--noStrictGenericChecks |
boolean |
false |
禁用在函數類型里對泛型簽名進行嚴格檢查。 |
--noUnusedLocals |
boolean |
false |
若有未使用的局部變量則拋錯。 |
--noUnusedParameters |
boolean |
false |
若有未使用的參數則拋錯。 |
--out |
string |
棄用。使用 --outFile 代替。 |
|
--outDir |
string |
重定向輸出目錄。 | |
--outFile |
string |
將輸出文件合並為一個文件。合並的順序是根據傳入編譯器的文件順序和 ///<reference``> 和 import 的文件順序決定的。查看輸出文件順序文件了解詳情。 |
|
paths [2] |
Object |
模塊名到基於 baseUrl 的路徑映射的列表。查看 模塊解析文檔了解詳情。 |
|
--preserveConstEnums |
boolean |
false |
保留 const 和 enum 聲明。查看 const enums documentation了解詳情。 |
--preserveSymlinks |
boolean |
false |
不把符號鏈接解析為其真實路徑;將符號鏈接文件視為真正的文件。 |
--preserveWatchOutput |
boolean |
false |
保留watch模式下過時的控制台輸出。 |
--pretty [1] |
boolean |
false |
給錯誤和消息設置樣式,使用顏色和上下文。 |
--project -p |
string |
編譯指定目錄下的項目。這個目錄應該包含一個 tsconfig.json 文件來管理編譯。查看 tsconfig.json文檔了解更多信息。 |
|
--reactNamespace |
string |
"React" |
當目標為生成 "react" JSX時,指定 createElement 和 __spread 的調用對象 |
--removeComments |
boolean |
false |
刪除所有注釋,除了以 /!* 開頭的版權信息。 |
--rootDir |
string |
(common root directory is computed from the list of input files) | 僅用來控制輸出的目錄結構 --outDir 。 |
rootDirs [2] |
string[] |
根(root)文件夾列表,表示運行時組合工程結構的內容。查看 模塊解析文檔了解詳情。 | |
--skipDefaultLibCheck |
boolean |
false |
忽略 庫的默認聲明文件的類型檢查。 |
--skipLibCheck |
boolean |
false |
忽略所有的聲明文件( *.d.ts )的類型檢查。 |
--sourceMap |
boolean |
false |
生成相應的 .map 文件。 |
--sourceRoot |
string |
指定TypeScript源文件的路徑,以便調試器定位。當TypeScript文件的位置是在運行時指定時使用此標記。路徑信息會被加到 sourceMap 里。 |
|
--strict |
boolean |
false |
啟用所有嚴格類型檢查選項。 啟用 --strict 相當於啟用 --noImplicitAny , --noImplicitThis , --alwaysStrict , --strictNullChecks 和 --strictFunctionTypes 和--strictPropertyInitialization 。 |
--strictFunctionTypes |
boolean |
false |
禁用函數參數雙向協變檢查。 |
--strictPropertyInitialization |
boolean |
false |
確保類的非undefined 屬性已經在構造函數里初始化。若要令此選項生效,需要同時啟用--strictNullChecks 。 |
--strictNullChecks |
boolean |
false |
在嚴格的 null 檢查模式下, null 和 undefined 值不包含在任何類型里,只允許用它們自己和 any 來賦值(有個例外, undefined 可以賦值到 void )。 |
--stripInternal [1] |
boolean |
false |
不對具有 /** @internal */ JSDoc注解的代碼生成代碼。 |
--suppressExcessPropertyErrors [1] |
boolean |
false |
阻止對對象字面量的額外屬性檢查。 |
--suppressImplicitAnyIndexErrors |
boolean |
false |
阻止 --noImplicitAny 對缺少索引簽名的索引對象報錯。查看 issue #1232了解詳情。 |
--target -t |
string |
"ES3" |
指定ECMAScript目標版本 "ES3" (默認), "ES5" , "ES6" / "ES2015" , "ES2016" , "ES2017" 或 "ESNext" 。 注意: "ESNext" 最新的生成目標列表為 ES proposed features |
--traceResolution |
boolean |
false |
生成模塊解析日志信息 |
--types |
string[] |
要包含的類型聲明文件名列表。查看 @types,--typeRoots和--types章節了解詳細信息。 | |
--typeRoots |
string[] |
要包含的類型聲明文件路徑列表。查看 @types,--typeRoots和--types章節了解詳細信息。 | |
--version -v |
打印編譯器版本號。 | ||
--watch -w |
在監視模式下運行編譯器。會監視輸出文件,在它們改變時重新編譯。監視文件和目錄的具體實現可以通過環境變量進行配置。詳情請看配置 Watch。 |
- [1] 這些選項是試驗性的。
- [2] 這些選項只能在
tsconfig.json
里使用,不能在命令行使用。
相關信息
- 在
tsconfig.json
文件里設置編譯器選項。
參考:https://www.tslang.cn/docs/handbook/compiler-options.html