添加 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 } 回調(diào) */
    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頁面內(nèi)播放 */
    playsinline?: boolean;
  }
}

擴展函數(shù)

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>;

自動根據(jù)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;

// 轉(zhuǎn)大小寫
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">;
// 構(gòu)造一個對象類型Record, 比較少用
interface Address {
  street: string;
  pin: number;
}
type AddressesRecord = Record<"home" | "office", Address>;

// 獲取某函數(shù)返回值類型
function funcA(){
 return '';
}
type someType = ReturnType<typeof funcA>;