寫在前面
一直在探尋，那優雅的美；一直在探尋，那精湛的技巧；一直在探尋，那簡單又直白，優雅而美麗的代碼。css
------ 可是在JavaScript的動態類型、有時尷尬的自動類型轉換，以及 「0 == false」 是true的尷尬, 你知道 「[undefined] == 0「 是什麼返回結果嗎？再而後html
function add (a, b) {
return a+b
}
add ("1", 2) // 12
這個結果是返回是12。vue
還記得某個深夜，當你望着萬行代碼流出千行熱淚的時候嗎？最後發現有一個if語句，條件爲‘’ 判false了？ 或者發現忘記加parseInt致使的大坑？node
是時候亮出利器了。react
TypeScript的簡單入門
咱們都知道JavaScript是動態類型，動態編譯的網頁腳本語言，「 動態 」 這個詞語實如今一個純粹的網頁腳本語言身上來講，彷佛並無什麼不妥。但如今，JavaScript要運行在node中，運行在服務端，甚至最初的網頁腳本js都由webpack，gulp這類的自動化構建工具變成了一個具備工程化、大型化、交互複雜化、性能要求高的 」 編程語言 「 了。webpack
而這個時候，最初的動態類型，或者所謂的 」object類型「，再或者雙等號兩邊的尷尬，在構建這些 」 大型軟件系統 （大型屎山）「 的時候，沉積的類型債務就真的是一座巨大的屎山了。git
TypeScript必定程度上解決了這個問題，它能夠一古腦兒的將屎山上的一大坨清除，在各類中大型團隊形形色色的開發者們中間得到一致的好評。github
--------------------------------------------------知識分割線----------------------------------------------------web
若是你但願可以一邊看，一邊敲，你能夠先轉到下面的React和TypeScript章節，搭建一個基於create-react-app建立的typeScript的react架構，而後再回來看看這些示例，很少、很簡單。typescript
TypeScript是JavaScript的超集，它是一門編譯型語言，我我的認爲，入門TypeScript從如下三個點入手，而後結合react的搭建、再到實際的項目應用，在應用中陸續接觸更多的技巧，泛型、枚舉、類型推論、命名空間等等。咱們先看看最重要的三點。
靜態類型
TypeScript能夠實現靜態的變量申明, 以下面的例子，注意在TypeScript中 string類型、 object類型的首字母也是小寫。
// 靜態類型申明
let isStatic: boolean = false;
isStatic = 1; // error: Cannot convert 'number' to boolean
let isString: string = 1; // Type '1' is not assignable to type 'string'.
TypeScript裏，在有些沒有明確指出類型的地方，類型推論會幫助提供類型。以下面的例子
let a = 1;
a = false;
alert(a); // error: Cannot convert 'boolean' to number
絕大多數狀況類型推導就像上面那樣的狀況同樣，a = 1 ，a就是number類型了。
還有一些涉及更多的類型，入門能夠暫時忽略。
這裏咱們學習到的一點是： TypeScript的變量類型是靜態的，每個變量都會有一個固定的類型。
函數
讓咱們再看看js中函數的定義：
function add (a, b) {
return a + b;
}
上面這個函數實現了兩數相加，在本文開篇我掛了這個代碼上去，它的調用方式是這樣的：
add ("1", 2) // 12
」1「 + 2 = 12 , 雖然這裏的add函數看起來挺簡單的，咱們換個方式看看，就知道這個有多難受了。
add(testNumber(), 2)
誰能保證testNumber返回的必定是number ？
TypeScript能夠
function add (a: number, b: number) : number {
return a + b;
}
在TypeScript中能夠經過相似變量申明那樣的類型申明的方式，申明一個函數的入參，返回的具體類型格式，可以真正保證函數的輸入輸出的一致性。
add("1", 2) // Argument of type '"1"' is not assignable to parameter of type 'number'
function testNumber () {
let num = '1';
return num;
}
function add (a: number, b: number) : number {
return a + b;
}
add(testNumber(), 2); // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)
如今這些代碼將直接報錯，沒法經過編譯，這就是靜態類型的強大之處。
接口
接口是TypeScript的核心原則之一的實現，是對值所具備的結構進行類型檢查。
這句話什麼意思呢？說簡單點，接口就是對象的屬性，對象上的方法也能夠作類型檢查，能夠約束某個對象的值必須是預期的值。例如：
interface IAddObj {
a: number,
b: number
}
function add (addObj: IAddObj) : number {
return addObj.a + addObj.b;
}
咱們定義add函數，但願傳入一個addObj的對象值，而後對象上有a和b，這時候我想要規定這個對象必須有a和b，並且a和b是number類型的。
這就是接口最簡單，80%，最通用的用法：規定對象的屬性
React&TypeScript的環境搭建
前提
首先你電腦上須要安裝有nodejs、npm，怎麼安裝百度便可，其次你須要對react和webpack有必定的認知。這是前提。
第一步 工程建立
一、安裝create-react-app
安裝create-react-app，打開命令行 輸入命令
npm install -g create-react-app
二、建立基於TypeScript的react環境
打開命令行 輸入
create-react-app apptest --scripts-version=react-scripts-ts
三、爲了可以自定義webpack打包配置，咱們還要運行一個命令，進入項目目錄/apptest運行 運行後提示輸入y便可
npm run eject
四、在項目目錄運行命令： npm run start 稍等片刻就能夠看見react的歡迎界面啦
第二步 目錄規整
若是你想要直接獲取規整後的源代碼，在個人git能夠下載到： 連接 下載完成在目錄npm install 便可。
建立完項目後，能夠看見目前的目錄結構仍是比較混亂的，如今讓咱們來梳理一下
主要規整 /src 主代碼目錄中的文件，咱們依次新建幾個文件夾
assets 資源目錄，存放css、image、字體文件等
components 存放組件目錄
views 存放主視圖目錄
utils 存放工具函數、工具類
config 存放公共配置文件
規整後的文件目錄以下，我將示例代碼分別分配到了其中
須要注意的是移動文件後，對應的資源引用目錄的更改。
而後須要修改根目錄tslint.json爲：
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"ordered-imports": false
},
"jsRules": {
"ordered-imports": false
}
}
而後從新運行 npm run start 就能夠了，如今能夠在App.vue裏試一試TypeScript了
小結
原文：https://www.cnblogs.com/ztfjs/p/react_typescript_test.html
到這裏，其實還遠遠沒有完結，咱們還須要引入其餘的組件來開發一個真正的React項目，還須要制定一套規範去搭建一個React團隊，拭目以待。