记录typescript常见的类型

1.基础类型

editState?: boolean;  //?表示非必填
showEditButton: boolean;
page?: number;
name: string;
creator: Array<string>;
creator: Array<{
	id: number,
	phone: number
}>；
dept: string[];

export interface PageInfoRsp {
	name: string;
	id: number
};
pageInfo: PageInfoRsp;

export interface Person {
  name: string;
  age?: number;
  [propName: string]: any; // 定义了任意属性取 string 类型的值。
}
let xiaowang: Person = {
  name: 'xiao liu',
  website: 'http://xiaoliu.com',
};
export interface IButtonProps {
	status: number;
	[propName: string]: any;
}

2.| 或间隔

pattern: string | RegExp | Array<string> | Array<number>
value?: string | string[] | number;
type: 'employees' | 'deppartments' | 'tags';
export interface IPicProps {
	type: 'error' | 'success' | 'warn'
}
export interface ITextProps {
	title: string;
	subTitle: string;
}
export interface IResultProps extends IPicProps, ITextProps {
	readonly [propName: string]: any;  // 定义了任意属性取 string 类型的值
}
export interface IShowTipsProps extends React.HTMLProps<HTMLDivElement> {
	readonly content: string;
	readonly position?: 'top' | 'bottom'
}
interface IShowTipsState {
	content: string;
	show: boolean;
}
export default class ToolTips extends React.PureComponent<IShowTipsProps, {}> {

}
export default class ToolTips extends React.PureComponent<IShowTipsProps, IShowTipsState> {

}
export default class ToolTips extends React.Component<IShowTipsProps, IShowTipsState> {

}

3.React.ReactNode

title: React.ReactNode;
title: React.RectNode = (
  <span>标题标题标题</span>
)

4.HTMLElement，HTMLInputElement

const clone: HTMLElement = el.cloneNode();
input: HTMLInputElement

5.函数

onSubmit(data: any): void;
onSubmit: () => void | Promise<boolean | void>;
onCancel?: () => void;
children: (editStatus: boolean) => React.ReactNode;
onSubmit(): Promise<any>;
onChange?(status: 'on' | 'off'): void;
onBack?: Function

6.React.FC

const PageContent: React.FC<IPageContentProps> = props => {
    ......
};

7.React.MouseEventHandler

onClick?: React.MouseEventHandler<Element>;
<a onClick={this.handleClickEvent} target={_blank || '_self'}>a链接点击</a>
<button onClick={this.handleClickEvent}>按钮点击</button>
handleClickEvent: React.MouseEventHandler<
        HTMLButtonElement | HTMLAnchorElement
    > = e => {
    ...
    }

8.React.ChangeEvent

private readonly handleChangeValue = (
    e: React.ChangeEvent<HTMLInputElement>
) => {
    ......
};

9.React.MouseEvent

interface IDeleteIcon {
    allowClear?: boolean;
    onClean: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
}
private readonly handleClean = (
        e: React.MouseEvent<HTMLElement, MouseEvent>
    ) => {
        ......
    };

10.type

export type dataType = 'input' | 'textarea'
export interface ITextProps {
	title: string;
	subTitle: string;
	dataType: dataType
}
type Type = 1 | 2 | 3;
export interface Scope<T extends Type> {
    type: T;
    changeId: string;
    changeName: string;
}
export interface VisibleInfos {
    tags: Array<Scope<3>>;
    employees: Array<Scope<1>>;
    deptments: Array<Scope<2>>;
}