TS开发的类型索引目录

TypeScript 相关知识整理

一、相关文档

1. Web API 类型：https://developer.mozilla.org/zh-CN/docs/Web/API
2. HTML DOM类型：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement
3. React类型文档：https://react-typescript-cheatsheet.netlify.app/、
4. TS实用类型： https://www.typescriptlang.org/docs/handbook/utility-types.html

二、HTML DOM 相关类型

HTMLElement

• HTMLElement 是所有HTML元素的基类。它提供了通用的属性和方法。

let element: HTMLElement = document.getElementById('myElement');

元素专用类型

每一个html元素都有它专属的节点类型：HTMLDivElement、HTMLButtonElement等等。

const input: HTMLInputElement = document.querySelector('input');

事件类型

1. 通用事件类型：Event（Event reference）

element.addEventListener('click', (e: Event) => {
    e.preventDefault();
});

2. 专用事件类型（推荐使用这个而不是通用的Event）

• MouseEvent：鼠标事件

buttonElement.addEventListener('click', (e: MouseEvent) => {
    console.log(e.clientX, e.clientY);
});

• KeyboardEvent：键盘事件

const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Enter') {
        console.log('Enter key pressed');
    }
};
document.addEventListener('keydown', handleKeyDown);

• DragEvent：拖拽事件

三、React 类型

React 类型文档：TypeScript in React

1. 函数组件：React.FC

const MyComponent: React.FC<{ title: string }> = ({ title }) => {
    return <div>{title}</div>;
};

2. 类组件：React.Component<PropsType, StateType>

class MyComponent extends React.Component<PropsType, StateType> {
    //...
}

3. Hooks 类型

• useState

const [count, setCount] = useState<number>(0);

• useRef

const inputRef = useRef<HTMLInputElement | null>(null);

4. React事件类型

• React.MouseEvent

const handleChange = (e: React.MouseEvent<HTMLInputElement>) => {
    console.log(e.target.value);
};

• KeyboardEvent
• DragEvent
• ClipboardEvent

5. React.MouseEventHandler

const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
    console.log('Button clicked', event);
};
<button onClick={handleClick}>Click</button>

四、常用 TypeScript 语法

一些真的很常用的type / interface / 并集、交集就不介绍了，本章的重点在“实用类型”。

实用类型

1. 泛型

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

2. 类型断言：只有在必要明确时使用。

const input = document.getElementById('myInput') as HTMLInputElement;

3. 实用类型

https://www.typescriptlang.org/docs/handbook/utility-types.html

• Pick、Partial、Omit

interface User {
    id: number;
    name: string;
    email: string;
}
// 所有属性可选
type PartialUser = Partial<User>;
// 选择特定属性
type NameOnly = Pick<User, 'name'>;
type PickObj = Pick<User, 'name' | 'id'>
// 排除特定属性
type WithoutId = Omit<User, 'id'>;
type OmitObj = Omit<User, 'name' | 'id'>

• typeof 、keyof

// keyof: 获取键的联合类型
type UserKeys = keyof User;  // "id" | "name" | "email" 
// typeof: 自动推导对象的值类型
// 现在定义了一个常量，想要用它的类型{id:number,name:string,email:string},就可以用typeof
const defaultUser = { id: 0, name: 'Guest', email: 'guest@example.com' };
type GuestType = typeof defaultUser; 

• Record<K, T>：用于定义一个对象类型，具有天然的约束性
  - K 表示对象键的类型（必须是 string | number | symbol 或其子类型）
  - T 表示对象值的类型

• PropertyKey：PropertyKey 是 TypeScript 内置的联合类型，表示对象键的所有可能类型：
  type PropertyKey = string | number | symbol;

• ReturnType：用于获取函数类型的返回值类型

function add(a: number, b: number): number {
    return a + b;
}
type AddReturnType = ReturnType<typeof add>;  
// AddReturnType的类型为number

• Parameters：用于获取函数类型Type的参数类型

function multiply(a: number, b: number): number {
    return a * b;
}
type MultiplyParameters = Parameters<typeof multiply>; 
// MultiplyParameters的类型为[number, number]

4. 其他：

另外我们在typing.d.ts定义了一些其他的实用类型

/** Partial的加强版，可以使用于Object, 将T中的每一个属性变为可选 */
/** 将T中的每一个属性变为可选 */
declare type RecursivePartial<T> = {
  [P in keyof T]?: T[P] extends (infer U)[]
    ? RecursivePartial<U>[]
    : T[P] extends object
    ? RecursivePartial<T[P]>
    : T[P];
};

5. 类型守卫

function isString(value: any): value is string {
    return typeof value === 'string';
}