typeScript-基礎篇(一)

引讀：此篇文章是ts系列博客的第一篇，其實我主要想稱述一個觀點：從觀念上重視起ts來；

爲何這樣說呢？舉個栗子: 在jquery時代，vue1.x剛出來的時候，咱們會自學一些vue相關的東西，目前也是，會vue的童鞋會自學react，反之，會react童鞋也會自學vue，爲何他們會自學vue或者react，而不多人自學ts呢？由於在某些童鞋的觀念裏面，ts是一個無關緊要的東西，不學也無所謂；也就是說，當某我的想學某項技術的時候，必定是這個技術在他的觀念裏面已經足夠重要了。

爲何要接入typescript

目前的前端三駕馬車，angular,vue,react,惟有vue2.x對ts的支持不是很友好， vue3.0用ts重構了一下，前不久尤大也在官微上面作了些許稱述，說你們的關注點都放到了typeScript上了； 那麼爲何ts如此受關注呢？ 使用 Typescript 編程有一些顯而易見的好處：

• javascript因爲自身的弱類型，使用起來很是靈活。
• 由於 Typescript 類型是固定的，用 Typescript 寫的代碼更加容易把控，也更易於調試。
• 得益於模塊，命名空間和更好的面向對象編程的支持，使得 Typescript 更容易去構建大型和複雜的項目。
• 由於 Typescript 有編譯成 Javascript 的過程，使其能夠在項目上線運行和發生錯誤以前能夠捕獲到不一樣類型的錯誤。
• 參數類型沒有校驗，有時會出現一些因爲類型轉換帶來的未知問題。
• 便於後續人員接手以前項目，不用通讀整個基礎庫代碼，經過聲明文件就能夠知道主要基礎庫裏面有哪些工具方法，就能夠知道，這些方法怎麼使用，如何傳參等等
• 能夠擴展目前項目所用技術邊界，提升夥伴學習積極性

強類型與弱類型

在強類型語言中，當一個對象從調用函數傳遞到被調用函數時，其類型必須與被調用函數中聲明的類型兼容

A(){
        B(x)
    }
    B(y){
        // y能夠賦值x，程序運行良好
    }

• 強類型語言定義：不容許改變變量的數據類型，除非進行強制類型轉換
• 弱類型語言定義：變量能夠被賦予不一樣的數據類型
• 靜態類型語言：在編譯階段肯定全部變量的類型
• 動態類型語言：在執行階段肯定全部變量的類型

靜態類型語言	動態類型語言
對類型極度嚴格	對類型很是寬鬆
當即發現錯誤	bug可能隱藏很長時間
運行時性能好	運行時性能好
子文檔化	可讀性差

第一個ts程序

ts在線編譯工具 www.typescriptlang.org/play/index.html

- npm init -y
- npm i typescript -g
- tsc --init  // 建立tsconfig.json
- npm i webpack webpack-cli webpack-dev-server -D
- npm i ts-loader typescript -D
- npm i html-webpack-plugin -D
- npm i clean-webpack-plugin  webpack-merge -D

let hello: string = 'hello ts'

build > webpack.base.config.js

const HtmlWebpackPlugin = require('html-webapck-plugin')
module.exports = {
    entry: './src/index.ts',
    output:{
        filename: 'app.js'
    },
    resolve:{
        extensions: ['.js','.jsx','.tsx']
    },
    module:{
        rules:[
            {
                test: /\.tsx?$/i,
                use:[
                    {
                        loader:'ts-loader'
                    }
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'/src/tpl/index.html'
        })
    ]
}

build > webpack.dev.config.js

module.exports = {
    devtool: 'cheap-module-eval-source-map'
    // cheap: 忽略列信息
    // module: 定位到ts源碼
    // eval-source-map: 會以dataUrl的形式將sourceMap打包到文件中，重編譯速度很快，沒必要擔憂性能問題
}

build > webapck.config.js

const merge = require('webapack-merge')
const baseConfig = require('./webapack.base.config.js')
const devConfig = require('./webapack.dev.config.js')
const proConfig = require('./webapack.pro.config.js')

let config = process.NODE_ENV === 'development' ?
devConfig: proConfig

moduel.exports = merge(baseConfig,config)

package.json

{
    "name": "ts_pro",
    "version": "1.0.0",
    "main": "./src/index.ts",
    "script": {
        "start": "webapck-dev-server --mode=development --config ./build/webpack.config.js",
        "build": "webpack --mode=production --config ./build/webpack.config.js"
    }
}