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"
    }
}