重学前端- typescript

一、Typescript开发环境搭建
1.下载安装nodejs
2.全局安装typescript 「npm i -g typescript」
3.创建一个test.ts文件，使用tsc test.ts命令进行编译

二、TS类型申明

let a: number;
let b: string;

// 如果变量的申明和赋值是同时进行的，TS可以自动对变量进行类型检测
let c: boolean = true;

function sum(a: number, b: number): number {
    return a + b;
}

// 字面量
let d: 10;
d = 10;

let e: 'male' | 'female';  // 可以使用｜来枚举几个值
e = 'female'

let f: string | boolean // 可以使用｜来连接多个类型
f = 'wangqing'

// unknown和any的区别就是any不仅仅影响自己的类型还影响别人的类型，比如可以将any赋值给string，但是unkonw类型就是不可以
// unknown实际上就是一个安全类型的any
let g1: unknown = true;
let g2: any = true;
let g3: string = g2;
let g4: string
// g4 = g1

// 如果必须要将unknown类型赋值给string，可以判断类型，或者是类型断言
if (typeof g1 === "string") g4 = g1
g4 = g1 as string
g4 = <string>g1

let h: undefined;

let i1: void = undefined;

// never表示永远不会有结果
function fn(): never {
    throw new Error("报错了！")
}

// {}用来指定对象可以包括哪些属性 {属性名：属性值类型}
let j1: { name: string, age?: number } = { name: 'wangqing', age: 25 }
// 限制对象必须存在name属性，其他的不做要求 
let j2: { name: string, [propName: string]: any } = { name: 'wangqing', age: 25, sex: 'male' }

// 限制为function
let k1: Function
// 限制为function并且限制function结构
let k2: (a: number, b: number) => number = (a ,b) => {
 return a+b
}
type k3 = (a: number, b: number, ...params:number[]) => void


// 数组  number[]表示数组中的元素都是number
let l1: number[]
let l2: Array<number>

// tuple元祖：固定长度的数组
let m: [string, string] = ["wang", "qing"]

// 枚举
enum Gender {
    Male = "男",
    Female = "女"
}
let n: { name: string, gender: Gender } = { name: 'wangqing', gender: Gender.Male }

// &同时满足
let o: { name: string } & { age: number } = { name: 'wangqing', age: 25 }

// 类型别名 type
type myType = 'male' | 'female'
let p: myType = 'male'

三、tsconfig.json
创建：使用tsc --init命令创建，这时候去使用tsc -w去执行命令可以监听当前文件夹所在的ts文件变化监听热编译
常用的tsconfig配置

{
  /*
    include: 用来指示哪些文件下的ts文件需要被编译，**表示任意目录，*表示任意文件
    exclude: 用来指示哪些文件下的ts文件不需要被编译,一般情况下不需要设置
             默认值：["node_modules", "bower_components", "jspm_packages"]
    extends: 定义被继承的配置文件
             一般情况下，如果配置过多，需要协助其他文件来配置，只需要在属性值中写入文件路径即可
    files: 指定需要被编译的文件名称
    compilerOptions: 用来完成编译时的配置
        target: 指定ts被编译的ES版本，其中exnext表示是ES的最新版本，比如es6
        module: 指定要使用的模块化规范，比如commonjs
        lib: 指定项目中要使用的库,一般情况下不需要修改，如果不是放在浏览器端执行，想要使用document，可能就需要加上dom就可以使用document
        outDir: 用来指定编译后文件所在的目录
        outFile: 全局代码会全部合并到一个文件中，前提是module是amd或者system才会支持
        allowJs: 是否对js文件进行编译，编译到outDir中
        checkJs: 检测js代码是否符合ts的语法规范
        removeComments: 编译之后移除注释
        noEmit: 编译之后不显示文件，true为不显示，false为显示
        noEmitOnError: 有错误时不生成编译文件
        alwaysStrict: 编译之后的js文件开启严格模式
        noImplicitAny: 在ts中不设置类型就会默认any类型,设置为true就不允许隐式any类型
        noImplicitThis: 设置为true就不允许使用不明确的this，需要手动添加this类型比如window
        strictNullChecks: 严格检查null
        strict: 所有严格检查的总开关
  */
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "./src/js/**/*"
  ],
  "extends": "./tsconfig.paths.json",
  "files": [
    "./02-被编译.ts"
  ],
  "compilerOptions": {
    "strict": true,
    "target": "es2015",
    "module": "es2015",
    "lib": ["dom","esnext"],
    "outDir": "./dist",
    "allowJs": true,
    "checkJs": true,
    "removeComments": true,
    "noEmit": false,
    "noEmitOnError": true,
    "alwaysStrict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
  }
}

四、使用webpack打包ts文件
配置简单的webpack环境
1.在所在的文件目录执行npm init -y
2.执行npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin
babel主要是兼容低版本浏览器，实现跨端执行代码
@babel/core @babel/preset-env babel-loader core-js

webpack.config.js文件配置

const path = require("path")
const HTMLWebpackPlugin = require("html-webpack-plugin")
// 每次build打包都会删除dist文件目录重新生成文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

/**
 * entry: 指定入口文件路径
 * output: 指定出口
 *      path: 指定打包文件的出口路径
 *      filename: 打包后的文件名称
 * module: webpack打包时要使用的模块
 */
module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        // 告诉webpack打包成的文件不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    module: {
        rules: [
            {
                // 指定规则生效的文件
                test: /\.ts$/,
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: 'babel-loader',
                        options: {
                            // 设置预定义环境「也就是定义代码可以在哪些浏览器上执行」
                            presets: [
                                [
                                    // 指定环境的插件
                                    '@babel/preset-env',
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        // 指定corejs版本, corejs可以使用Promise
                                        "corejs": "3",
                                        // 使用corejs的方法，设置为按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            // title: 'study ts'
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ],


    // 用来设置可以被引入的模块
    resolve: {
        extensions: [".ts", ".js"]
    }
}

package.json部分：

"scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.4",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.21.1",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }