# Typescript 面试题

1. 什么是 TypeScript，它与 JavaScript 有何不同？提供 TypeScript 代码示例。

TypeScript 是 JavaScript 的超集，为该语言添加了静态类型。它允许开发人员定义变量、函数参数和返回值的数据类型，这有助于在编译时而不是运行时捕获错误。

2. 解释 TypeScript 中静态类型的概念及其好处

TypeScript 中的静态类型可以在开发过程中指定变量、函数参数和返回值的数据类型。这有助于及早捕获与类型相关的错误，从而提高代码质量和可维护性。

好处是拥有更好的代码文档、增强的工具支持以及提高的开发人员生产力。

3. TypeScript 中的接口是什么？举个例子。

TypeScript的核心原则之一是对值所具有的结构进行类型检查 接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约

TypeScript 中的接口定义了对象结构的契约，指定其属性和方法的名称和类型。它们促进强大的类型检查并实现更好的代码组织

### 可选属性

    interface SquareConfig {
      color?: string;
      width?: number;
    }

### 只读属性

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

### 函数类型

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

### 可索引类型

    interface StringArray {
      [index: number]: string;
    }
    
    let myArray: StringArray;
    myArray = ["Bob", "Fred"];
    
    let myStr: string = myArray[0];

### class类型

    interface ClockInterface {
      currentTime: Date;
      setTime(d: Date): void;
    }
    
    class Clock implements ClockInterface {
      currentTime: Date = new Date();
      setTime(d: Date) {
        this.currentTime = d;
      }
      constructor(h: number, m: number) {}
    }

### 扩展接口

    interface Shape {
      name: string;
    }
   
    interface Color {
      color: string;
    }
     // 单继承
    interface Square extends Shape {
      sideLength: number;
    }
    //多继承
    interface Circle extends Color, Shape {
      radius: number;
    }
    let square = {} as Square;
    square.color = "blue";
    square.sideLength = 10;

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

      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;

### 接口继承类 当接口继承了一个类类型时，它会继承类的成员但不包括其实现

## TypeScript 中 interface 和 type 的差别是什么

### 相同点

• 都可以描述一个对象或者函数

    interface User {
        name: string age: number
    }
    interface SetUser { (name: string, age: number) : void;
    }
  
    type User = {
        name: string age: number
    };
    type SetUser = (name: string, age: number) = >void;
  

• 都允许拓展（extends）interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

   // 1、interface extends interface
    interface Name { 
      name: string; 
    }
    interface User extends Name { 
      age: number; 
    }

    // 2、type extends type
    type Name = { 
      name: string; 
    }
    type User = Name & { age: number  };

    // 3、interface extends type
    type Name = { 
      name: string; 
    }
    interface User extends Name { 
      age: number; 
    }

    // 4、type extends interface
    interface Name { 
      name: string; 
    }
    type User = Name & { 
      age: number; 
    }

### 不同点

• type 可以而 interface 不行

• type 可以声明基本类型别名，联合类型，元组等类型

    // 基本类型别名
    type Name = string

    // 联合类型
    interface Dog {
        wong();
    }
    interface Cat {
        miao();
    }

    type Pet = Dog | Cat

    // 具体定义数组每个位置的类型
    type PetList = [Dog, Pet]

• type 语句中还可以使用 typeof 获取实例的 类型进行赋值

  // 当你想获取一个变量的类型时，使用 typeof
    let div = document.createElement('div');
    type B = typeof div
    
    type StringOrNumber = string | number; 
    type Text = string | { text: string }; 
    type NameLookup = Dictionary<string, Person>; 
    type Callback<T> = (data: T) => void; 
    type Pair<T> = [T, T]; 
    type Coordinates = Pair<number>; 
    type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

• interface 能够声明合并

      interface User {
        name: string
        age: number
      }

      interface User {
        sex: string
      }
      /*
      User 接口为 {
        name: string
        age: number
        sex: string 
      }
      */

异步函数

async function 声明创建一个绑定到给定名称的新异步函数。 函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的需要。

也可以使用 async function 表达式来定义异步函数。

示例

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}

asyncCall();

语法

async function name(param0) {
  statements
}
async function name(param0, param1) {
  statements
}
async function name(param0, param1, /* …, */ paramN) {
  statements
}

描述

async function 声明创建一个 AsyncFunction 对象。每次调用异步函数时，都会返回一个新的 Promise 对象，该对象将会被解决为异步函数的返回值，或者被拒绝为异步函数中未捕获的异常。

异步函数可以包含零个或者多个 await 表达式。await 表达式通过暂停执行使返回 promise 的函数表现得像同步函数一样，直到返回的 promise 被兑现或拒绝。返回的 promise 的解决值会被当作该 await 表达式的返回值。使用 async/await 关键字就可以使用普通的 try/catch 代码块捕获异步代码中的错误。

备注： await 关键字只在常规 JavaScript 代码中的异步函数内有效。如果你在异步函数体之外使用它，则会抛出 SyntaxError。 await 可以单独与 JavaScript 模块(import() 返回一个promise)一起使用。

async/await 的目的在于简化使用基于 promise 的 API 时所需的语法

即使异步函数的返回值看起来像是被包装在了一个 Promise.resolve 中，但它们不是等价的。

如果给定的值是一个 promise，异步函数会返回一个不同的引用，而 Promise.resolve 会返回相同的引用，

当你想要检查一个 promise 和一个异步函数的返回值是否等价时，这可能是一个麻烦。

const p = new Promise((res, rej) => {
  res(1);
});

async function asyncReturn() {
  return p;
}

function basicReturn() {
  return Promise.resolve(p);
}

console.log(p === basicReturn()); // true
console.log(p === asyncReturn()); // false

异步函数的函数体可以被看作是由零个或者多个 await 表达式分割开来的。从顶层代码直到（并包括）第一个 await 表达式（如果有的话）都是同步运行的。因此，不包含 await 表达式的异步函数是同步运行的。然而，如果函数体内包含 await 表达式，则异步函数就一定会异步完成。

如果你希望在并发执行的两个或多个任务完成后安全地执行其他任务，那么在这些任务开始前，你必须等待对 Promise.all() 或 Promise.allSettled() 的调用。

别忘记处理异常

Promise.all Promise.allSettled 区别

Promise.all

Promise.all() 静态方法接受一个 Promise 可迭代对象作为输入，并返回一个 Promise。当所有输入的 Promise 都被兑现时，返回的 Promise 也将被兑现（即使传入的是一个空的可迭代对象），并返回一个包含所有兑现值的数组。**如果输入的任何 Promise 被拒绝，则返回的 Promise 将被拒绝，并带有第一个被拒绝的原因 **。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

Promise.all() 方法是 promise 并发方法之一。它可用于聚合多个 Promise 的结果。通常在有多个相关的异步任务并且整个代码依赖于这些任务成功完成时使用，我们希望在代码执行继续之前完成所有任务。 Promise.all() 方法会在任何一个输入的 Promise 被拒绝时立即拒绝。相比之下，Promise.allSettled() 方法返回的 Promise 会等待所有输入的 Promise 完成，不管其中是否有 Promise 被拒绝。 如果你需要获取输入可迭代对象中每个 Promise 的最终结果，则应使用 allSettled() 方法。

windows nginx 简单配置

1. 下载
   • windows 版本的 nginx 下载地址
   • nginx-1.19.0.zip
2. 安装
   • 解压 nginx-1.19.0.zip
   • 拷贝至自己指定的目录（D/nginx-1.19.0）
3. 启动nginx
   • 双击 目录下 nginx.exe cmd会闪一下
   • 命令启动也行 ` start nginx`
   • 检查是否启动成功 http://localhost:80 出现 Welcome to nginx! 页面就代表成功了
4. 单页面应用路由配置

     location / {
   		    root   html;
   		    index /index.html;
               try_files $uri $uri/ /index.html;
           }

1. 开启gzip

     location / {
   		    root   html;
   		    index /index.html;
               try_files $uri $uri/ /index.html;
   			gzip_static on;
           }
   

数字权重排序算法

需求

• 给一串数字，按照数字的权重排序
• 输入 “56 65 74 100 99 68 86 180 90”，输出 “100 180 90 56 65 74 68 86 99”
• 规则 100 权重 1，56 权重 11，99权重 18。排序： 100 56 99

思路分析

• 首先需要一个计算权重的方法
  1. 将数字（字符串）拆分一个个数字（字符）。可以用 Array.from 将字符串转为数组
  2. 计算 1 数组里所有值的和。可以用 Array.reduce

  具体代码如下

    /**
     * 计算权重
     * @param {String, Number} arg 待计算值
     * return  权重结果
     */
    function wd(arg){
        return Array.from(arg+'').reduce((acc,cur)=>acc + +cur,0)
    }
  
  

• 其次就是排序

  1. 先将字符串格式化为数组。可以用 String.split
  2. 然后排序计算。可以用 Array.sort
  3. 将排序的后数组再转换成字符串

  具体代码如下

    /**
     * 权重排序
    * @param {String} arg 
    */
    function wrm(arg){
         return arg.split(/\s+/g).sort((a,b)=>wd(a)-wd(b)).jion(' ')
    }
  

服务器配置，外网访问mySql

windows 服务器

设置MySQL服务允许外网访问

1. 修改mysql 配置文件 my.ini

   • 文件位置 C:\Program Files\MySQL\MySQL Server 5.1\my.ini 对应自己安装mysql位置

   • 找到 [mysqld] 和 port=3306 在下面添加 bind-address=0.0.0.0 如下：

     [client]
          
     port=3306
          
     [mysql]
          
     default-character-set=UTF8
          
          
     # SERVER SECTION
     # ----------------------------------------------------------------------
     #
     # The following options will be read by the MySQL Server. Make sure that
     # you have installed the server correctly (see above) so it reads this 
     # file.
     #
     [mysqld]
          
     # The TCP/IP Port the MySQL Server will listen on
     port=3306
     # 新添加的
     bind-address=0.0.0.0 
          
     #Path to installation directory. All paths are usually resolved relative to this.
     basedir="C:/Program Files/MySQL/MySQL Server 5.1/"
          
     

2. 重启mysql 服务

     > net stop mysql
     > net start mysql

设置mysql用户支持外网访问

需要使用root权限登录mysql，更新mysql.user表，设置指定用户的Host字段为%，默认一般为127.0.0.1或者localhost。

% 允许从任何ip登录 x.x.x.x 允许从指定ip访问

1. 登录数据库

   找到目录 C:/Program Files/MySQL/MySQL Server 5.1/bin

   在这个目录下执行命令 mysql -u root -p

   
   C:\Program Files\MySQL\MySQL Server 5.1\bin> mysql -u root -p
   
   

   然后输入密码

   输入密码后执行命令

   注意命令以分号结束

   mysql> use mysql;
   

   

2. 查询host

   mysql> select user, host from user;

1. 创建host

   如果没有”%”这个host值,就执行下面命令

   mysql> update user set host=’%’ where user=‘root’;
   mysql> flush privileges;
   

2. 授权用户

   • 任意主机以用户root和密码password连接到mysql服务器

     mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'  IDENTIFIED BY 'password'  WITH GRANT OPTION;
     mysql> flush privileges;
     

   • 固定IP 192.168.1.1 账号：userName，密码：password

     mysql>GRANT ALL PRIVILEGES ON *.* TO 'userName'@'192.168.1.1' IDENTIFIED BY 'password'  WITH GRANT OPTION;
     mysql>flush privileges;
     

整体命令如下

bin>mysql -u root -p
Enter password:*********
mysql> use mysql;
mysql> update user set host=’%’ where user=‘root’;
mysql> flush privileges;
mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'  IDENTIFIED BY 'password'  WITH GRANT OPTION;
mysql> flush privileges;