Typescript使用指南

1 定义

TypeScript 是 JavaScript 的一个超集，其最重要的作用是类型检查、类型断言、类型判断，对于团队开发而言，规范了字段命名，检查一些潜在的问题，对于新手也能更快理解业务。

typeof value === 'string' // 类型判断value as string // 类型断言

2 使用

（1）安装typescript

npm install --save-dev typescript"typescript": "^4.9.5",

（2）添加tsconfig.json文件

tsconfig.json字段说明

例子：

{"extends": "@hippo/tsconfig/tsconfig.json","compilerOptions": {"target": "ESNext","lib": ["DOM", "DOM.Iterable", "ESNext"],"types": ["vite/client", "jest"],"allowJs": false,"skipLibCheck": false,"esModuleInterop": false,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"module": "ESNext","moduleResolution": "Node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","strictNullChecks": true,"baseUrl": ".","outDir": "../dist/client"},"include": ["**/*"]
}

（3）编写.ts代码并编译
（4）运行tsc命令，如果typecheck有错误，会把错误文件打印在控制台

3 类型定义速查表

（1）DefinitelyTyped：整理了一些常见的类型定义，包括一些事件的定义。

（2）React TypeScript Cheatsheet : 是一个社区维护的，用于在 React 中使用 TypeScript 的速查表，涵盖了许多有用的边界情况，并提供了比本文更广泛全面的内容。

4 常见用法

（1）type 与 interface 的区别，官方推荐优先使用interface，其次使用type。

（2）type的使用：

ReturnType：获取函数的返回值类型
Partial：可选
Required：必选
Record：定义对象的key-value
Pick：挑选出指定的属性
Omit：排除指定的属性

（3）范型generics：

export type BasicNode<I, O, F> = {node_id: string;page_id: string;node_input: I;node_output: O;config: BasicConfig & F;fields_to_submit?: { [key: string]: Field };
};export type TestNode = BasicNode<{check: boolean;},{check_result: number;},Record<string, never>
>;

（4）keyof：

export const ErrorMessage = {0: "success",7: "Permission denied",9: "Invalid parameters"//...
};export type ErrorCode = keyof typeof ErrorMessage;

（5）条件判断：

export declare type Person<T extends "User" | "Admin"> = T extends "User"? {username: string;}: {username: string;role: string;};const user: Person<"User"> = { username: "xiaoming" }; // OKconst admin: Person<"Admin"> = { username: "xiaofang", role: "manager" }; // OK