Typescript使用指南

news2025/1/11 7:34:49

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" }; // OK

const admin: Person<"Admin"> = { username: "xiaofang", role: "manager" }; // OK