分类： 计算机

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可选属性

interface SquareConfig {
    width: number
    height: number
    color?: string // 可选属性
}

只读属性

只能在刚创建时修改其值

interface Point {
    readonly x: number;
    readonly y: number;
}

额外的属性检查

如果 SquareConfig带有上面定义的类型的color和width属性，并且还会带有任意数量的其它属性，可以这样定义：

interface SquareConfig {
    width: number
    color?: string
    [propName: string]: any
}

函数类型

interface SearchFunc {
  (source: string, subString: string): boolean
}

// 对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。 
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

可索引的类型

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

类类型

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

// 通过 implements 描述
class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

继承接口

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = 
<Square>{};
square.color = "blue"
square.sideLength = 10
square.penWidth = 5

混合类型

一个对象可以同时做为函数和对象使用，并带有额外的属性

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = 
<Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

类

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

继承

通过 extends 关键字

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

公共，私有与受保护的修饰符

public（默认）

在TypeScript里，成员都默认为 public。

class Animal {
    public name: string;
}

private

当成员被标记成private时，它就不能在声明它的类的外部访问。

class Animal {
    private name: string
    constructor(theName: string) { this.name = theName; }
}

new Animal('Cat').name // 错误: 'name' 是私有的.

protected

protected与private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问。

class Person {
    protected name: string
    constructor(name: string) { this.name = name }
}

class Employee extends Person {
    private department: string
    public getElevatorPitch() {
        return `my name is ${this.name} and I work in ${this.department}.`
    }
}

let dick = new Employee("Howard", "Sales")
console.log(dick.getElevatorPitch());
console.log(dick.name); // 错误

readonly修饰符

readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。

class Octopus {
    readonly name: string;
    constructor (theName: string) {
        this.name = theName;
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

存取器

TypeScript支持通过getters/setters来截取对对象成员的访问。

let passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

抽象类

抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。

abstract class Department { ... }
class AccountingDepartment extends Department { ... }

let department: Department // 允许创建一个对抽象类型的引用
department = new Department() // 错误: 不能创建一个抽象类的实例
department = new AccountingDepartment() // 允许对一个抽象子类进行实例化和赋值

JavaScript 使用 IEEE 754 双精度浮点数表示所有数字，这会导致一些常见的小数精度问题，例如 0.1 + 0.2 !== 0.3。以下是处理 JavaScript 小数精度的常用技巧：

1. 四舍五入方法

// toFixed方法（返回字符串）
let num = 0.1 + 0.2; // 0.30000000000000004
let fixed = num.toFixed(2); // "0.30"

// 使用Math.round四舍五入
function round(value, decimals) {
  return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
}
round(1.005, 2); // 1.01

2. 精度运算库

使用专门的数学库处理精确计算：

• decimal.js —— 功能相对简单，适合基本的高精度计算需求
• big.js —— 支持三角函数、指数、对数等高级数学运算

// 使用decimal.js示例
import Decimal from 'decimal.js';
let sum = new Decimal(0.1).add(new Decimal(0.2)); // 0.3

3. 整数运算技巧

将小数转换为整数进行计算，再转换回去：

function add(num1, num2) {
  const multiplier = Math.pow(10, Math.max(getDecimalLength(num1), getDecimalLength(num2)));
  return (num1 * multiplier + num2 * multiplier) / multiplier;
}

function getDecimalLength(num) {
  const decimalStr = num.toString().split('.')[1];
  return decimalStr ? decimalStr.length : 0;
}

4. 比较数字时的容差方法

function numbersEqual(a, b, tolerance = 1e-10) {
  return Math.abs(a - b) < tolerance;
}

5. 格式化显示

// 使用Intl.NumberFormat
const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
formatter.format(0.1 + 0.2); // "0.30"

6. 避免常见陷阱

• 不要直接比较浮点数
• 对于货币计算，通常使用整数表示分（如用100表示1.00元）
• 大整数计算考虑使用BigInt类型

对于简单的显示问题，toFixed可能足够；对于复杂的财务计算，建议使用专门的库。

基于 navigator.userAgent 的 User Agent 检测

function isMobileDevice () {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  const mobileRegex = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|windows phone|phone|webos|kindle|tablet/i;
  return mobileRegex.test(ua.toLowerCase());
}

通过 navigator.userAgent 获取浏览器标识字符串‌。正则表达式匹配移动端关键词（如 android、iphone、mobile 等）‌。返回 true 表示移动端，false 表示 PC 端。

‌基于 navigator.userAgent 的插件方案‌

插件：mobile-detect.js

插件通过解析 navigator.userAgent 中的设备标识符（如 Android、iPhone、Windows 等）实现设备判断‌。 支持更细分的设备类型检测（如平板、手机、PC）‌。

import MobileDetect from 'mobile-detect';

const md = new MobileDetect(navigator.userAgent);

if (md.mobile()) {
  console.log("移动端登录设备（手机/平板）");
} else if (md.tablet()) {
  console.log("平板设备");
} else {
  console.log("PC 端设备");
}

构建作用

构建工具就是将源代码转换成可执行的 JavaScript、CSS、HTML 代码，包括以下内容：

• 代码转换：将 TypeScript 编译成 JavaScript、将 SCSS 编译成 CSS 等；
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等；
• 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码，让其异步加载；
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件；
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器；
• 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过；
• 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

基本概念

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。

• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。

• Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

• module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。

• filename 指列在 entry 中，打包后输出的文件的名称；

• chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称。

• webpackChunkName 是为预加载的文件取别名，

• webpackPrefetch 会在浏览器闲置下载文件，

• webpackPreload 会在父 chunk 加载时并行下载文件。

• hash 计算与整个项目的构建相关；

• chunkhash 计算与同一 chunk 内容相关；

• contenthash 计算与文件内容本身相关。（注：chunkhash, contenthash不能同时和HMR使用）

• source-map 大而全，啥都有，就因为啥都有可能会让 webpack 构建时间变长，看情况使用；

• cheap-module-eval-source-map 这个一般是开发环境（dev）推荐使用，在构建速度报错提醒上做了比较好的均衡；

• cheap-module-source-map 一般来说，生产环境是不配 source-map 的，如果想捕捉线上的代码报错，我们可以用这个。

流程概括

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3. 确定入口：根据配置中的 entry 找出所有的入口文件；
4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5. 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

流程细节

Webpack 的构建流程可以分为以下三大阶段：

1. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
2. 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
3. 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

关键的配置

• context：上下文。
• entry：入口文件，是所有依赖关系的入口，webpack 从这个入口开始静态解析，分析模块之间的依赖关系。
• output：打包输出的配置。
• devtools：SourceMap 选项，便于开发模式下调试。
• watch：监听模式，增量更新，开发必备！
• profile：优化。
• cache：webpack构建的过程中会生成很多临时的文件，打开 cache 可以让这些临时的文件缓存起来，从而更快的构建。
• module.loaders：如前文介绍，loaders 用来对文件做预处理。这样 webpack 就可以打包任何静态文件。
• resolve.alias：模块别名，这样可以更方便的引用模块。
• plugins：如前文介绍，webpack 的一些内置功能均是以插件的形式提供。