ts基础篇(一)

强类型与弱类型

在强类型语言中，当一个对象从调用函数传递到被调用函数时，其类型必须与被调用函数中声明的类型兼容

    A(){
        B(x)
    }
    B(y){
        // y可以赋值x，程序运行良好
    }

• 强类型语言定义：不允许改变变量的数据类型，除非进行强制类型转换
• 弱类型语言定义：变量可以被赋予不同的数据类型
• 静态类型语言：在编译阶段确定所有变量的类型
• 动态类型语言：在执行阶段确定所有变量的类型

第一个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"
    }
}