【TypeScript】关键概念和知识点

TypeScript 提供了许多提升开发体验的工具和特性，帮助开发者编写更健壮、更易维护的代码，同时保持与 JavaScript 的兼容性。我个人也是比较喜欢ts的代码提示，类型检查（主要最近改的是开源项目，用别人写好的类型注解真的很爽 😄）

下面我将列举ts的一些关键概念和知识点

---

1. 类型注解（Type Annotations）

基本类型：string、number、boolean、null、undefined 等等。你可以为变量、函数参数、返回值等添加类型注解。

let age: number = 30;
let name: string = "Alice";
function greet(name: string): string {
  return `Hello, ${name}`;
}

2. 接口（Interfaces）

接口用于定义对象的结构。它可以确保对象有特定的属性和类型。

interface Person {
  name: string;
  age: number;
}
let person: Person = { name: "Alice", age: 30 };

3. 类型推断（Type Inference）

TS 会自动推断变量的类型，如果在声明时就赋值，通常不需要显式指定类型。

let count = 10; // 推断为 number 类型

4. 联合类型（Union Types）

允许一个变量可以有多个类型，使用 | 符号。

let id: string | number;
id = "123";
id = 123;

5. 类型别名（Type Aliases）

可以为类型创建别名，类似于接口，但类型别名可以是任意类型，而不仅仅是对象。

type ID = string | number;
let userId: ID = 123;

6. 可选属性和参数（Optional Properties and Parameters）

用 ? 标记属性或参数为可选的。

interface Person {
  name: string;
  age?: number; // 可选属性
}
function greet(name: string, age?: number) {
  return age ? `Hello, ${name}. You are ${age}.` : `Hello, ${name}`;
}

7. 泛型（Generics）

泛型允许你编写能够处理多种类型的代码。常用于函数、类和接口。

function identity<T>(value: T): T {
  return value;
}
let num = identity<number>(42);
let str = identity<string>("Hello");

比如我项目中的代码：

const Tooltip: React.FC<TooltipProps> = (props) => {
  // 组件逻辑
}

React.FC<TooltipProps> 表示一个函数组件，它的 props 必须符合 TooltipProps 的类型定义。也就是说，当我使用 React.FC<TooltipProps> 定义组件时，TS 会确保我传递的 props 与 TooltipProps 的结构匹配。

源码中的FC定义如下:

    type FC<P = {}> = FunctionComponent<P>;

    interface FunctionComponent<P = {}> {
        (props: P, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

React.FC 会自动为函数组件提供一些默认的类型功能，比如自动推断 props 的类型，并且为 children 属性添加默认类型（ReactNode）。

使用 React.FC 还意味着这个函数组件必须返回一个 ReactElement，而且它已经内置了 children 属性类型，因此我不需要在 TooltipProps 中显式地添加 children 属性类型，但为了清晰起见，通常还是会显式定义它。

8. 枚举（Enums）

枚举是一种用于定义一组命名常量的方式。

enum Direction {
  Up,
  Down,
  Left,
  Right
}
let dir: Direction = Direction.Up;

9. 类型断言（Type Assertions）

类型断言用于告诉编译器某个值的具体类型，类似于类型转换。

let someValue: any = "Hello, world!";
let strLength: number = (someValue as string).length;

10. 模块化（Modules）

TS 支持 ES6 的模块系统，可以通过 import 和 export 来组织代码。

// module.ts
export const pi = 3.14;
export function calculateCircumference(diameter: number): number {
  return pi * diameter;
}

// main.ts
import { pi, calculateCircumference } from './module';
console.log(calculateCircumference(10)); // 31.4

11. 类和继承（Classes and Inheritance）

TS 提供了面向对象的编程特性，支持类和继承。

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

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

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

12. 实用类型（Utility Types）

TS 提供了一些常用的实用类型，比如 Partial、Readonly、Pick<T, K> 等。
我将在下方详细讲解并举例

1. Partial<T>
   Partial 将某个类型的所有属性变为可选的。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

function updateTodo(todo: Partial<Todo>) {
  // 现在 todo 对象中的属性都是可选的
  if (todo.title) {
    console.log(todo.title);
  }
}

2. Required<T>
   Required 的作用是将某个类型的所有属性变为必选的（即去掉 ? 标记）。
3. Readonly<T>
   Readonly 将某个类型的所有属性设为只读的，无法再修改。
4. Pick<T, K>
   Pick 从某个类型中选择部分属性，创建一个新的类型。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

5. Omit<T, K>
   Omit 的作用和 Pick 相反，它从某个类型中排除某些属性，创建一个新的类型。
6. Record<K, T>
   Record 构造一个对象类型，其属性键是 K 类型，属性值是 T 类型。
7. Exclude<T, U>
   Exclude 从 T 中排除可以赋值给 U 的类型。

type T = "a" | "b" | "c";
type U = "a";
type Excluded = Exclude<T, U>; // "b" | "c"

8. Extract<T, U>
   Extract 从 T 中提取可以赋值给 U 的类型。
9. NonNullable<T>
   NonNullable 从类型 T 中排除 null 和 undefined。
10. ReturnType
    ReturnType 获取函数类型 T 的返回值类型。

function getUser() {
  return { name: "Alice", age: 25 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number; }

11. InstanceType<T>
    InstanceType 获取构造函数类型 T 的实例类型。
12. Parameters<T>
    Parameters 获取函数类型 T 的参数类型组成的元组。
13. ConstructorParameters<T>
    ConstructorParameters 获取构造函数类型 T 的参数类型组成的元组。

---

JavaScript迁移

现在AI工具很强大,将原来的js项目迁移成ts项目也是很方便,把原来的js或jsx丢给gpt直接生成即可 😃
或参考官方文档：JavaScript迁移