/**
* 生成一个原始对象的响应式副本，这种转换是深层次的，会影响到所有嵌套属性
*/
function reactive(target: object) {
  // 如果目标对象是只读的，直接返回目标对象
  if (target && (target as Target).__v_isReadonly) {
    return target
  }
  // 否则就在目标对象的基础上创建响应式对象
  return createReactiveObject(
    target, // 目标代理对象
    false, // 是否只读
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

/**
* 创建响应式对象
*/ 
function createReactiveObject(
  target: Target, // 原始对象
  isReadonly: boolean, // 是否只读
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any> // 正在追踪的可响应对象的集合
) {
  // 如果 target 不是对象类型，返回原值
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
	// 如果 taret 已经是一个响应式对象，返回原值
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // 如果 target 已经有一个代理对象，返回已经存在的代理对象
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // 只有特定类型的对象才可以被观测
  // 包括 Array/Object/Map/Set/WeakMap/WeakSet，不是则返回 TargetType.INVALID
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  const proxy = new Proxy(
    target,
    // Map/Set/WeakMap/WeakSet 被认为是 COLLECTION 类型，handler 和其它类型不同
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      // 如果 key 是可响应标志 IS_REACTIVE，返回 !isReadonly
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      // 如果 key 是只读标志 IS_READONLY，返回 isReadonly
      return isReadonly
    } else if (
      key === ReactiveFlags.RAW &&
      receiver ===
        (isReadonly
          ? shallow
            ? shallowReadonlyMap
            : readonlyMap
          : shallow
          ? shallowReactiveMap
          : reactiveMap
        ).get(target)
    ) {
      return target
    }

    const targetIsArray = isArray(target)
    
    // 如果目标是数组
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }

    const res = Reflect.get(target, key, receiver)

    // 判断 key 是否是 Symbol
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }

    // 如果可读，追踪
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    // 如果是浅层响应，直接返回得到的值
    if (shallow) {
      return res
    }

    // 判断是否 Ref
    if (isRef(res)) {
      // ref unwrapping - does not apply for Array + integer key.
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      return shouldUnwrap ? res.value : res
    }

    if (isObject(res)) {
      // Convert returned value into a proxy as well. we do the isObject check
      // here to avoid invalid value warning. Also need to lazy access readonly
      // and reactive here to avoid circular dependency.
      return isReadonly ? readonly(res) : reactive(res)
    }

    return res
  }
}

interface Ref<T = any> {
  [RefSymbol]: true
  value: T
}

function ref(value?: unknown) {
  return createRef(value)
}

function createRef(rawValue: unknown, shallow = false) {
  // 判断是否是 Ref，如果是 Ref 则直接返回
  if (isRef(rawValue)) {
    return rawValue
  }
  // 判断是否是浅代理
  // convert = (val) => isObject(val) ? reactive(val) : val
  let value = shallow ? rawValue : convert(rawValue)
  
  // 
  const r = {
    __v_isRef: true,
    get value() {
      track(r, TrackOpTypes.GET, 'value')
      return value
    },
    set value(newVal) {
      if (hasChanged(toRaw(newVal), rawValue)) {
        rawValue = newVal
        value = shallow ? newVal : convert(newVal)
        trigger(
          r,
          TriggerOpTypes.SET,
          'value',
          __DEV__ ? { newValue: newVal } : void 0
        )
      }
    }
  }
  return r
}

function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>

  // 如果传入的 getterOrOptions 是函数，则将其设置为计算属性的 getter
  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    // 如果只传入了 getter 函数，将计算属性是不可修改的 readonly
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    // 如果 getterOrOptions 是个对象，则计算属性是可修改的
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }

  let dirty = true
  let value: T
  let computed: ComputedRef<T>

  const runner = effect(getter, {
    lazy: true,
    // 将 effect 标记为 computed，则其在执行时拥有更高的优先级
    computed: true,
    scheduler: () => {
      if (!dirty) {
        dirty = true
        trigger(computed, TriggerOpTypes.SET, 'value')
      }
    }
  })
  
  // 构建一个 computed 对象
  computed = {
    __v_isRef: true,
    // 将 effect 暴露，使得计算属性能够 stop
    effect: runner,
    get value() {
      if (dirty) {
        value = runner()
        dirty = false
      }
      // 追踪
      track(computed, TrackOpTypes.GET, 'value')
      // 返回最新值
      return value
    },
    set value(newValue: T) {
      setter(newValue)
    }
  } as any
  
  return computed
}

function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

function createReactiveEffect<T = any>(
  fn: (...args: any[]) => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(...args: unknown[]): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn(...args)
    }
    // 如果 effectStack 不存在当前 effect
    if (!effectStack.includes(effect)) {
      cleanup(effect)
      try {
        enableTracking()
        // 将当前 effect 加入 effectStack
        effectStack.push(effect)
        // 将当前 effect 设置为 activeEffect
        activeEffect = effect
        return fn(...args)
      } finally {
        effectStack.pop()
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = []
  effect.options = options
  return effect
}

function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  // targetMap 存储了所有被追踪的对象，如果当前对象没有被追踪，直接返回
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // never been tracked
    return
  }

  const effects = new Set<ReactiveEffect>()
  const computedRunners = new Set<ReactiveEffect>()
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => {
        if (effect !== activeEffect || !shouldTrack) {
          if (effect.options.computed) {
            computedRunners.add(effect)
          } else {
            effects.add(effect)
          }
        } else {
          // the effect mutated its own dependency during its execution.
          // this can be caused by operations like foo.value++
          // do not trigger or we end in an infinite loop
        }
      })
    }
  }

  // 如果当前触发类型为 CLEAR
  if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    depsMap.forEach(add)
  } else if (key === 'length' && isArray(target)) {
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= (newValue as number)) {
        add(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      add(depsMap.get(key))
    }
    // also run for iteration key on ADD | DELETE | Map.SET
    const isAddOrDelete =
      type === TriggerOpTypes.ADD ||
      (type === TriggerOpTypes.DELETE && !isArray(target))
    if (
      isAddOrDelete ||
      (type === TriggerOpTypes.SET && target instanceof Map)
    ) {
      add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))
    }
    if (isAddOrDelete && target instanceof Map) {
      add(depsMap.get(MAP_KEY_ITERATE_KEY))
    }
  }

  const run = (effect: ReactiveEffect) => {
    // 在开发环境下，调试触发器
    if (__DEV__ && effect.options.onTrigger) {
      effect.options.onTrigger({
        effect,
        target,
        key,
        type,
        newValue,
        oldValue,
        oldTarget
      })
    }
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
  }

  // Important: computed effects must be run first so that computed getters
  // can be invalidated before any normal effects that depend on them are run.
  computedRunners.forEach(run)
  effects.forEach(run)
}

function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!shouldTrack || activeEffect === undefined) {
    return
  }
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}

// boolean
let isDone: boolean = false;
// number
// JavaScript 和 TypeScript 中的数字不是浮点类型 floating point 就是大整数类型 BigInteger
let decLiteral: number = 6;
let bigLiteral: number = 100n;
// string
let name: string = 'bob';
// Array
let list: number[] = [1,2,3];
let list: Array<number> = [1,2,3];
// Tuple
// 元组类型要求值类型、顺序和个数一一对应
let tuple: [string, string] = ['string', 'string'];
// enum
enum Color {Red = 0, Green, Blue}
let c: Color = Color.Green;
// Any
let source: any = 4
// Void
let unusable: void = undefined;
// Null & Undefined
let u: undefined = undefined;
let n: null = null;
// Never
function error(message: string): never {
    throw new Error(message);
}
// 类型断言
// 明确知道值的类型时可使用类型断言
let strValue: any = 'str';
let length: number = (<string>strValue).length;
let length: number = (strValue as string).length

interface OptionAttribute {
    optionNum?: number;
    optionStr?: string;
}

interface ReadonlyAttribute {
    readonly num: number;
    readonly str: string;
}

interface SquareConfig { 
  width: number;
  color?: string;
}

function createSquare(config: SquareConfig): { color: string, area: number } {
  let newSquare = { color: 'blue', area: 0 };
  if (config.width) newSquare.area = config.width * config.width;
  if (config.color) newSquare.color = config.color;
  return newSquare;
}

// error: height not expected in type SquareConfig
let mySquare = createSquare({ color: 'green', width: 10, height: 10 });

let mySquare = createSquare({ color: 'green', width: 10, height: 10 } as SquareConfig);

interface SquareConfig { 
  width: number;
  color?: string;
  [propName: string]: any;
}

interface TypeFunc {
    (source: string, subString: string): boolean;
}

let mySearchFunc: TypeFunc;
mySearchFunc = function(source: string, subString: string) {
    let result = source.search(subString);
    return result > -1;
}

// 表明了当用 number 去索引 StringArr 时会得到 string 类型的返回值
interface StringArr {
    [index: number]: string;
}

let myArr: StringArr;
myArr = ["A","B"];
let myStr: string = myArr[0];

interface StringArray { 
  [index: string]: string;
  [index: number]: string;
}

interface ClockInterface {
    currentTime: Date;
    setTime:(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime:(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) {}
}

interface Father {
    familyName: string;
}

interface Son extends Father {
    givenName: string;
}

let aPerson = <Son>{};
aPerson.familyName = 'S';
aPerson.givenName = 'T';

interface Shape {
  color: string;
}

interface Stroke {
  penWidth: number;
}

interface Square extends Shape, Stroke {
  width: number;
}

interface Counter {
  (start: number): number;
	interval: number;
	reset(): void;
}

function getCounter(): Counter {
  let counter = <Counter>function (start: number) {};
  counter.interval = 1;
  counter.reset = function () {};
  return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 2;

// 定义一个类
class Person {
    familyName: string;
    constructor(familyName: string, givenName: string, age: number) {
        this.familyName = familyName;
    }
    say() {
        return 'Hello, my name is ' + this.familyName + ' ' + this.givenName;
    }
    move(distanceInMeters = 0) {
        console.log('${this.name} moved ${distanceInMeters}m.');
    }
}
// 创建类实例
lei aPerson = new Person('Wang', 'XiaoHong', 22);

class Student extends Person {
    constructor(familyName: string, givenName: string, age: number) {
        super(familyName, givenName, age);
    }
    move(distanceInMeters = 5) {
			super.move(distanceInMeters);
    }
}

class Student {
  constructor(public familyName: string, public givenName: string, public age: number){
  }
}

class student {
  private _familyName: string;
  
  get familyName(): string {
    return this._familyNmae;
  }
  
  set familyName(fName: string) {
		this._familyName = fName;
  }
}

class student {
  static school = 'ts';
  ...
  getStudentSchool() {
    return student.school;
  }
}

abstract class Human {
  abstract function_name: return_type;
}

function fun(arg_1: arg_type, arg_2: arg_type, ...): return_type {
  ...
}

let fun_var_name: (arg_1: arg_type, arg_2: arg_type, ...) => return_type;

let myAdd: (x: number, y: number) => number = function (x: number, y: number) { 
  return x + y;
}

const sum = myAdd(1); // error: Expected 2 arugements, but got 1
const sum1 = myAdd(1, 2, 3); // error: Expected 2 arugements, but got 3

// 可选参数
function buildStudent(name: string, grade: number, gender?: string) { 
  return name + ' ' + grade + ' ' + (gender ? gender : '');
}

const student_1 = buildStudent('Tom', 2);
const student_2 = buildStudent('Jerry', 2, 'male');

// 剩余参数
function buildChildren(name: string, age: number, ...restOfProperty: string[]) { 
  return `${name} ${age} ${restOfProperty.join(' ')}`;
}

const children = buildChildren('Mike', 12, 'male', 'grade 3');

// 类型变量 T 会捕获用户传入的类型，之后我们就可以使用者个类型
function identity<T>(arg: T): T { 
  return arg;
}

const strId = identity('JavaScript');
const numId = identity(12);

function combineFunc<T,K>(x: T, y: K): [T, K] {
  return [T, K];
}

let combine: <T,K>(x: T, y: K) => [T,K] = combineFunc;
// or
let combine: { <T,K>(x: T, y: K): [T, K] } = combineFunc;

interface CombineFunc {
  <T,K>(x: T, y: K): [T, K];
}

let combine: CombineFunc = (x, y) => [x, y];

class CombineFunC {
  combine: <T,K>(x: T, y: K) => [T, K];
}

let combineC: CombineFunC = new CombineFunC<number, number>();
combineC.combine = (x, y) => [x, y];

enum Status {
  DELETED = -1,
  VALID,
  UNPAID,
  PAID
}

enum StatusTip {
  DELETED = 'Order has been deleted.',
  VALID = 'Order is valid.',
  UNPAID = 'Order is unpaid.',
  PAID = 'Order is paid'
}

enum HeterogeneousEnum {
  NO = 0,
  YES = 'Yes'
}

enum Status {
  DELETED = -1,
  VALID,
  UNPAID,
  PAID
}

console.log(Status[0]); // VALID

const enum Directions {
  Up,
  Down,
  Left,
  Right
}

let directions = [ Directions.Up, Directions.Down, Directions.Left, Directions.Right ];

// 如果 x 要兼容 y， y 至少要与 x 拥有相同的属性
let x = { name: 'x' };
let y = { name: 'y', alias: 'Y' };
x = y;
y = x; // Property 'alias' is missing in type '{ name: string; }' but required in type '{ name: string; alias: string; }

let funCom = (x: number, y: number) => x + y;
let funAbc = (x: number, y: number) => [x, y];
let funSub = (x: number) => x;
let funDef = (x: number, y: number) => x * y;
funCom = funSub;
funSub = funCom; // Type '(x: number, y: number) => number' is not assignable to type '(x: number) => number'
funCom = funAbc; // Type '(x: number, y: number) => number[]' is not assignable to type '(x: number, y: number) => number'.Type 'number[]' is not assignable to type 'number'
funCom = funDef;

class W {
  static sign: string = 'AAAAA';
  pro: string = 'W';
  constructor(name: string){}
}

class Y {
  pro: string = 'W';
  constructor(length: number) {}
}

let wC = new W('W');
let yC = new Y(2);

wC = yC; // OK
yC = wC; // OK

interface NotEmpty<T> {
}

let gA: NotEmpty<number>;
let gB: NotEmpty<string>;
gA = gB; // ok

interface NotEmpty<T> {
  data: T;
}

let gA: NotEmpty<number>;
let gB: NotEmpty<string>;
gA = gB; // Error

/ 联合类型
// 联合类型表示一个值可以是几个类型之一
function pad(padding: number | string) {
  return padding;
}

console.log(pad(1));
console.log(pad('A'));

interface Elephant {
  name: string;
  walk();
}

interface Shark {
  name: string;
  swim();
}

function getAnimal(): Elephant | Shark {
  return { name: 'Elephant', walk() { console.log('walk') } } as Elephant;
}

let aAnimal = getAnimal();
console.log(aAnimal.name);
aAnimal.walk();
aAnimal.swim();