TypeScript学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_44085020/article/details/127617488

一、typescript类型

1. 字面量

直接使用字面量进行类型声明

let a: 10;
a = 10;
// a = 11 //报错，a只能等于10

2. 可以使用 | 来连接

（1）| 连接值

let b: "male" | "female";
b = "male"
b = "female"

（2）| 连接类型（✨）

let c: boolean | string;
c = true
c = 'hello'

3. any

any表示任意类型(不建议使用)

let d: any;

（1）声明变量如果不指定类型，则ts解析器会自动判断变量的类型为any：let d ;
（2）d的类型是any，他可以赋值给任意变量

4. unknown

unknown表示未知类型的值

let e: unknown

（1）unknown实际上就是一个类型安全的any
（2）unknown类型的变量，不能直接赋值给其他变量

（2）解决办法

if (typeof e === "string") {
    s = e;
}

5. 类型断言

可以用来告诉解析器变量的实际类型

（1）s = e as string;
（2）s = <string>e;

6. void

void 用来表示空，以函数为例，就表示没有返回值的函数

function fn(): void { }

7. never表示永远不会返回结果

function fn2(): never {
    throw new Error('报错了')
}

8. object表示一个js对象

（1）{} 用来指定对象中包含哪些属性
（2）语法：{属性名：属性值，属性名：属性值}
（3）在属性名后面加上 ❓ ,表示属性是可选的

let a: { name: string, age?: number }
a = { name: '孙悟空' }

[ propName: string ]: any 表示任意类型的属性（any可以改变为其他任意类型）

let b: { name: string, [propName: string]: any }
b = { name: '猪八戒', a: 1 }

9. 设置函数结构的类型声明

语法：(形参：类型，形参：类型…) => 返回值

let c: (a: number, b: number) => number;
c = function (n1, n2): number {
    return n1 + n2
}

10. 数组

语法：类型[ ] || Array<类型>

字符串数组：

let d: string[]
let e: Array<string>

11. 元组 — 固定长度的数组

let h: [string, string]

12. enum枚举

enum Gender {
    Male,
    Famale
}
let g: { name: string, gender: Gender }
g = {
    name: '孙悟空',
    gender: Gender.Male
}
console.log(g.gender === Gender.Male);

13. &表示同时

let i: { name: string } & { age: number }
i = { name: 'json', age: 18 }

14. 类型别名

let j: 1 | 2 | 3 | 4 | 5;
let k: 1 | 2 | 3 | 4 | 5;

等同于

type myType = 1 | 2 | 3 | 4 | 5
let j: myType
let k: myType

二、tsconfig.json

tsconfig.json是ts编译器的配置文件，ts编译器可以根据他的信息来对代码进行编译

1. include

（1）用来指定哪些ts文件需要被编译
（2）路径：**任意路径 | | *任意文件

"include": ["./src/**/*"],

2. exclude

（1）不需要被编译的文件目录
（2）默认值：[“node_modules”,“bower_components”,“jspm_packages”]

 "exclude": []

3. compilerOptions：编译器的选项

（1）target:用来指定ts被编译为的ES的版本

"target": "ES6"

值：‘es3’, ‘es5’, ‘es6’, ‘es2015’, ‘es2016’, ‘es2017’, ‘es2018’, ‘es2019’, ‘es2020’, ‘es2021’, ‘es2022’, ‘esnext’.

（2）module:指定要使用的模块化规范

"module": "ES2015"

值： ‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es6’, ‘es2015’, ‘es2020’, ‘es2022’, ‘esnext’, ‘node16’, ‘nodenext’.

（3）lib用来指定项目中要使用的库

"lib": ["ES2015"]

（4）outDir 用来指定编译后文件所在的目录

"outDir": "./dist"

（5）outFile将代码合并为一个文件

设置outFile后，所有的全局作用于中的代码会合并到同一个文件中

"outFile": "./dist/app.js"

（6）strict严格检测总开关

"strict": true

（7）allowJs是否对js文件进行编译，默认false

"allowJs": false

（8）checkJs检测Js代码是否符合语法规范，默认false

 "checkJs": false

（9）removeComments是否移除注释，默认false

"removeComments": false

（10）noEmit不生成编译后的文件，默认false

"noEmit": false

（11）noEmitOnError当有错误时，不生成编译后的文件，默认false

"noEmitOnError": false

（12）alwaysStrict 用来设置编译后的文件是否使用严格模式，默认false

"alwaysStrict": true

（13）noImplicitAny不允许隐式any类型，默认false

"noImplicitAny": true

（14）noImplicitThis 不允许不明确类型的this，默认false

"noImplicitThis": true

（15）strictNullChecks 严格检测空值

"strictNullChecks": true

三、使用webpack打包ts

1. 安装依赖

npm i -D webpack webpack-cli typescript ts-loader

package.json

{
  "devDependencies": {
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

2. 配置webpack.config.js文件

// 引入一个包
const path = require("path");

// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
  // 编译模式
  mode:'development',
  // 指定入口文件
  entry: "./src/index.ts",

  // 指定打包文件所在的目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, "dist"),
    // 打包后文件的文件
    filename: "bundle.js",
  },

  //指定Webpack打包时要用的模块
  module:{
    rules:[
        {
            // test指定的是规则生效的文件
            test:/\.ts$/,
            // 要使用的loader
            use:'ts-loader',
            // 要排除的文件
            exclude:/node_modules/
        }
    ]
  }
};

3. 安装依赖html-webpack-plugin

作用：帮助我们自动生成html文件

（1）安装

npm i -D html-webpack-plugin

（2）在webpack.config.js中进行配置

在plugins中进行配置

// 引入html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 配置Webpack插件
plugins:[
  new HtmlWebpackPlugin({
    // title:'Mytitle'
    // 以index.html作为模板
    template:"./src/index.html"
  })
]

4. 运行自动打开谷歌

（1）安装依赖webpack-dev-server

npm i -D webpack-dev-server

（2）在package.json中进行配置，添加一个start属性

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "start": "webpack serve --open"
}

5. 清除dist目录中的内容，使每次dist目录中都是新的内容

（1）安装依赖clean-webpack-plugin

npm i -D clean-webpack-plugin

（2）配置同HTML

6. 设置引用模块

resolve:{
    extensions:['.ts','.js']
}

webpack.confid.js完整webpack + ts + babel配置✨

// 引入一个包
const path = require("path");
// 引入html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入clean插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
  // 编译模式
  mode: "development",
  // 指定入口文件
  entry: "./src/index.ts",

  // 指定打包文件所在的目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, "dist"),
    // 打包后文件的文件
    filename: "bundle.js",
    // 告诉webpack不适用箭头函数
    environment: {
      arrowFunction: false
    },
  },

  //指定Webpack打包时要用的模块
  module: {
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,
        // 要使用的loader(从后往前执行)
        use: [
          // 配置babel
          {
            // 指定加载器
            loader: "babel-loader",
            // 设置babel
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定插件的环境
                  "babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的目标浏览器
                    targets: {
                      chrome: "58",
                      ie: "11",
                    },
                    // 指定corejs的版本
                    corejs: "3",
                    // 使用corejs的方式,"usage"--按需加载
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ],
        // 要排除的文件
        exclude: /node_modules/,
      },
    ],
  },

  // 配置Webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // title:'Mytitle'
      // 以index.html作为模板
      template: "./src/index.html",
    }),
  ],

  // 用来设置引用模块
  resolve: {
    extensions: [".ts", ".js"],
  },
};