typescript给第三方插件添加声明type，或者额外添加属性

添加 ts 声明

给无声明文件的插件添加

直接 import "web-storage-cache" 会显示 any，需要额外加多 type

declare module "web-storage-cache" {
  export default class WebStorageCache {
    /** wsCache.set('username', 'wqteam', {exp : 100}); 时间：秒 */
    set(name: string, value: any, option?: { exp: number }) {}
    get: any;
    delete: any;
    clear: any;
  }
}

给第三方插件额外添加

// 给element添加多两个组件声明
import * as element from "element-ui";

declare module "element-ui" {
  export const TreeTable: any;
  export const TreeTableColumn: any;
}

给第三方 interface 添加属性

例如：想给 antd-upload 的 props 添加多一个属性

import { UploadProps } from "antd/lib/upload";
declare module "antd/lib/upload" {
  export interface UploadProps {
    /** customRequest: async ({ file, onSuccess, onError } 回调 */
    onSuccess?: Func;
  }
}

给window添加属性

interface Window {
  socialShare: any;
}
// 或
declare global {
  interface Window {
    [key: string]: any;
  }
}

修改第三方插件属性

declare module 'taro-f2' {
  import * as React from 'react'
  export interface IProps {
    onCanvasInit: any
  }
  export class F2Canvas extends React.Component<IProps, any> {
    static fixF2(F2: any) {}
  }
}

import { ComponentType } from 'react';
import { VideoProps } from '@tarojs/components/types/Video';
declare module '@tarojs/components/types/Video' {
  export interface VideoProps {
    /** hbuilder页面内播放 */
    playsinline?: boolean;
  }
}

扩展函数

export namespace accountLogin {
  export interface Param {
    userName: string // 用户名
    password: string // 密码
    clientType: string // 客户端类型
    isRemember?: boolean //  是否记住
  }
  export interface PromiseData {
    loginSession: LoginSession
  }
}
export const accountLogin = (data:accountLogin.Param) : Promise<accountLogin.LoginSession>=>post(data)

扩展类

declare namespace Player {
  type ActionName = "move_up" | "move_down" | "move_left" | "move_right" | "run_up" | "run_down" | "run_left" | "run_right" | "";
}

class Player {
  public doActions(actionName: Player.ActionName) {
  }
}

react获取props

import * as React from 'react';
import { Button } from 'antd';
 
type ButtonProps = React.ComponentProps<typeof Button>;

自动根据string推断类型


type ShapeType = 'Square'| 'Circle'
interface Square {
    size: number;
}
interface Circle {
    radius: number;
}
type MutableRecord<U> = {
    [SubType in keyof U]: {
        type: SubType;
        data: U[SubType]
    };
}[keyof U];
type Shape = MutableRecord<{
    'Square': Square;
    'Circle': Circle;
}>;
const shape: Shape = {
    type: 'Circle',
    data: {
        radius: 10,
    }
};

其他功能

https://mp.weixin.qq.com/s/98T_14vcbZtFM5BfTCCzWA

// 公共类型
interface User {
  name: string;
  age: number;
  password: string;
}
type Role = "admin" | "user" | "guest";
type Role1 = "ADMIN" | "USER" | null;

// 转大小写
type UppercaseRole = Uppercase<Role>; 
type LowercaseRole = Lowercase<Role>; 
// 首字母大写
type CapitalizeRole = Capitalize<Role>;
type UncapitalizeRole = Uncapitalize<Role>;
// Exclude 属性排除
type NonAdmin = Exclude<Role, "admin"|"user">; // guest
// NonNullableRole 排除null和undefined
type NonNullableRole = NonNullable<Role1>; // "ADMIN" | "USER"

// Partial 全部改可选属性
type PartialUser = Partial<User>;
// 必填
type RequiredUser = Required<User>;
// 只读
type ReadonlyUser = Readonly<User>;
// Pick 挑选属性组合
type UserPartial = Pick<User, "name" | "age">;
// Omit 剔除某些属性
type UserPartialOmit = Omit<User, "password">;
// 构造一个对象类型Record, 比较少用
interface Address {
  street: string;
  pin: number;
}
type AddressesRecord = Record<"home" | "office", Address>;

// 获取某函数返回值类型
function funcA(){
 return '';
}
type someType = ReturnType<typeof funcA>;

最后编辑于：2023.05.05 15:22:38