xpsteven

/** 允許的值型別 */
type AVAILABLE_VALUE_TYPE = boolean | number | string | Date;

/** 空物件型別 */
export type EMPTY_OBJECT = Record<string, never>;

/** 任意表頭泛型 */
export type AnyMyRecordBody = Record<string, AVAILABLE_VALUE_TYPE>;

xpsteven

import { useCallback, useEffect, useRef, ChangeEventHandler, memo } from 'react';

/** 使用 MyFrom 的範例程式 */
export function Example() {
	/**
	 * 即使用 MyForm 的設計師不負責任的使用 arrow function
	 * 也只會觸發 MyForm 的 render
	 * 但不會觸發 MemoedInput 的 render
	 */
	return <MyForm onChange={(e) => console.log(e.target.value)} />;

xpsteven

/** MyForm 實作 */
const MyForm: React.FC<IMyFormStaticProps & IMyFormProps> = (props) => {
	return (
		<form />
	);
};

/** 工廠函數 */
export default function MyFormFactory(sProps: IMyFormStaticProps) {

xpsteven

class Pagination extends PureComponent {
	...
}

class WrongPage extends Component {
	render() {
		return (
			...
			<Pagination title={<h5>test</h5>} />
			...

xpsteven

{
    "compilerOptions": {
        "outDir": "build",
        "target": "ES5",
        "lib": ["es2015", "es5"],
        "module": "commonjs",
        "moduleResolution": "node",
        "allowJs": false,
        "declaration": true,
        "removeComments": false,

xpsteven

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "indent": [true, "tabs", 4],
        "variable-name": [true, "ban-keywords", "allow-leading-underscore", "allow-snake-case"],
        "no-var-requires": false,