168. 面试官：浏览器有哪几种缓存，各种缓存的优先级是什么样的？

168期题目

1. 浏览器有哪几种缓存，各种缓存的优先级是什么样的？

2. canvas 和 webgl 有什么区别？

3. 说说你对函数式编程的理解，以及优缺点？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

167期问题及答案

1. 什么是Typescript的方法重载？

在 TypeScript 中，方法重载是指在同一个函数名下定义多个函数类型，以根据传入参数的不同类型或数量来决定具体调用哪个函数。这在提高代码的灵活性和类型安全性方面非常有用。

下面是一个简单的 TypeScript 方法重载的示例：

function greet(person: string): string;
function greet(person: string, age: number): string;

function greet(person: string, age?: number): string {
    if (age !== undefined) {
        return `Hello, ${person}! You are ${age} years old.`;
    } else {
        return `Hello, ${person}!`;
    }
}

// 调用示例
console.log(greet("John")); // 输出: Hello, John!
console.log(greet("Jane", 25)); // 输出: Hello, Jane! You are 25 years old.

在这个例子中，我们首先定义了两个函数签名（overloads），一个接收一个字符串参数，另一个接收一个字符串参数和一个可选的数字参数。接着，我们实现了这两个函数签名的具体实现。

调用时，TypeScript 编译器会根据传入的参数类型和数量选择正确的函数签名进行调用。这样，我们既能够灵活地处理不同类型的输入，又保证了类型的安全性。

这种方法重载的方式使得函数的使用更加清晰和可维护，同时提供了良好的类型检查。

2. 请用TS实现一个JS数组的reduce方法？

当我们用 TypeScript 实现一个简单的 reduce 方法时，我们可以考虑使用泛型来保留数组元素的类型。以下是一个基本的 TypeScript reduce 方法的实现：

function customReduce<T, U>(array: T[], callback: (accumulator: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U {
    let accumulator: U = initialValue;

    for (let i = 0; i < array.length; i++) {
        accumulator = callback(accumulator, array[i], i, array);
    }

    return accumulator;
}

// 示例用法
const numbers = [1, 2, 3, 4, 5];

// 计算数组总和
const sum = customReduce(numbers, (acc, curr) => acc + curr, 0);
console.log(sum); // 输出: 15

// 连接数组元素为字符串
const concatenatedString = customReduce(numbers, (acc, curr) => acc + '-' + curr.toString(), '');
console.log(concatenatedString); // 输出: "1-2-3-4-5"

在这个实现中，customReduce 接受三个参数：数组 array、回调函数 callback 和初始值 initialValue。回调函数负责对累加器进行更新，包括当前元素的处理。

这个实现中使用了泛型 <T, U>，其中 T 表示数组元素的类型，而 U 表示累加器的类型。这使得我们在使用时可以保持类型的一致性。

请注意，这个实现是一个简化版，可能不涵盖 reduce 方法的所有特性和边界情况。在实际项目中，可以根据需求进一步扩展和优化。

3. tsconfig.json有什么作用？

tsconfig.json 是 TypeScript 的配置文件，用于指定 TypeScript 编译器的行为和项目的编译选项。通过配置 tsconfig.json，你可以定义项目中的编译规则、指定输出目录、配置模块系统等。

以下是一些 tsconfig.json 的主要作用和配置选项：

1. 编译选项配置： 通过 compilerOptions 属性，你可以配置 TypeScript 编译器的各种选项，例如目标 JavaScript 版本、模块系统、是否启用 strict 模式、输出目录等。

   {
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "strict": true,
       "outDir": "./dist"
     }
   }

2. 文件和目录配置： 通过 include 和 exclude 属性，你可以指定哪些文件应该被编译，哪些文件应该被排除。

   {
     "include": ["src/**/*.ts"],
     "exclude": ["node_modules"]
   }

3. 自定义类型定义文件： 通过 types 和 typeRoots 属性，你可以配置 TypeScript 使用哪些类型定义文件以及它们的搜索路径。

   {
     "types": ["node", "webpack"],
     "typeRoots": ["./typings"]
   }

4. 源映射配置： 通过 sourceMap 属性，你可以控制是否生成源映射文件，方便在调试时追踪到 TypeScript 源码。

   {
     "compilerOptions": {
       "sourceMap": true
     }
   }

5. 配置模块解析： 通过 baseUrl 和 paths 属性，你可以配置模块的基本路径和模块的别名。

   {
     "baseUrl": "./src",
     "paths": {
       "utils/*": ["./app/utils/*"]
     }
   }

通过这些配置，tsconfig.json 提供了灵活的方式来定制 TypeScript 项目的编译行为，使得开发者能够更好地适应不同的项目需求。

因为微信公众号修改规则，如果不标星或点在看，你可能会收不到我公众号文章的推送，原创不易，请大家将本公众号星标，看完文章后记得点下赞或者在看，谢谢各位！

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。