TypeScript学习笔记

类型定义

• 限制类型: let c: boolean | string //限制类型, let d: "male" | "female" //限制值 | let Person:{name:string, age:number} //限制数据结构
• 任意类型: any, any会通过赋值传递, 污染更多变量.
• 任意类型: unknown, unknown不允许赋值给其它变量.
• 强转类型: e as string, <string> e
• 判断类型: if(typeof e === "string")
• 数组: let d:number[]; let d: Array<number>;
• 对象类型: let Person:{name:string, age?:number, [propName:string]:any};
• 函数类型: let fun:(para1:number, para2:string)=>string;
• 元组: let t: [string, string, number] //固定长度的数组
• 枚举: enum Gender {Male, Female};
• 类型别名: type myType = string; type person = {name:string, age:number

tsconfig.json

{
    "include":[
        "./src/**/*"  //使用Webpack不需要指定
    ],
    "exclude":[],  //使用Webpack不需要指定
    "compilerOptions":{
        "target":"es6"
        "module":"es6", //使用哪种技术实现模块化
        "outDir":"./dist",  //使用Webpack不需要指定
       "strict":true //开启所有代码检查
   }
}

webpack

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /.ts$/,
                use: "ts-loader",
                exclude: "node_modules"
            }
        ]
    },
    plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           template: "./src/index.html"
       })
    ],
    //哪些扩展名可以用来import
    resolve: {
       extensions: [".ts", ".js"]
    },
}

package.json

"scripts":{
    "build":"webpack",
    "start":"webpack serve --open chrome.exe"
}

Babel

npm i -D @babel/core @babel/preset-env babel-loader core-js

webpack.config.js

...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                //多个加载器从下向上执行, 这里需要babel后执行.
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    //按需集成corejs的功能
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...