重学前端- 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: 所有严格检查的总开关
        experimentalDecorators: 开启装饰器
  */
  "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,
    "experimentalDecorators": 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"
  }

五、类/接口/类的setter和getter

class Dog {
    name: string
    age: number
    // constructor 构造函数,构造函数会在对象创建时调用
    constructor(name: string, age: number) {
        // 在构造函数中this表示的就是当前创建的对象,可以通过this向新建的对象中添加属性
        this.name = name
        this.age = age
        console.log('this', this)
    }
    break() {
        console.log("汪汪汪")
    }
}

const dog = new Dog("旺财1", 3)
console.log(dog)


// 继承
// 以abstract开头的类就是抽象类，抽象类和其他类区别不大，只是不能用来创建对象；抽象类是专门用来被继承的类
abstract class Animal {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    sayHello() {
        console.log("动物在叫")
    }
    // 抽象方法只能在抽象类中，并且子类必须继承抽象方法
    abstract run(): void;
}

class Cat extends Animal {
    sayHello(): void {
        // super表示当前类的父类
        super.sayHello()
    }
    run() {
        console.log("我在run")
    }
}

// 接口：用来定义一个类或者对象的结构，其中应该包括哪些属性或方法，通识可以当成类型申明去使用
interface MyInterface {
    name: string,
    sayHello: () => void
}

class Tiger implements MyInterface{
    public name: string
    constructor(name: string){
        this.name = name
    }
    sayHello():void{

    }
}

// 属性封装，保证安全性
class Person {
    /**
     * public 修饰的属性可以在任意位置访问(修改)默认值
     * private 私有属性只能在类的内部进行访问(修改)
     * protected 受保护的属性，只能在当前类以及当前类的子类中访问(修改)
     */
    private _name: string
    private _age: number
    constructor(name:string, age: number){
        this._name = name
        this._age = age
    }
    // getter/setter 被称为属性的存储器
    // 定义方法，获取name属性
    getName(){
        return this._name
    }
    // 定义方法，设置name属性
    setName(name: string){
        this._name = name
    }

    // TS中的setter/getter
    get age(){
        return this._age
    }
    set age(age: number){
        this._age = age
    }
}

const person = new Person("wangqing", 25)
// 使用TS的getter/setter更加方便修改和获取
person.age = 23
console.log(person.age)

六、泛型

function fn1<T>(a: T): T {
    return a;
}
fn1<string>("hell0")

function fn2<T, K>(a: T, b: K): T | K {
    return a
}
fn2<string, number>('wangqing', 23)

interface MyTInterface {
    length: number,
    score: number
}
function fn3<T extends MyTInterface>(a: T) {
    return a.length
}
console.log(fn3<MyTInterface>({ length: 3, score: 100 }))

// A1和A2功能相同都是对函数进行约束
interface A1<T> {
    <T>(arg: T): T[]
}
type A2 = <T extends string>(arg: T) => T[]
const a1: A1<string> = (arg: any) => {
    return [arg]
}
const a2: A2 = (arg: any) => {
    return [arg]
}
a1("wangiqng")
a2("wangiqng")

// keyof T 类似于是T属性名的组合数组
const getProps = <T, K extends keyof T>(object: T, paramName: K) => {
    return object[paramName]
}
getProps({name: 'wangiqng'}, 'name')

七、装饰器
使用装饰器步骤：
1.将experimentalDecorators设置为true
2.npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
3.配置webpack

{
   // 指定规则生效的文件
   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"
                       }
                   ]
               ],
               plugins: [
                   ['@babel/plugin-proposal-decorators', { legacy: true }],
                   ['@babel/plugin-proposal-class-properties', { loose: true }],
               ]
           }
       },
       'ts-loader'
   ],
   // 要排除的文件
   exclude: /node_modules/
}