前面我們已說了大部分typescript的核心內容，接下來我們就說說如何用typescript開闢現實項目。
由於angular和typescript連繫很嚴密，材料或許多，而且我會找機會特地說下這方面的學問，所以我們將重點放到如何用typescript連繫react上來。
置信許多朋儕都已想到或許再用typescript事情流了，所之前面我一向用最原始的體式格局人人或許會以為是否是太貧苦和不夠切近現實，實在事情流都是由最基礎的學問構成的，我們不僅要知其然，還要知其所以然，不然你在現實事情中有一點跟我講的東西不一樣的處所，你就不會用了。所之前面打牢基礎，如今我們最先現實組建事情流。
新建一個easy文件夾，然後
npm init啥也別管，一起回車，然後就well done了，項目初始化完成，最先裝react.
npm install react react-dom --save我們裝上了react並不能直接在瀏覽器內里用，人人曉得，一堆JSX代碼須要末了編譯成一般js才被瀏覽器看懂，這個事情之前是react的腳手架乾的，然則我們不單單議會用腳手架，還得會本身搭腳手架，由於我碰到過有的朋儕用react只能項目老大把項目什麼都設置好，他只去寫組件，編譯的時刻碰到一個相對路徑的變動都搞不定，如許就嚴重影響本身react妙技和項目希望了，所以我們從最基礎的來，教人人設置下。
我們運用webpack,
npm install webpack ts-loader --save-dev人人都曉得用腳手架裝置完react都邑出來 localhost://xxx之類的一個地點然後展現react裝置勝利，這說明我須要一個服務器，我們就整一個，
npm install lite-server --save-dev如許，服務器跑起來了，頁面也能看到了，然則我們須要一堆事要做，比方把typescript編譯成js代碼並緊縮，另有人人也看到了多貧苦前面，是否是我改點東西就得tsc一下，然後再革新一下頁面，異常貧苦我們須要自動看管，不空話，直接上webpack.
npm install webpack然後項目根目錄下，設置webpack.config.js,
module.exports = {
entry:"./src/index.tsx",
output:{
filename: "app.js",
},
devtool:"source-map",
resolve:{
extensions: [".ts", ".tsx", ".js"]
},
module:{
rules:[
{test:/\.tsx?$/,loader:"ts-loader"}
]
}
};異常簡樸，然則人人注重這裏我要強調的是webpack最新版本,省的一些參數寫起來不一樣，比方之前用的loaders如今替代成了rules，接着上typescript
npm install typescript --save-dev然後設置，輸入命令行，
tsc --init翻開根目錄的tsconfig.json，設置以下，
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": false,
"jsx": "react"
},
"exclude": [
"node_modules"
]
}幹得美麗，繼續，由於我們要用react，親信裝置
npm install react reac-dom --save-dev裝置好了react，然則react是jsx文件啊，縱然有js他也沒有範例啊，比方let a = 12;人家typescript是要醬紫的
let a:number = 12;這就輕易失事和報錯，所以我們舉行狀況治理。處置懲罰一下。
npm install --save-dev @types/react @types/react-dom功德圓滿，然則有個小題目，我怎樣運用事情流呢？
我期待着，
npm start然後就最先看管變動，
npm run build就編譯，能夠的，翻開package.json,拿走不謝。
{
"name": "easy",
"version": "1.0.0",
"description": "play and test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "lite-server",
"build": "webpack --mode production"
},
"author": "leolau",
"license": "ISC",
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1"
},
"devDependencies": {
"@types/react": "^16.3.10",
"@types/react-dom": "^16.0.5",
"lite-server": "^2.3.0",
"ts-loader": "^4.2.0",
"typescript": "^2.8.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
}
}另有末了一nainai,就是tsconfig.json內里加一句
"jsx": "react",//增添ts對jsx的支撐好了，浪一把，在根目錄下建立文件夾和文件src/components/HelloWorld.tsx
import * as React from 'react';
interface HelloProps{
name:string,
age:number
}
export class Hello extends React.Component<HelloProps,{}>{
render(){
return (
<div>
我是，{this.props.name},本年{this.props.age}歲了
</div>
);
};
}src/index.tsx以下，
import * as React from 'react';
import * as ReactDOM from 'react-dom'
import {Hello} from "./components/HelloWorld"
ReactDOM.render(<Hello name ="大彬哥" age ={18}/>,document.getElementById('app'));項目根目錄下，index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<div>我是否是你最心疼的人，你為啥不說話</div>
<script src="/dist/app.js"></script>
</body>
</html>如許就well done了，
npm start開闢，
npm run build編譯，直接共產主義階段，生涯太爽了。
總結
1.TS的開端設置
2.TS 數據範例 any 羅列
3.函數的參數和返回值範例
4.類 異常重要 異常重要
修飾符 public private
抽象類
接口
類繼續5.靜態類屬性和要領 Math
6.泛型
7.模塊化
systemjs 8.項目
TS+react+webpack連繫的運用
範例治理 js->tsx 2.0
如何用TS開闢react->TSX(難點->官網 項目)
package.json -> npm start npm run build 學完本系列三篇文章，人人就對ts有了基礎的相識和認識了，然則現實開闢過程當中還會碰到許多現實的題目，碰到的題目一方面人人能夠參考我的視頻教程
TypeScript極速完整進階指南
也能夠在本文章批評區留言，後續ts教程我會延續更新，迎接人人提出珍貴的建媾和題目，期待着我們的配合生長和提高，感謝人人！
