1. 什么是TypeScript

TypeScript是一种开源的编程语言，是JavaScript的一个超集。它添加了静态类型、类、接口和模块等特性，使得开发者能够更好地组织和维护大型应用程序。TypeScript代码可以被编译成JavaScript，从而可以在任何支持JavaScript的环境中运行。

2. 如何在项目中使用TypeScript

安装TypeScript：首先，在项目的根目录中安装TypeScript。使用npm或者yarn来安装TypeScript。在命令行中运行以下命令来安装TypeScript：

npm install typescript --save-dev

或者

yarn add typescript --dev

创建tsconfig.json文件：在项目的根目录中创建一个tsconfig.json文件。这个文件用来配置TypeScript编译器的选项。可以通过运行以下命令来自动生成tsconfig.json文件：

npx tsc --init

配置tsconfig.json文件：打开tsconfig.json文件，根据项目需求进行配置。例如，可以指定TypeScript源文件的位置和输出目录，以及其他编译选项。
编写TypeScript代码：在项目中创建.ts或.tsx文件，并使用TypeScript语法编写代码。
编译TypeScript代码：完成了TypeScript代码的编写后，需要将其编译成JavaScript代码。可以使用以下命令来编译TypeScript代码：

npx tsc

这将会根据tsconfig.json文件中的配置选项来编译TypeScript代码，并将编译后的JavaScript代码输出到指定的目录中。

运行JavaScript代码：最后，可以像运行普通的JavaScript代码一样运行编译后的JavaScript代码。可以使用node命令来运行JavaScript文件，或者将编译后的JavaScript文件引入到HTML文件中，并在浏览器中运行。

3. TypeScript有哪些特性

静态类型检查：TypeScript是一种静态类型的编程语言，可以在编译阶段检查代码中的类型错误，提供更早的错误检测和更好的代码提示。
类型注解：TypeScript允许开发者为变量、函数和类等添加类型注解，以明确指定其类型。这样可以提高代码的可读性和可维护性，并减少潜在的错误。
类型推断：TypeScript可以根据上下文自动推断变量的类型，减少了手动添加类型注解的工作量。
ES6+支持：TypeScript是JavaScript的超集，支持ECMAScript 6及以上版本的语法和特性。开发者可以使用诸如箭头函数、模板字符串、解构赋值等新特性，以提高开发效率。
强大的面向对象编程支持：TypeScript支持类、接口、泛型等面向对象编程的特性，使得开发者可以使用更强大的抽象和封装来组织代码。
编译时类型检查：TypeScript在编译阶段进行类型检查，可以发现一些隐藏的错误，并提供更好的代码提示和自动补全功能。
渐进式开发：TypeScript可以与现有的JavaScript代码无缝集成，开发者可以逐步将现有的JavaScript项目迁移到TypeScript，无需一次性重写所有代码。

4. TypeScript有哪些类型

基本类型：
- number：表示数字类型。
- string：表示字符串类型。
- boolean：表示布尔类型。
- null：表示空值。
- undefined：表示未定义。
- symbol：表示唯一的、不可变的值。
- void：表示没有返回值的函数。
- any：表示任意类型。
数组类型：
- number[]：表示由数字组成的数组。
- string[]：表示由字符串组成的数组。
- boolean[]：表示由布尔值组成的数组。
- any[]：表示由任意类型组成的数组。
- Array：表示由类型 T 组成的数组。
元组类型：
- [T1, T2, ...]：表示由类型 T1、T2 等组成的元组。
对象类型： -** { key: T }**：表示具有 key 属性且值为类型 T 的对象。
- { [key: string]: T }：表示具有任意字符串键且值为类型 T 的对象。
函数类型：
- (param1: T1, param2: T2, ...) => returnType：表示具有参数类型为 T1、T2 等、返回值类型为 returnType 的函数类型。
枚举类型：
- enum：表示一组命名的常量值。
类类型：
- class：表示类类型。
泛型类型：
- T：表示类型参数，用于在定义函数、类等时指定类型的占位符。

注意：TypeScript 还支持自定义类型和联合类型等高级类型。

5. 如何在TypeScript中定义接口和类

在TypeScript中，可以使用interface关键字来定义接口，用class关键字来定义类。

定义接口的语法如下：

interface 接口名称 {
  属性1: 类型;
  属性2: 类型;
  ...
  方法1(): 返回值类型;
  方法2(): 返回值类型;
  ...
}

例如，定义一个表示人的接口：

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

let person: Person = {
  name: "John",
  age: 30,
  sayHello() {
    console.log("Hello!");
  }
};

定义类的语法如下：

class 类名 {
  属性1: 类型;
  属性2: 类型;
  ...
  constructor(参数1: 类型, 参数2: 类型, ...) {
    // 构造函数逻辑
  }
  方法1(): 返回值类型 {
    // 方法逻辑
  }
  方法2(): 返回值类型 {
    // 方法逻辑
  }
  ...
}

例如，定义一个表示狗的类：

class Dog {
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  
  bark(): void {
    console.log("Hello, I'm " + this.name);
  }
}
let dog = new Dog("Tom",20); 
cat.sayHello(); // 输出：Hello, I'm Tom

6. TS中的泛型是什么以及如何使用？

在TypeScript中，泛型是一种允许我们在定义函数、类或接口时使用参数化类型的机制。通过使用泛型，我们可以在定义这些实体时不指定具体的类型，而是在使用时根据需要来确定具体的类型。

泛型的语法使用尖括号（<>）来表示，并在尖括号内指定类型参数。泛型的使用方式有以下几种：

在函数中使用泛型：

function identity<T>(arg: T): T {
  return arg;
}

// 使用泛型函数
let result = identity<string>("hello");
// 或者使用类型推断
let result = identity("hello");

在接口中使用泛型：

interface GenericIdentityFn<T> {
  (arg: T): T;
}

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

在类中使用泛型：

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

在泛型约束中使用泛型：

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]);

2024前端面试准备之TypeScript篇（一）