导航

为什么要使用 TypeScript ? TypeScript 相对于 JavaScript 的优势是什么？

增加了静态类型，可以在开发人员编写脚本时检测错误，使得代码质量更好，更健壮。

优势:

杜绝手误导致的变量名写错
类型可以一定程度上充当文档
IDE自动填充，自动联想

type 和 interface 的区别

interface 可以重复声明，type 不行
继承方式不一样，type 使用交叉类型方式，interface 使用 extends 实现。在对象扩展的情况下，使用接口继承要比交叉类型的性能更好。
建议使用 interface 来描述对象对外暴露的接口，使用 type 将一组类型重命名（或对类型进行复杂编程）

interface iMan {
  name: string;
  age: number;
}
// 接口可以进行声明合并
interface iMan {
  hobby: string;
}

type tMan = {
  name: string;
  age: number;
};
// type不能重复定义
// type tMan = {}

// 继承方式不同, 接口继承使用 extends
interface iManPlus extends iMan {
  height: string;
}
// type继承使用&，又称交叉类型
type tManPlus = { height: string } & tMan;

const aMan: iManPlus = {
  name: "aa",
  age: 15,
  height: "175cm",
  hobby: "eat",
};

const bMan: tManPlus = {
  name: "bb",
  age: 15,
  height: "150cm",
};

any、unkonwn、never 区别

any 和 unkonwn 在 TS 类型中属于最顶层的 Top Type，即所有的类型都是它俩的子类型。
而 never 则相反，它作为 Bottom Type 是所有类型的子类型。

TypeScript 中 any、never、unknown、null & undefined 和 void 有什么区别？

any: 动态的变量类型（失去了类型检查的作用）。
never: 永不存在的值的类型。例如：never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。
unknown: 任何类型的值都可以赋给 unknown 类型，但是 unknown 类型的值只能赋给 unknown 本身和 any 类型。
null & undefined: 默认情况下 null 和 undefined 是所有类型的子类型。就是说你可以把 null 和 undefined 赋值给 number 类型的变量。当你指定了 --strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自。
void: 没有任何类型。例如：一个函数如果没有返回值，那么返回值可以定义为void。

什么是 any 类型，何时使用？

有时你想将值存储在变量中，但事先不知道该变量的类型
当你没有明确提供类型时，TypeScript 假定变量是 any 类型，并且编译器无法从周围的上下文中推断出类型

例如，该值来自 API 调用或用户输入。any 类型允许你将任何类型的值分配给 any 类型的变量

let person: any = "Foo";

// 以下是一个演示任何类型用法的示例

// json可能来自第三方API
const employeeData: string = `{"name": "arry老师", "salary": 60000}`;

// 解析JSON以构建employee对象
const employee: any = JSON.parse(employeeData);

console.log(employee.name);
console.log(employee.salary);

什么是 void，什么时候使用 void 类型？

void 表示变量没有类型，它充当与任何相反的类型，它在不返回值的函数中特别有用
如果变量是 void 类型，则只能将 null 或 undefined 值分配给该变量

function notify(): void {
  alert("Hello World !");
}

TypeScript 中 const 和 readonly 的区别

const 可以防止变量的值被修改
readonly 可以防止变量的属性被修改

TypeScript 中 interface 可以给 Function / Array / Class（Indexable）做声明吗？

可以

// 函数声明
interface Say {
 (name: string): viod;
}
let say: Say = (name: string):viod => {}

// Array 声明
interface NumberArray { 
 [index: number]: number; 
} 
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

// Class 声明
interface PersonalIntl {
 name: string
 sayHi (name: string): string
}

TypeScript 中使用 Union Types 时有哪些注意事项？

属性或方法访问: 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法。

function getLength(something: string | number): number {
   return something.length;
}
// index.ts(2,22): error TS2339: Property 'length' does not exist on type >'string | number'.
//   Property 'length' does not exist on type 'number'.

function getString(something: string | number): string {
   return something.toString();
}
// 公共方法和属性可以访问

TypeScript 中 ?.、??、!、!.、_、等符号的含义？**

?. 可选链 遇到 null 和 undefined 可以立即停止表达式的运行。
?? 空值合并运算符 当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。
! 非空断言运算符 x! 将从 x 值域中排除 null 和 undefined!. 在变量名后添加，可以断言排除undefined和null类型
_ 数字分割符 分隔符不会改变数值字面量的值，使人更容易读懂数字 .e.g 1_101_324。
** 求幂

如何使 TypeScript 项目引入并识别编译为 JavaScript 的 npm 库包？

选择安装 ts 版本，npm install @types/包名 --save；
对于没有类型的 js 库，需要编写同名的.d.ts文件

对 TypeScript 类中成员的 public、private、protected、readonly 修饰符的理解？

public: 成员都默认为public，被此限定符修饰的成员是可以被外部访问；
private: 被此限定符修饰的成员是只可以被类的内部访问；
protected: 被此限定符修饰的成员是只可以被类的内部以及类的子类访问;
readonly: 关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

keyof 和 typeof 关键字的作用？

keyof 索引类型查询操作符获取索引类型的属性名，构成联合类型。
typeof 获取一个变量或对象的类型。

TypeScript 支持静态类吗？为什么？

TypeScript 不支持静态类，

这与流行的 C# 和 Java 等面向对象的编程语言不同。
这些语言需要静态类，因为所有代码，即数据和函数，都需要在一个类中并且不能独立存在。静态类提供了一种方法来允许这些功能，而无需将它们与任何对象相关联。

在 TypeScript 中，你可以将任何数据和函数创建为简单对象，而无需创建包含类。

因此，TypeScript 不需要静态类，单例类只是 TypeScript 中的一个简单对象。