一、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]元组,固定长度数组
    enumenum(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']
        }
    };
    

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部