TypeScript基础【学习笔记】

一、TypeScript 开发环境搭建

1. 下载并安装 Node.js
2. 使用 npm 全局安装 typescript
   • 进入命令行
   • 输入：npm i -g typescript
3. 创建一个 ts 文件
4. 使用 tsc 对 ts 文件进行编译
   • 进入命令行
   • 进入 ts 文件所在目录
   • 执行命令：tsc xxx.ts

二、基本类型

• 类型声明

  • 通过类型声明可以指定 TS 中变量（参数、形参）的类型

  • 类新声明给变量设置了类型，使得变量只能存储某种类型的值

  • 语法：

    let 变量: 类型;
    let 变量: 类型 = 值;
    function fn(参数: 类型, 参数: 类型): 类型 {
        ...
    }

• 自动类型判断

  • TS 拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断白能量的类型
  • 如果变量的声明和赋值是同时进行的，可以省略掉类型声明

• 新增类型

  类型	例子	描述
  any	*	任意类型
  unknown	*	类型安全的 any
  void	空值 (undefined)	没有值 (或 undefined)
  never	没有值	不能是任何值
  tuple	[4, 5]	元组，固定长度数组
  enum	enum(A, B)	枚举

  // 使用字面量声明
  let a: 10;
  a = 10;
  
  // 可以使用 | 来连接多个类型（联合类型）
  let b: 'male' | "female";
  b = 'male';
  b = 'female';
  
  let c: boolean | string;
  
  // 相当于关闭了 TS 类型检测
  let d: any;
  // let d; // 隐式的 any
  d = 10;
  d = 'hello';
  d = true;
  
  let e: unknown;
  e = 10;
  e = 'hello';
  e = true;
  
  let s: string;
  // d: any，可以赋值给任意变量
  // s = d;
  e = 'hello';
  // unknown 类型的变量不能直接赋值给其他变量
  if (typeof e === 'string') {
      s = e; // 类型不同
  }
  
  // 类型断言
  s = e as string;
  s = <string>e;
  
  function fn(): void {
      return;
  }
  
  function fn2(): never {
      throw new Error('报错了');
  }
  
  // 变量后面加上一个 ？表示属性是可选的
  let b: {name: string, age?: number};
  b = {name: 'abc', age: 18}; // 需要 name 属性
  
  let c: {name: string, [propName: string]: any};
  c = {name: 'aaa', age: 18, gender: 'male'}; 
  
  // 设置函数结构的类型声明：
  // 语法：(形参: 类型, 形参: 类型 ...) => 返回值
  let d: (a: number, b: number) => number;
  // d = function(n1: string, n2: string): number {
  //     return 10;
  // } // 报错
  
  let e: string[]; // 表示字符串数组
  e = ['a', 'b', 'c'];
  let f: number[];
  f = [1, 2, 3]
  let g: Array<number>;
  g = [1, 2, 3];
  
  // 
  let h: [string, number]; // 元组
  h = ['hello', 123];
  
  // enum
  enum Gender {
      Male = 0,
      Female = 1
  }
  let i: {name: string, gender: Gender};
  i = {
      name: 'abc',
      gender: Gender.Male
  }
  // console.log(i.gender === Gender.Male);
  
  let j: { name: string } & { age: number }; // & 表示同时
  // j = {name: '孙悟空', age: 18};
  
  // 类型的别名
  type myType = 1 | 2 | 3 | 4 | 5;
  let k: myType;
  let l: myType;
  let m: myType;
  k = 5;

三、编译选项

1、自动编译文件

• 编译文件时，使用 -w 指令后，TS 编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译
• 示例：
  tsc xxx.ts -w

2、自动编译整个项目

• 直接使用 tsc 指令，可以自动将当前项目下的所有 ts 文件编译为 js 文件

• 直接使用 tsc 命令的前提时要现在项目根目录下创建一个 ts 的配置文件 tsconfig.json

• 配置选项：

  • include

    • 定义希望被被编译文件所在目录
    • 默认值：["**/*"]
    • 示例："include": ["src/**/*", "tests/**/*"]

  • exclude

    • 定义需要排除在外的目录
    • 默认值：["node_modules", "bower_components", "jspm_packeages"]
    • 示例："exclude": ["./src/hello/**/*"]

  • extends

    • 定义被继承的配置文件
    • 示例："extend": "./configs/base"

  • files

    • 指定被编译文件的列表，只有需要编译的文件少时才会用到

    • 示例：

      "files": [
          "core.ts",
          "sys.ts",
          "types.ts",
          ...
      ]

  • compilerOptions

    • 编译选项是配置文件中非常重要也比较复杂的配置选项

    • 在 compilerOptions 中包含多个子选项，用来完成对编译的配置

      • 项目选项

        • target

          • 设置 ts 代码编译的目标版本

          • 可选值：

            ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

          • 示例：

            "compilerOptions": {
                "target": "ES6"
            }

        • lib

          • 指定代码运行时所包含的库（宿主环境）

          • 可选值：

            ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ...

          • 示例：

            "compilerOptions": {
                "target": "ES6",
                "lib": ["ES6", 'DOM'],
                "outDir": "dist",
                "outFile": "dist/aa.js"
            }

        • module

          • 设置编译后代码使用的模块化系统

          • 可选值：

            CommonJS、UMD、AMD、System、ES2020、ESNext、None

          • 示例：

            "compilerOptions": {
                "module": "CommonJS"
            }

        示例：

        {
            "include": [
                "./src/**/*" // **：表示任意目录  *：表示任意文件
            ],
            // "exclude": [
            //     "./src/hello/**/*"
            // ],
            "compilerOptions": {
                "target": "ES2015",
                "module": "ES6",
                // "lib": ["es6", "dom"],
                "outDir": "./dist", // 用来指定编译后文件所在的目录
                // "outFile": "./dist/app.js"   // 将代码合并为一个文件
                "allowJs": true, // 是否对 js 文件进行编译
                "checkJs": true,    // 是否检查 js 代码是否符合规范
                "removeComments": true, // 是否移除注释
                "noEmit": false, // 不生成编译后的文件
                "noEmitOnError": true,  // 当有错误时不生成编译后的文件
                "strict": true,    // 所有严格检查的总开关
                "alwaysStrict": true,  // 用来设置编译后的文件是否使用严格模式
                "noImplicitAny": true,  // 不允许隐式的 any 类型
                "noImplicitThis": true,    // 不允许不明确类型的 this
                "strictNullChecks": true,  // 严格地检查空值
            }
        }

3、webpack

1. 初始化项目

   • 进入项目根目录，执行命令 npm init -y：创建 package.json 文件

2. 下载构建工具
   npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

   • webpack：构建工具 webpack
   • webpack-cli：webpack 的命令行工具
   • webpack-dev-server：webpack 的开发服务器
   • typescript：ts 编译器
   • ts-loader：ts 加载器，用于在 webpack 中编译 ts 文件
   • html-webpack-plugin：webpack 中 html 插件，用来自动创建 html 文件
   • clean-webpack-plugin：webpack 中的清除插件，每次构建都会先清除目录

3. 根目录下创建 webpack 的配置文件 webpack.config.js

   const path = require('path');
   const HTMLWebpackPlugin = require('html-webpack-plugin');
   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   
   // 写入 webpack 的所有配置信息
   module.exports = {
       // 指定入口文件
       entry: "./src/index.ts",
       // 指定打包文件所在位置
       output: {
           // 指定打包文件的目录
           path: path.resolve(__dirname, 'dist'),
           // 打包后的文件
           filename: 'bundle.js',
           // 不使用 箭头函数
           environment: {
               arrowFunction: false
           }
       },
       // 指定 webpack 打包时使用的模块
       module: {
           // 指定要 load 的 rule
           rules: [
               {
                   // test 指定规则生效的文件
                   test: /\.ts$/,
                   // 要使用的 loader
                   use: [
                       // 配置 babel
                       {
                           // 指定加载器
                           loader: "babel-loader",
                           // 设置 babel
                           options: {
                               // 设置预定义的环境
                               presets: [
                                   [
                                       // 指定环境插件
                                       "@babel/preset-env",
                                       // 配置信息
                                       {
                                           // 要兼容的目标浏览器
                                           targets: {
                                               'chrome': "127",
                                               'ie': '11'
                                           },
                                           // 指定 core-js 的版本
                                           "corejs": "3",
                                           // 使用 corejs 的方式
                                           "useBuiltIns": "usage" // 表示按需加载
                                       }
                                   ]
                               ]
                           }
                       },
                       'ts-loader'
                   ],
                   // 要排除的文件
                   exclude: /node-module/
               }
           ]
       },
       // 配置 webpack 插件
       plugins: [
           new CleanWebpackPlugin(),
           new HTMLWebpackPlugin({
               // title: "这是一个自定义的 title"
               template: "./src/index.html"
           }),
       ],
       resolve: {
           extensions: ['.ts', '.js']
       }
   };