TypeScript 相关知识整理
一、相关文档
- Web API 类型：https://developer.mozilla.org/zh-CN/docs/Web/API
- HTML DOM类型：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement
- React类型文档：https://react-typescript-cheatsheet.netlify.app/、
- 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');
事件类型
- 通用事件类型：Event（Event reference）
element.addEventListener('click', (e: Event) => {e.preventDefault();
});
- 专用事件类型（推荐使用这个而不是通用的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';
}
)
)
)