interface IProps {
   name: string;
}

interface IState {
   count: number;
}

class App extends React.Component<IProps, IState> {
   state = {
      count: 0
   };

   render() {
      return (
         <div>
            {this.state.count}
            {this.props.name}
         </div>
      );
   }
}

export default App;

class App extends React.PureComponent<IProps, IState> {}

// 定义组件
class MyComponent<P> extends React.Component<P> {
   internalProp: P;
   constructor(props: P) {
      super(props);
      this.internalProp = props;
   }
   render() {
      return <span>hello world</span>;
   }
}

// 使用组件
type IProps = { name: string; age: number };

<MyComponent<IProps> name='React' age={18} />; // Success
<MyComponent<IProps> name='TypeScript' age='hello' />; // Error

interface IProps {
   name: string;
}

const App = (props: IProps) => {
   const { name } = props;

   return (
      <div className='App'>
         <h1>hello world</h1>
         <h2>{name}</h2>
      </div>
   );
};

export default App;

type React.FC<P = {}> = React.FunctionComponent<P>

interface IProps {
   name: string;
}

const App: React.FC<IProps> = (props) => {
   const { name } = props;
   return (
      <div className='App'>
         <h1>hello world</h1>
         <h2>{name}</h2>
      </div>
   );
};

export default App;

// 定义组件
function MyComponent<P>(props: P) {
   return <span>{props}</span>;
}

// 使用组件
type IProps = { name: string; age: number };

<MyComponent<IProps> name='React' age={18} />; // Success
<MyComponent<IProps> name='TypeScript' age='hello' />; // Error

const MyComponent = <P>(props: P) {
  return (
   <span>
     {props}
    </span>
  );
}

const MyComponent = <P extends any>(props: P) {
  return (
   <span>
     {props}
    </span>
  );
}

declare global {
   namespace JSX {
      interface Element extends React.ReactElement<any, any> {}
   }
}

const jsx = <div>hello</div>;
const ele = React.createElement('div', null, 'hello');

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
   type: T;
   props: P;
   key: Key | null;
}

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

class MyComponent extends React.Component {
   render() {
      return <div>hello world</div>;
   }
}
// 正确
const component: React.ReactNode<MyComponent> = <MyComponent />;
// 错误
const component: React.ReactNode<MyComponent> = <OtherComponent />;

export interface CSSProperties extends CSS.Properties<string | number> {
   /**
    * The index signature was removed to enable closed typing for style
    * using CSSType. You're able to use type assertion or module augmentation
    * to add properties or an index signature of your own.
    *
    * For examples and more information, visit:
    * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
    */
}

import * as React from 'react';

const classNames = require('./sidebar.css');

interface Props {
   isVisible: boolean;
}

const divStyle = (props: Props): React.CSSProperties => ({
   width: props.isVisible ? '23rem' : '0rem'
});

export const SidebarComponent: React.StatelessComponent<Props> = (props) => (
   <div id='mySidenav' className={classNames.sidenav} style={divStyle(props)}>
      {props.children}
   </div>
);

const divStyle: React.CSSProperties = {
   width: '11rem',
   height: '7rem',
   backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`
};

<div style={divStyle} />

style?: CSSProperties | undefined;

const [count, setCount] = useState<number>(1);

const [count, setCount] = useState<number | null>(null);

const [user, setUser] = React.useState<IUser>({} as IUser);

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
// convenience overload when first argument is omitted
/**
 * Returns a stateful value, and a function to update it.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usestate
 */

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
/**
 * An alternative to `useState`.
 *
 * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
 * multiple sub-values. It also lets you optimize performance for components that trigger deep
 * updates because you can pass `dispatch` down instead of callbacks.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usereducer
 */

useEffect(() => {
   const subscription = props.source.subscribe();
   return () => {
      subscription.unsubscribe();
   };
}, [props.source]);

useEffect(() => {
   subscribe();
   return null; // Type 'null' is not assignable to type 'void | Destructor'
});

// Destructors are only allowed to return void.
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };

// NOTE: callbacks are _only_ allowed to return either void, or a destructor.
type EffectCallback = () => void | Destructor;

// (TypeScript 3.0): ReadonlyArray<unknown>
type DependencyList = ReadonlyArray<any>;

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
// NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T>
/**
 * `useImperativeHandle` customizes the instance value that is exposed to parent components when using
 * `ref`. As always, imperative code using refs should be avoided in most cases.
 *
 * `useImperativeHandle` should be used with `React.forwardRef`.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
 */

const nameInput = React.useRef<HTMLInputElement>(null);

const nameInput = React.useRef<HTMLInputElement>(null);
nameInput.current.innerText = 'hello world';

Cannot assign to 'current' because it is a read-only property.

function useRef<T>(initialValue: T): MutableRefObject<T>;
// convenience overload for refs given as a ref prop as they typically start with a null value
/**
 * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
 * (`initialValue`). The returned object will persist for the full lifetime of the component.
 *
 * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
 * value around similar to how you’d use instance fields in classes.
 *
 * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
 * of the generic argument.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#useref
 */

const nameInput = React.useRef<HTMLInputElement | null>(null);

nameInput.current?.innerText = "hello world";

function useRef<T>(initialValue: T | null): RefObject<T>;
// convenience overload for potentially undefined initialValue / call with 0 arguments
// has a default to stop it from defaulting to {} instead
/**
 * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
 * (`initialValue`). The returned object will persist for the full lifetime of the component.
 *
 * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
 * value around similar to how you’d use instance fields in classes.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#useref
 */

function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;
/**
 * `useMemo` will only recompute the memoized value when one of the `deps` has changed.
 *
 * Usage note: if calling `useMemo` with a referentially stable function, also give it as the input in
 * the second argument.
 *
 * ```ts
 * function expensive () { ... }
 *
 * function Component () {
 *   const expensiveResult = useMemo(expensive, [expensive])
 *   return ...
 * }
 * ```
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usememo
 */

const add = (a: number, b: number) => a + b;

const memoizedCallback = useCallback(
   (a) => {
      add(a, b);
   },
   [b]
);

memoizedCallback('hello');
memoizedCallback(5);

const memoizedCallback = useCallback(
   (a: number) => {
      add(a, b);
   },
   [b]
);

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
/**
 * `useDebugValue` can be used to display a label for custom hooks in React DevTools.
 *
 * NOTE: We don’t recommend adding debug values to every custom hook.
 * It’s most valuable for custom hooks that are part of shared libraries.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue
 */

let a = 1;
setTimeout(() => {
   a += 1;
}, 1000);

const calculatedValue = useMemo<number>(() => a ** 2, [a]);

const calculatedValue = useMemo<number>(() => a + 'hello', [a]);
// 类型“() => string”的参数不能赋给类型“() => number”的参数

const ColorContext = React.createContext({ color: 'green' });

const Welcome = () => {
   const { color } = useContext(ColorContext);
   return <div style={{ color }}>hello world</div>;
};

interface IColor {
   color: string;
}

const ColorContext = React.createContext<IColor>({ color: 'green' });

function useContext<T>(context: Context<T> /*, (not public API) observedBits?: number|boolean */): T;
/**
 * Returns a stateful value, and a function to update it.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usestate
 */

const [state, dispatch] = useReducer(reducer, initialArg, init);

const reducer = (state, action) => {
   switch (action.type) {
      case 'increment':
         return { count: state.count + 1 };
      case 'decrement':
         return { count: state.count - 1 };
      default:
         throw new Error();
   }
};

const Counter = () => {
   const initialState = { count: 0 };
   const [state, dispatch] = useReducer(reducer, initialState);

   return (
      <>
         Count: {state.count}
         <button onClick={() => dispatch({ type: 'increment' })}>+</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </>
   );
};

type ActionType = {
   type: 'increment' | 'decrement';
};

type State = { count: number };

const initialState: State = { count: 0 };
const reducer = (state: State, action: ActionType) => {
   // ...
};

dispatch({ type: 'reset' });
// Error! type '"reset"' is not assignable to type '"increment" | "decrement"'

type ActionType = {
   type: 'increment' | 'decrement';
};

type State = { count: number };

const reducer: React.Reducer<State, ActionType> = (state, action) => {
   // ...
};

type State = {
   text: string;
};

const App: React.FC = () => {
   const [text, setText] = useState<string>('');

   const onChange = (e: React.FormEvent<HTMLInputElement>): void => {
      setText(e.currentTarget.value);
   };

   return (
      <div>
         <input type='text' value={text} onChange={this.onChange} />
      </div>
   );
};

interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {
   altKey: boolean;
   button: number;
   buttons: number;
   clientX: number;
   clientY: number;
   ctrlKey: boolean;
   /**
    * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
    */
   getModifierState(key: string): boolean;
   metaKey: boolean;
   movementX: number;
   movementY: number;
   pageX: number;
   pageY: number;
   relatedTarget: EventTarget | null;
   screenX: number;
   screenY: number;
   shiftKey: boolean;
}

interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
   target: EventTarget & T;
}

interface EventTarget {
   addEventListener(
      type: string,
      listener: EventListenerOrEventListenerObject | null,
      options?: boolean | AddEventListenerOptions
   ): void;
   dispatchEvent(evt: Event): boolean;
   removeEventListener(
      type: string,
      listener?: EventListenerOrEventListenerObject | null,
      options?: EventListenerOptions | boolean
   ): void;
}

<input onChange={(e) => onSourceChange(e)} placeholder='最多30个字' />;

const onSourceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   if (e.target.value.length > 30) {
      message.error('请长度不能超过30个字，请重新输入');
      return;
   }
   setSourceInput(e.target.value);
};

type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }['bivarianceHack'];

type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
// 剪切板事件处理函数
type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
// 复合事件处理函数
type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
// 拖拽事件处理函数
type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
// 焦点事件处理函数
type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
// 表单事件处理函数
type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
// Change事件处理函数
type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
// 键盘事件处理函数
type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
// 鼠标事件处理函数
type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
// 触屏事件处理函数
type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
// 指针事件处理函数
type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
// 界面事件处理函数
type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
// 滚轮事件处理函数
type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
// 动画事件处理函数
type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
// 过渡事件处理函数
type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;

type State = {
   text: string;
};

const App: React.FC = () => {
   const [text, setText] = useState<string>('');

   const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
      setText(e.currentTarget.value);
   };

   return (
      <div>
         <input type='text' value={text} onChange={this.onChange} />
      </div>
   );
};

a: HTMLAnchorElement;
body: HTMLBodyElement;
br: HTMLBRElement;
button: HTMLButtonElement;
div: HTMLDivElement;
h1: HTMLHeadingElement;
h2: HTMLHeadingElement;
h3: HTMLHeadingElement;
html: HTMLHtmlElement;
img: HTMLImageElement;
input: HTMLInputElement;
ul: HTMLUListElement;
li: HTMLLIElement;
link: HTMLLinkElement;
p: HTMLParagraphElement;
span: HTMLSpanElement;
style: HTMLStyleElement;
table: HTMLTableElement;
tbody: HTMLTableSectionElement;
video: HTMLVideoElement;
audio: HTMLAudioElement;
meta: HTMLMetaElement;
form: HTMLFormElement;

<Button
   type='text'
   onClick={(e: React.MouseEvent<HTMLElement>) => {
      handleOperate();
      e.stopPropagation();
   }}
>
   <img src={cancelChangeIcon} alt='' />
   取消修改
</Button>

document.querySelectorAll('.paper').forEach((item) => {
   const firstPageHasAddEle = (item.firstChild as HTMLDivElement).classList.contains('add-ele');

   if (firstPageHasAddEle) {
      item.removeChild(item.firstChild as ChildNode);
   }
});

interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
   accept?: string | undefined;
   alt?: string | undefined;
   autoComplete?: string | undefined;
   autoFocus?: boolean | undefined;
   capture?: boolean | string | undefined;
   checked?: boolean | undefined;
   crossOrigin?: string | undefined;
   disabled?: boolean | undefined;
   enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined;
   form?: string | undefined;
   formAction?: string | undefined;
   formEncType?: string | undefined;
   formMethod?: string | undefined;
   formNoValidate?: boolean | undefined;
   formTarget?: string | undefined;
   height?: number | string | undefined;
   list?: string | undefined;
   max?: number | string | undefined;
   maxLength?: number | undefined;
   min?: number | string | undefined;
   minLength?: number | undefined;
   multiple?: boolean | undefined;
   name?: string | undefined;
   pattern?: string | undefined;
   placeholder?: string | undefined;
   readOnly?: boolean | undefined;
   required?: boolean | undefined;
   size?: number | undefined;
   src?: string | undefined;
   step?: number | string | undefined;
   type?: string | undefined;
   value?: string | ReadonlyArray<string> | number | undefined;
   width?: number | string | undefined;

   onChange?: ChangeEventHandler<T> | undefined;
}

import React from 'react';
import classNames from 'classnames';

export enum ButtonSize {
   Large = 'lg',
   Small = 'sm'
}

export enum ButtonType {
   Primary = 'primary',
   Default = 'default',
   Danger = 'danger',
   Link = 'link'
}

interface BaseButtonProps {
   className?: string;
   disabled?: boolean;
   size?: ButtonSize;
   btnType?: ButtonType;
   children: React.ReactNode;
   href?: string;
}

// 使用 交叉类型（&）获得我们自己定义的属性和原生 button 的属性
type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;

// 使用 交叉类型（&）获得我们自己定义的属性和原生 a 标签的属性
type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;

// 使用 Partial<> 使两种属性可选
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

const Button: React.FC<ButtonProps> = (props) => {
   const { disabled, className, size, btnType, children, href, ...restProps } = props;

   const classes = classNames('btn', className, {
      [`btn-${btnType}`]: btnType,
      [`btn-${size}`]: size,
      disabled: btnType === ButtonType.Link && disabled // 只有 a 标签才有 disabled 类名，button 没有
   });

   if (btnType === ButtonType.Link && href) {
      return (
         <a className={classes} href={href} {...restProps}>
            {children}
         </a>
      );
   } else {
      return (
         <button
            className={classes}
            disabled={disabled} // button 元素默认有 disabled 属性，所以即便没给他设置样式也会和普通 button 有一定区别
            {...restProps}
         >
            {children}
         </button>
      );
   }
};

Button.defaultProps = {
   disabled: false,
   btnType: ButtonType.Default
};

export default Button;

interface WithLoadingProps {
   loading: boolean;
}

const withLoading = <P extends object>(Component: React.ComponentType<P>) =>
   class WithLoading extends React.Component<P & WithLoadingProps> {
      render() {
         const { loading, ...props } = this.props;
         return loading ? <LoadingSpinner /> : <Component {...(props as P)} />;
      }
   };

const withLoading = <P extends object>(Component: React.ComponentType<P>): React.FC<P & WithLoadingProps> => ({
   loading,
   ...props
}: WithLoadingProps) => (loading ? <LoadingSpinner /> : <Component {...(props as P)} />);

interface Foo {
   name: string;
   age: number;
}
type T = keyof Foo; // -> "name" | "age"

type Keys = 'a' | 'b';
type Obj = {
   [p in Keys]: any;
}; // -> { a: any， b: any }

type Partial<T> = {
   [P in keyof T]?: T[P];
};

interface IUser {
   name: string;
   age: number;
   department: string;
}

type optional = Partial<IUser>;

// optional的结果如下
type optional = {
   name?: string | undefined;
   age?: number | undefined;
   department?: string | undefined;
};

type Required<T> = {
   [P in keyof T]-?: T[P];
};

interface IPerson {
   name?: string;
   age?: number;
   height?: number;
}

const person: Required<IPerson> = {
   name: 'zhangsan',
   age: 18,
   height: 180
};

type Mutable<T> = {
   -readonly [P in keyof T]: T[P];
};

type Readonly<T> = {
   readonly [P in keyof T]: T[P];
};

interface IPerson {
   name: string;
   age: number;
}

const person: Readonly<IPerson> = {
   name: 'zhangsan',
   age: 18
};

person.age = 20; //  Error: cannot reassign a readonly property

function prop<T, K extends keyof T>(obj: T, key: K) {
   return obj[key];
}

function prop2<T>(obj: T, key: keyof T) {
   return obj[key];
}

let o = {
   p1: 0,
   p2: ''
};

let v = prop(o, 'p1'); // is number, K is of type 'p1'
let v2 = prop2(o, 'p1'); // is number | string, no extra info is captured

type Record<K extends keyof any, T> = {
   [P in K]: T;
};

interface IPageinfo {
   name: string;
}

type IPage = 'home' | 'about' | 'contact';

const page: Record<IPage, IPageinfo> = {
   about: { name: 'about' },
   contact: { name: 'contact' },
   home: { name: 'home' }
};

type Pick<T, K extends keyof T> = {
   [P in K]: T[P];
};

interface IPerson {
   name: string;
   age: number;
   height: number;
}

const person: Pick<IPerson, 'name' | 'age'> = {
   name: 'zhangsan',
   age: 18
};

T extends U ? X : Y

type TypeName<T> = T extends string
   ? 'string'
   : T extends number
   ? 'number'
   : T extends boolean
   ? 'boolean'
   : T extends undefined
   ? 'undefined'
   : T extends Function
   ? 'function'
   : 'object';

type Exclude<T, U> = T extends U ? never : T;

type T = Exclude<1 | 2, 1 | 3>; // -> 2

type Extract<T, U> = T extends U ? T : never;

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

// 使用
type Foo = Omit<
   {
      name: string;
      age: number;
   },
   'name'
>; // -> { age: number }

interface IPerson {
   name: string;
   age: number;
   height: number;
}

const person: Omit<IPerson, 'age' | 'sex'> = {
   name: 'zhangsan',
   height: 180
};

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function foo(x: number): Array<number> {
   return [x];
}
type fn = ReturnType<typeof foo>;

import { AxiosPromise } from 'axios'; // 导入接口
type AxiosReturnType<T> = T extends (...args: any[]) => AxiosPromise<infer R> ? R : any;

// 使用
type Resp = AxiosReturnType<Api>; // 泛型参数中传入你的 Api 请求函数

declare function test(a: number): number;
declare function test(a: string): string;

const resS = test('Hello World'); // resS 被推断出类型为 string；
const resN = test(1234); // resN 被推断出类型为 number;

interface User {
   name: string;
   age: number;
}

declare function test(para: User | number, flag?: boolean): number;

const user = {
   name: 'Jack',
   age: 666
};

// 没有报错，但是与想法违背
const res = test(user, false);

interface User {
   name: string;
   age: number;
}

declare function test(para: User): number;
declare function test(para: number, flag: boolean): number;

const user = {
   name: 'Jack',
   age: 666
};

// bingo
// Error: 参数不匹配
const res = test(user, false);

interface User {
   name: string;
   age: number;
}

const user = {
   name: 'Jack',
   age: 123
};

class SomeClass {
   /**
    * 注释 1
    */
   public test(para: User): number;
   /**
    * 注释 2
    */
   public test(para: number, flag: boolean): number;
   public test(para: User | number, flag?: boolean): number {
      // 具体实现
      return 11;
   }
}

const someClass = new SomeClass();

// ok
someClass.test(user);
someClass.test(123, false);

// Error，涉及到具体实现时，这个地方报错
someClass.test(123);
someClass.test(user, false);

// Compile with --noImplicitThis

type ObjectDescriptor<D, M> = {
   data?: D;
   methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};

function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
   let data: object = desc.data || {};
   let methods: object = desc.methods || {};
   return { ...data, ...methods } as D & M;
}

let obj = makeObject({
   data: { x: 0, y: 0 },
   methods: {
      moveBy(dx: number, dy: number) {
         this.x += dx; // Strongly typed this
         this.y += dy; // Strongly typed this
      }
   }
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

type FunctionPropertyNames<T> = {
   [K in keyof T]: T[K] extends Function ? K : never;
}[keyof T];
type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;

interface Part {
   id: number;
   name: string;
   subparts: Part[];
   updatePart(newName: string): void;
}

type T40 = FunctionPropertyNames<Part>; // "updatePart"
type T42 = FunctionProperties<Part>; // { updatePart(newName: string): void }

class SomeClass {
   value = [1, 2, 3];

   someMethod() {
      this.value.find(/* ... */); // ok
      this.find(/* ... */); // Error：SomeClass 没有 find 方法。
   }
}

type ArrayMethodName = 'filter' | 'forEach' | 'find';

type SelectArrayMethod<T> = {
   [K in ArrayMethodName]: Array<T>[K];
};

interface SomeClass extends SelectArrayMethod<number> {}

class SomeClass {
   value = [1, 2, 3];

   someMethod() {
      this.forEach(/* ... */); // ok
      this.find(/* ... */); // ok
      this.filter(/* ... */); // ok
      this.value; // ok
      this.someMethod(); // ok
   }
}

const someClass = new SomeClass();
someClass.forEach(/* ... */); // ok
someClass.find(/* ... */); // ok
someClass.filter(/* ... */); // ok
someClass.value; // ok
someClass.someMethod(); // ok

interface User {
   name: string;
   age: number;
}

export default class NewRoom extends Vue {
   private user = {} as User;
}

// https://github.com/Microsoft/TypeScript/blob/master/src/compiler/types.ts#L3859
export const enum ObjectFlags {
   Class = 1 << 0, // Class
   Interface = 1 << 1, // Interface
   Reference = 1 << 2, // Generic type reference
   Tuple = 1 << 3, // Synthesized generic tuple type
   Anonymous = 1 << 4, // Anonymous
   Mapped = 1 << 5, // Mapped
   Instantiated = 1 << 6, // Instantiated anonymous or mapped type
   ObjectLiteral = 1 << 7, // Originates in an object literal
   EvolvingArray = 1 << 8, // Evolving array type
   ObjectLiteralPatternWithComputedProperties = 1 << 9, // Object literal pattern with computed properties
   ContainsSpread = 1 << 10, // Object literal contains spread operation
   ReverseMapped = 1 << 11, // Object contains a property from a reverse-mapped type
   JsxAttributes = 1 << 12, // Jsx attributes type
   MarkerType = 1 << 13, // Marker type used for variance probing
   JSLiteral = 1 << 14, // Object type declared in JS - disables errors on read/write of nonexisting members
   ClassOrInterface = Class | Interface
}

enum AnimalFlags {
   None = 0,
   HasClaws = 1 << 0,
   CanFly = 1 << 1,
   HasClawsOrCanFly = HasClaws | CanFly
}

interface Animal {
   flags: AnimalFlags;
   [key: string]: any;
}

function printAnimalAbilities(animal: Animal) {
   var animalFlags = animal.flags;
   if (animalFlags & AnimalFlags.HasClaws) {
      console.log('animal has claws');
   }
   if (animalFlags & AnimalFlags.CanFly) {
      console.log('animal can fly');
   }
   if (animalFlags == AnimalFlags.None) {
      console.log('nothing');
   }
}

var animal = { flags: AnimalFlags.None };
printAnimalAbilities(animal); // nothing
animal.flags |= AnimalFlags.HasClaws;
printAnimalAbilities(animal); // animal has claws
animal.flags &= ~AnimalFlags.HasClaws;
printAnimalAbilities(animal); // nothing
animal.flags |= AnimalFlags.HasClaws | AnimalFlags.CanFly;
printAnimalAbilities(animal); // animal has claws, animal can fly

declare type MethodDecorator = <T>(
   target: Object,
   propertyKey: string | symbol,
   descriptor: TypedPropertyDescriptor<T>
) => TypedPropertyDescriptor<T> | void;

function methodDecorator(): MethodDecorator {
   return (target, key, descriptor) => {
      // ...
   };
}

function testAble(): ClassDecorator {
   return (target) => {
      target.prototype.someValue = true;
   };
}

@testAble()
class SomeClass {}

const someClass = new SomeClass();

someClass.someValue(); // Error: Property 'someValue' does not exist on type 'SomeClass'.

type Constructor<T> = new (...args: any[]) => T;

// mixin 函数的声明，需要实现
declare function mixin<T1, T2>(...MixIns: [Constructor<T1>, Constructor<T2>]): Constructor<T1 & T2>;

class MixInClass1 {
   mixinMethod1() {}
}

class MixInClass2 {
   mixinMethod2() {}
}

class Base extends mixin(MixInClass1, MixInClass2) {
   baseMethod() {}
}

const x = new Base();

x.baseMethod(); // OK
x.mixinMethod1(); // OK
x.mixinMethod2(); // OK
x.mixinMethod3(); // Error

function Prop(): PropertyDecorator {
   return (target, key: string) => {
      const type = Reflect.getMetadata('design:type', target, key);
      console.log(`${key} type: ${type.name}`);
      // other...
   };
}

class SomeClass {
   @Prop()
   public Aprop!: string;
}

function classDecorator(): ClassDecorator {
   return (target) => {
      // 在类上定义元数据，key 为 `classMetaData`，value 为 `a`
      Reflect.defineMetadata('classMetaData', 'a', target);
   };
}

function methodDecorator(): MethodDecorator {
   return (target, key, descriptor) => {
      // 在类的原型属性 'someMethod' 上定义元数据，key 为 `methodMetaData`，value 为 `b`
      Reflect.defineMetadata('methodMetaData', 'b', target, key);
   };
}

@classDecorator()
class SomeClass {
   @methodDecorator()
   someMethod() {}
}

Reflect.getMetadata('classMetaData', SomeClass); // 'a'
Reflect.getMetadata('methodMetaData', new SomeClass(), 'someMethod'); // 'b'

type Constructor<T = any> = new (...args: any[]) => T;

const Injectable = (): ClassDecorator => (target) => {};

class OtherService {
   a = 1;
}

@Injectable()
class TestService {
   constructor(public readonly otherService: OtherService) {}

   testMethod() {
      console.log(this.otherService.a);
   }
}

const Factory = <T>(target: Constructor<T>): T => {
   // 获取所有注入的服务
   const providers = Reflect.getMetadata('design:paramtypes', target); // [OtherService]
   const args = providers.map((provider: Constructor) => new provider());
   return new target(...args);
};

Factory(TestService).testMethod(); // 1

@Controller('/test')
class SomeClass {
   @Get('/a')
   someGetMethod() {
      return 'hello world';
   }

   @Post('/b')
   somePostMethod() {}
}

const METHOD_METADATA = 'method'；
const PATH_METADATA = 'path'；

const Controller = (path: string): ClassDecorator => {
  return target => {
    Reflect.defineMetadata(PATH_METADATA, path, target);
  }
}

const createMappingDecorator = (method: string) => (path: string): MethodDecorator => {
  return (target, key, descriptor) => {
    Reflect.defineMetadata(PATH_METADATA, path, descriptor.value);
    Reflect.defineMetadata(METHOD_METADATA, method, descriptor.value);
  }
}

const Get = createMappingDecorator('GET');
const Post = createMappingDecorator('POST');

function mapRoute(instance: Object) {
   const prototype = Object.getPrototypeOf(instance);

   // 筛选出类的 methodName
   const methodsNames = Object.getOwnPropertyNames(prototype).filter(
      (item) => !isConstructor(item) && isFunction(prototype[item])
   );
   return methodsNames.map((methodName) => {
      const fn = prototype[methodName];

      // 取出定义的 metadata
      const route = Reflect.getMetadata(PATH_METADATA, fn);
      const method = Reflect.getMetadata(METHOD_METADATA, fn);
      return {
         route,
         method,
         fn,
         methodName
      };
   });
}

Reflect.getMetadata(PATH_METADATA, SomeClass); // '/test'

mapRoute(new SomeClass());

/**
 * [{
 *    route: '/a',
 *    method: 'GET',
 *    fn: someGetMethod() { ... },
 *    methodName: 'someGetMethod'
 *  },{
 *    route: '/b',
 *    method: 'POST',
 *    fn: somePostMethod() { ... },
 *    methodName: 'somePostMethod'
 * }]
 *
 */

const arr = [1];

arr.push('1'); // Error

const arr: Array<string | number> = [1];

arr.push('1'); // OK
arr.push(true); // Error

const arr: [number, string?] = [1]; // arr 的成员类型可以是: number, string, undefined
arr.push('1'); // OK
arr.push(true); // Error

arr[0] = '1'; // Error
arr[1] = 1; // Error

interface A {
   name: string;
}

interface B {
   age: number;
}

const [{ data: a }, { data: b }] = await Promise.all([axios.get<A>('http://some.1'), axios.get<B>('http://some.2')]);

// 使用类型注解
const requestList: [Promise<AxiosResponse<A>>, Promise<AxiosResponse<B>>?] = [axios.get<A>('http://some.1')];
if (flag) {
   requestList[1] = axios.get<B>('http://some.2');
}
const [{ data: a }, response] = await Promise.all(requestList);

const requestList: any[] = [axios.get<A>('http://some.1')]; // 设置为 any[] 类型
if (flag) {
   requestList[1] = axios.get<B>('http://some.2');
}
const [{ data: a }, response] = (await Promise.all(requestList)) as [AxiosResponse<A>, AxiosResponse<B>?]; // 类型安全

const a = 'hello'; // a 的类型是 'hello'
a = 'world'; // Error

let a: 'hello' = 'hello'; // a 的类型是 'hello'
a = 'world'; // Error

interface A {
   name: string;
}

interface B {
   name: string;
   age: number;
}

type C = A | B;
type D = A & B;

let someThing: { name: string };
someThing = { name: 'hello' }; // ok
someThing = { name: 'hello', age: 123 }; // Error, 对象字面量只能指定已知属性, { name: string } 类型中不存在 age 属性

let otherThing = { name: 'hello', age: 123 };
someThing = otherThing; // ok

function logName(something: { name: string }) {
   console.log(something.name);
}

const obj = {
   name: 'matt',
   job: 'being awesome'
};

logName(obj); // ok
logName({ name: 'matt' }); // ok
logName({ nama: 'matt' }); // Error: nama 属性在 { name: string } 属性中不存在。
logName({ name: 'matt', job: 'being awesome' }); // Error: 对象字面量只能指定已知属性，`job` 属性在这里并不存在。