const queryRequest = (data) => {
  return new Promise((resolve, reject) => {
    const res = data.map(v => v+'111')
    reject(res)
  })
}
const retry = (query, timeout = 30000, times = 5) => {
  // 使用闭包保存 timer
  let timer = null
  return (data) => {
    return new Promise((resolve, reject) => {
      timer = setTimeout(() => {
        query(data).then(res => {
          clearTimeout(timer)
          resolve(res)
        }).catch(err => {
          clearTimeout(timer)
          reject(err)
        })
      }, timeout)
    })
  }
}
const longRequestRetry = async (data, timeout = 30000, times = 5) => {
  try {
    const res = await retry(queryRequest, timeout = 30000, times)(data)
    console.log('res', res)
  } catch(err) {
    if (times > 0) {
      console.log('times', times)
      longRequestRetry(data, timeout, times - 1)
    }
  }
}
// 使用
const request = (data) => {
  queryRequest(data).then(res => {

  }).catch(err => {
    longRequestRetry(data)
  })
}

// 期望是一个 string 类型 👉 so eazy
// any -> string
type HelloWorld = string
// 你需要使得如下这行不会抛出异常
type test = Expect<Equal<HelloWorld, string>>

// typeof Type Operator
typeof 'hello' // string
function f(a?: string) {
  return {x: 10, y: 1, ...a} // 返回具体值，而不是类型
}
type F0 = ReturnType<f> // ❌ 'f' refers to a value, but is being used as a type here, you should use 'typeof f'
type F1 = ReturnType<typeof f> // {x: number; y:number; a?: string}
// typeof 后面不能跟执行函数
// meant to use = ReturnType<typeof f>
let shouldcontinue: typeof f('aaaa') // ❌

// keyof Type Operator
type Point = {a: string, b: string}
type P0 = keyof Point // type P0 = 'a' | 'b'

// as 类型断言：key Remapping via as
type NewKeyType<P> = Capitalize<string & P>
type MappedTypeWithNewProperties<T> = {
  [P in keyof T as NewKeyType<P>]: T[P]
}
// 条件类型通过never来过滤key
type RemoveKindField<T> = {
  [P in keyof T as Exclude<P, 'kind'>]: T[P]
}
interface Circle {
  kind: 'circle';
  radius: number
}
type kindlessCircle = RemoveKindField<T> // type kindlessCircle = {radius: number}

// extends 继承，扩展，衍生，Class继承，非实例，继承单个Class，衍生多个interface，类型约束 K extends keyof T，K 是 T的子类型（类似于Class A extends Class B, A 是 B的子类一个意思）
// 类继承👉协变&逆变
// infer 待推断的类型

// InstanceType<Type> 提取构造函数的实例函数类型：Class
class C {
  x = 0
}
// 类 & 枚举 横跨 类型空间 & 值空间，所以 C 也算一种类型，但是 `typeof C !== C`, 因为 `typeof C` 并非 `C` 的类型，而`InstanceType<typeof C>`才是, 而 `C` 是 构造函数 `constructor`
type C0 = InstanceType<typeof C> // type C0 = C

interface Todo {
  title: string
  description: string
  completed: boolean
}

// Pick<Type, Keys> 👉 MyPick<Type, Keys> 使用方法一致

type MyPick<T, K extends keyof T> = {
  [P in K]: T[P] // P in K, K = 'title' | 'description' | 'completed', `in` means for P in K
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
    description: 'xxxx' // ❌，description 多余属性
}

interface Todo {
  title: string
  description: string
}
// ReadOnly<Type> 👉 MyReadOnly<Type>

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

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends {} ? DeepReadonly<T[P]> : T[P]
}

type ReadonlyAndPick<T, K extends keyof T> = {readonly [P in keyof T as P extends K ? P : never]: T[P]} & {[P in keyof T as P extends K ? never : P]:[P]}
// 使用 Exclude 替代 P extends K ? never : P && 使用 Pick 替代  P extends K ? P : never
type ReadonlyAndPick<T, K extends keyof T> = {readonly [P in keyof Pick<T, K>]: T[P]} & {[P in keyof T as Exclude<P, K>]: T[P]}
// or
type ReadonlyAndPick<T, K extends keyof T> = {readonly [P in keyof Pick<T, K>]: T[P]} & {[P in Exclude<keyof T, K>]: T[P]}
// 进一步 替换 readonly
type ReadonlyAndPick<T, K extends keyof T> = Readonly<Pick<T, K>> & {[P in Exclude<keyof T, K>]: T[P]}

interface Todo {
  title: string
  description: string
  completed: boolean
}

// Omit<Type, Keys> 👉 MyOmit<Type, Keys>
type MyOmit<T, K extends keyof T> = {
  [P in keyof T as P extends K ? never: P]: T[P]
}
// 跟上面用 never 过滤属性的方式一致，所以还可以这么写
type MyOmit1<T, K extends keyof T> = {
  [P in keyof T as Exclude<P, K>]: T[P];
}

type TodoPreview = MyOmit<Todo, 'description' | 'title'>

const todo: TodoPreview = {
  completed: false,
}

// 从T中排除可分配给U的类型
// T, U 都是字符串类型
// MyExclude<'a' | 'b' | 'c', 'a'> // 输出 'b' | 'c'
type MyExclude<T, U> = T extends U ? never : T

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

type Parameters<T> = T extends (...args: infer P) => any ? P : T

type arr1 = ['a', 'b', 'c']
type arr2 = [1, 2, 3]
type head1 = First<arr1> // 'a'
type head2 = First<arr2> // 1

type First<T> = T extends any[] ? never : T[0]

type tesla = ['tesla', 'model3', 'model X', 'model Y']
type Length<T> = T extends any[] ? T['length'] : never
type teslaLength = Length<tesla> // 4

type arr1 = ['a', 'b', 'c']
type arr2 = [1, 2, 3]
type tail1 = Last<arr1> // 'a'
type tail2 = Last<arr2> // 1
// F 只是一个变量，代表最后一项之前的所有项
type Last<T extends any[]> = T extends [...infer F, infer E]? E: never;

type Concat<T, P> =T extends any[] ? P extends any[] ? [...T, ...P] : never : never;
// or type Concat<T extends any[], P extends any[]> = [...T, ...P]
type Result = Concat<[1], [2]> // [1, 2]

type Push<T extends any[], P extends any> = [...T, P]
type Result = Push<[1, 2], '3'> // [1, 2, '3']

type Unshift<T extends any[], P extends any> = [P, ...T]
type Result = Unshift<[1, 2], '3'> // ['3', 1, 2]

type Pop<T> = T extends [...infer P, infer E] ? P : never;  

type Shift<T> = T extends [infer E, ...infer P] ? P : never;  

type inferTupleT<T extends any[]> = {
  [P in keyof T]: T[P] extends Promise<infer S> ? S : T[P]
}
declare function PromiseAll<T extends any[]>(values: readonly [...T]): Promise<inferTupleT<T>>
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise<string>((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});
const p = PromiseAll([promise1, promise2, promise3] as const) // Promise<[number, 42, string]>

type If<C, T, F> = C extends true ? T : C extends false ? F : never; 
type A = If<true, 'a', 'b'> // 'a'
type B = If<false, 'a', 'b'> // 'b'
type C = If<'c', 'a', 'b'> // never
// 考虑输入  `any` && `boolean`
type D = If<boolean, 'a', 'b'> // 'a' | 'b', boolean 是 union type => distributive conditional types
type E = If<any, 'a', 'b'> // 'a' | 'b', any 是 union type => distributive conditional types
// 第一步去除 T 的 naked type 特点，怎么办呢？和下面 IsNever 处理一致, 加入 array, record, function 结构
type If<C, T, F> = [C] extends [true] ? T : [C] extends [false] ? F : never; 
// 此时 boolean 可以了，但是 any 还不行
type D = If<boolean, 'a', 'b'> // never
type E = If<any, 'a', 'b'> // 'a'
// any 还是不对，还需要破坏类型检查，处理方式就是加入 加入破坏条件: 破坏 T 作为 checked type 的条件 即可
// any extends C ? never : T
type If<C, T, F> = [C] extends [true] ? (any extends C ? never : T) : [C] extends [false] ? (any extends C ? never : F) : never;
// 此时
type D = If<boolean, 'a', 'b'> // never
type E = If<any, 'a', 'b'> // never

// T: checkedType 被检查的类型
// U: extendsType 判断条件
// 下面这个表达式的意思是：如果T能够assignable（这里不是subtype的意思）给U那么结果为X，否则结果为Y
// 根据官方文档的 assignable 图：
type checkTtype = T extends U ? X : Y
// 如果 T 是 naked type: 详见本文末尾解释
// 则表达式就是 distributive conditional types
// T = A | B | C // A,B,C是naked type
type unionTypes = string | number
type checkTtypeUnion<T> = T extends any ? T[] : T
type checkTtypeUnionI1 = checkTtypeUnion<unionTypes> //  string[] | number[]
// 如何消除 distributive conditional types
// 破坏上述3个条件即可，然后用 never 过滤掉该分支

type TupleToUnion<T extends any[]> = T[number]

type tuple = ['tesla', 'model 3', 'model X', 'model Y']
// or
// const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const
type TupleToObject<T extends readonly any[]> = {
  [P in T[number]]: P
}
type result = TupleToObject<tuple> // {tesla: 'tesla', ...}
// when tuple is const
// type result = TupleToObject<typeof tuple>

// IsNever
type IsNever<T> = [T] extends [never] ? true : false
// 将输入变成 不可能是空列表的状态即可，[T] 🉑️， {a: T} 也 🉑️

type Flatten<T> = T extends Array<infer I> ? I : T;

// some-detail.vue script.lang = ts
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { useStore } from 'vuex'
import { key } from 'path/to/store'

export default defineComponent({
  props: {
    list: Array, // round 0: 不够准确
    default() {
      return []
    }
  },
  // setup 内部
  // round 1
  setup: (props: any) =>  {
  // round 2: ?
    const leftType: any = reactive({
      rightType: 0,
      list: []
    })
    // round 3: ?
    const newArray = leftType.list.map(v:any => {
      return {
        ...v,
        changeSomePropName: v.somePropName
      }
    })
    // round 4: ?
    const textFunc: void = () => {
      // do something but do not return anything
    }
    // round 5: ?
    const hasTrue = ref<boolean>(false)
    const isStr = ref<string>('initStr')

    // round 6: ?
    const { list } = toRefs(props) // list: any
    // round 7: ?
    const store: any = useStore(key)
    // round 8: ?
    const getData = getDataByAxiosApi().then(res => {
      const ret: any = res
    })
  })
}

// 以上写法可以改成？

// server/index
import axios, { AxiosRequestConfig, Method } from 'axios'
// 这种写法会导致什么问题？
function request(method: Method, url: string, config: AxiosRequestConfig) {
  return new Promise((resolve, reject) => {
    instance
      .request({
        method: method,
        url: url,
        ...config
      })
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}
// 定义 get 请求方法
export function get(url: string, params?: any, responseType?: resType) {
  return request('GET', url, { params, responseType })
}
// api.ts
const getData = async (data) => {
  try {
    const res = await get('path/to/get/some/data', data)
    return res
  } catch(err) {
    console.error('getData error', error)
  }
 
}
// *.vue 使用getData函数时能否拿到返回的res 类型？？
import { getData } from 'path/to/api.ts'
const res = getData()

// 一开始可能只知道某个变量的几个属性，大致结构，不确定后续属性的新增/减少，可以这样写
// 第一步
// 类型文件B.ts
export type typeAfromB = {
  [k: string]: unknown
  // [k: string]: any
} // unknown & any 的区别： unknown 类型的变量赋值可以赋值给 any 和 unknown， 有类型检查更安全， any 可以赋值给任意类型(包括null & undefined)，没有类型检查

// 第二步
// 组件A.vue
import { reactive, ref } from 'vue'
import { typeAfromB } from 'path/to/B.ts'
const someTypeInSometimes = reactive<typeAfromB>({
  propA: '123',
  propB: 456,
  propC: {},
  propD: [],
  propE: () => {}
})

// 字面量类型
export type typeCfromB = 'GET' | 'POST' | 'DELETE' | 'PUT'
// 联合类型
export type typeDfromB = string | number
// 交叉类型
export type typeEfromB = string & number // 此处的 typeEfromB 是什么?考虑一种类型既是 `string` 又是`number`的类型 
export type typeEEfromB = string[] & number // 此处的 typeEfromB 是什么?考虑一种类型既是 `string[]` 又是`number`的类型 

// 组件B.vue: 使用以上定义的类型
const cb = ref<typeCfromB>('oh my god!') // 这里正确吗？
const db = ref<typeDfromB>(124)
db.value = '124' // 这样写ok吗？
const copyDB = db.includes('1') // 这样行不行？
const eb = ref<typeEfromB>(['125', 123]) // 有没有问题？
const copyEB = ref<typeEEfromB>()
const eeb = copyEB?.value.length // 这样能行吗？eeb 的类型是什么，

type AA = {aa: 'A'}
type BB = {bb: 'B'}
type ABor = AA | BB
type ABand = AA & BB
type AAkeys = keyof AA
type BBkeys = keyof BB
type ABandKeys = keyof ABand // 'aa' | 'bb'
type ABorKeys = keyof ABor // never

const aaa: ABand = {
  aa: 'A',
  bb: 'B'
}

new Promise<T>((resolve, reject) => {
  // do something
})
const a = ref<Map<tring, string[]>>(new Map())

// 可选
// Partial<Type>
interface Todo {
  title: string
  dess: string
  children: string[]
}
type PartialTodo = Todo = Partial<Todo>
// Equal to
type PartialTodo = {
  title?: string
  desc?: string
  children?: string[]
}
// 必选
// Required<Type>
type RequiredPartialTodo = Required<PartialTodo>
// Equal to Todo

// 只读
// Readonly<Type>
function Freeze<T>(obj: T): Readonly<T>

// Pick<Type, Keys> 只使用部分属性 - Keys = Type里的字符串或者字符串集合（并集）：'name', 'name' | 'title' | 'desc' 这2种形式
// Omit<Type, Keys> 忽略部分属性 - Keys = Type里的字符串或者字符串集合（并集）：'name', 'name' | 'title' | 'desc' 与 Pick<Type, Keys> 正好相反
type partProps = 'title' | 'desc'
type TodoPreview = Pick<Todo, partProps>
const todoPreview: TodoPreview = {
  titel: 'xxx',
  desc: '555'
}

// Exclude<Type, ExcludeUnion> 排除联合类型内的某个或者某些类型
type T0 = Exclude<'a' | 'b' | 'c', 'a'> // type T0 = 'a' | 'b'
type T1 = Exclude<'a' | 'b' | 'c', 'a' | 'c'> // type T0 = 'b'

// Extract<Type, Union> 提取 Type 和 Union 的交集
type T2 = Extract<'a' | 'b' | 'c', 'a' | 'f'> // type T2 = 'a'

// 与函数相关的实用方法
// Parameters<Type> 提取函数参数类型
// ConstructorParameters<Type> 提取构造函数参数类型：ErrorConstructor, FunctionConstructor, RegExpConstructor 等
// ReturenType<Type> 提取函数返回类型


// 不常用到的实用方法
// ThisParameterType<Type> 提取`有this`的函数参数类型，或者提不到就是 unknown
// ThisType<Type> 不返回转换类型，只作为一个上下文相关的 this 类型 的标记，必须`tsconfig.ts`开启 `noImplicitThis`

// 内置字符串操作类型
// Uppercase<StringType> 全部大写
// Lowercase<StringType> 全部小写
// Capitalize<StringType> 首字母大写
// Uncapitalize<StringType> 非首字母大写

// some-detail.vue script.lang = ts
import { defineComponent, reactive, ref, toRefs, PropType } from 'vue'
import { useStore } from 'vuex'
import { key } from 'path/to/store'

export default defineComponent({
  props: {
    list: Array as PropType<string[]>, // round 0: props 使用 PropType 强制转换类型为具体类型
    default() {
      return []
    }
  },
  // setup 内部
  // round 1: 给props 提供具体的类型 { list: string[] }
  setup: (props: {list: string[]}) =>  {
  // round 2: 
    const leftType = reactive<{
      rightType: number
      list: {label: string;value: number | string; extraProps?: string}[]
    }>({
      rightType: 0,
      list: []
    })
    // round 3: v: {label: '', value: 0, extraProps?: ''}
    const newArray = leftType.list.map(v => {
      return {
        ...v,
        extraProps: v.label
      }
    })
    // round 4: 只要没有明确 return 都是void, 特殊情况为 never
    const textFunc = () => {
      // do something but do not return anything
    }
    // round 5: 简单类型可以自动推导
    const hasTrue = ref(false)
    const isStr = ref('initStr')

    // round 6: props在setup引入的时候就应该定义list类型，此处是 string[]
    const { list } = toRefs(props) // list: string[]
    // round 7: 在createStore 就已经定义完成，不必在左边加 any
    export const key: InjectionKey<Store<LoginState & PermissionState & UserState>> = Symbol('index')
    export const store = createStore<LoginState & UserState & PermissionState>({
      modules
    })
    // store 类型即推导出的类型
    const store = useStore(key)
    // round 8: 参照 api.ts 的修改
    const getData = getDataByAxiosApi().then(res => {
      const ret = res
    })
  })
}

// 以 isMoment 为例
// 在 mjs 内 引入 cjs 模块
import isMoment from "@virtual-file";
// 如果模块很多，一次引入很多模块, 直接引入文件
import "@virtual-file";

// server/index.ts 文件
import axios, { AxiosRequestConfig, Method } from "axios";
import qs from "qs";
// 请求常量配置
const BASE_URL = import.meta.env.VITE_APP_BASE_URL as string;
const SEUCCESS_CODE = ["200"]; // 多个code可兼容历史api的成功返回值
const SPECIAL_CODE_403 = []; // 添加业务要求的 无权限的code码
const LOGOUT_CODE = []; // 添加业务要求登出的code码

export type resType = "json" | "blob";

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: 30000,
  withCredentials: true, // 表示跨域请求时是否需要使用凭证
  validateStatus: function (status) {
    return status >= 200 && status <= 304;
  },
  paramsSerializer: function (params) {
    return qs.stringify(params);
  },
});
// 创建一个基本函数，后续的 post & get方法都基于baseFunc
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 如需自定义config,可在调用api时传入，在此处修改、增加、覆盖
    const options = {
      ...config,
      headers: {
        ...config.headers,
        // 'X-TOKEN': config.headers['X-TOKEN'] || 'default value or test token for testing' // 请求头自定义token, 重置 responseType || Content-Type
      },
    };
    return options;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    const { status, data }: { status: number; data: any } = response;
    // 特殊处理返回类型是 blob 类型的请求
    if (status === 200 && response.config.responseType === "blob") {
      return Promise.resolve(response);
    }
    const { code } = data;
    if (SEUCCESS_CODE.includes(code + "")) {
      // 符合请求成功标准
      return Promise.resolve(data.data || {});
    } else if (SPECIAL_CODE_403.includes(code + "")) {
      // 403需要重新授权
      return Promise.resolve(data);
    } else if (LOGOUT_CODE.includes(code + "")) {
      // 意外登出，重新登录
      // reLogin
      return Promise.reject(data);
      // return Promise.resolve(data)
    } else {
      // 统一弹窗提示错误
      return Promise.reject(data);
    }
  },
  function (error) {
    // 集中处理超时错误
    // 或者 统一向上抛出
    return Promise.reject(error);
  }
);
// 基本配置
// 这里有2种方式可以返回 使用api时配置的返回类型
// 1. 直接在根目录下添加 Axios 的类型声明，改写返回类型
// 2. 引入Axios是点击查看 Axios 定义的类型，在使用 `instance.request` 时改成返回传入泛型即可
// 这里我们使用第二种方式
function request<T>(method: Method, url: string, config: AxiosRequestConfig) {
  return new Promise<T>((resolve, reject) => {
    instance
      .request<T, T>({
        method: method,
        url: url,
        ...config,
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 后续根据具体参数类型返回
export function put<T>(url: string, data?: any) {
  return request<T>("PUT", url, { data });
}
export function post<T>(url: string, data?: any, responseType?: resType) {
  return request<T>("POST", url, { data, responseType });
}
export function del<T>(url: string, data?: any) {
  return request<T>("DELETE", url, { data });
}
export function get<T>(url: string, params?: any, responseType?: resType) {
  return request<T>("GET", url, { params, responseType });
}

export default instance;

// const-api-path.ts
export const POST_SOME_LIST = "/path/to/some/list";
// api.ts
import { post, get } from "./index";
import { POST_SOME_LIST } from "./const-api-path";
import { ListReturnType, ListParamType } from "./api-types";

export const getSomeList = (data: ListParamType) => {
  return post<ListReturnType>(POST_SOME_LIST, data);
};

import HelloWorld from "@/components/hello-world.vue";
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

// 路由懒加载
const About = () => import("../components/about.vue");
const routes: RouteRecordRaw[] = [
  {
    path: "/",
    component: HelloWorld, // 非懒加载
  },
  {
    path: "/about",
    component: About,
    // meta类型需要额外声明，此声明在 src/typings/augmenation.d.ts内
    meta: {
      isAdmin: false,
      title: "关于",
    },
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

// augmenation.d.ts
// Ensure this file is parsed as a module regardless of dependencies.
export {};
declare module "vue-router" {
  // 自定义元字段声明
  interface RouteMeta {
    // is optional
    isAdmin?: boolean;
    // is optional
    requiresAuth?: boolean;
    // must be declared by every route
    title: string;
  }
}

// main.ts
import dayjs from "dayjs";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
import advancedFormat from "dayjs/plugin/advancedFormat";
import customParseFormat from "dayjs/plugin/customParseFormat";
import weekday from "dayjs/plugin/weekday";
import weekOfYear from "dayjs/plugin/weekOfYear";
import isMoment from "dayjs/plugin/isMoment";
import localeData from "dayjs/plugin/localeData";
import localizedFormat from "dayjs/plugin/localizedFormat";
import "dayjs/locale/zh-cn"; // 导入本地化语言

dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);
dayjs.extend(advancedFormat);
dayjs.extend(customParseFormat);
dayjs.extend(weekday);
dayjs.extend(weekOfYear);
dayjs.extend(isMoment);
dayjs.extend(localeData);
dayjs.extend(localizedFormat);
dayjs.locale("zh-cn"); // 使用本地化语言

import { defineComponent, PropType } from "vue";

// 这里是接口，也可以是type
interface Book {
  title: string;
  author: string;
  year: number;
}

const Component = defineComponent({
  props: {
    name: String,
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>,
    },
    book: {
      type: Object as PropType<Book>,
      required: true,
    },
  },
});

import { defineComponent, PropType } from "vue";

interface Book {
  title: string;
  year?: number;
}

const Component = defineComponent({
  props: {
    bookA: {
      type: Object as PropType<Book>,
      // 请务必使用箭头函数
      default: () => ({
        title: "Arrow Function Expression",
      }),
      validator: (book: Book) => !!book.title,
    },
    bookB: {
      type: Object as PropType<Book>,
      // 或者提供一个明确的 this 参数
      default(this: void) {
        return {
          title: "Function Expression",
        };
      },
      validator(this: void, book: Book) {
        return !!book.title;
      },
    },
  },
});

const Component = defineComponent({
  emits: {
    addBook(payload: { bookName: string }) {
      // perform runtime 验证
      return payload.bookName.length > 0;
    },
  },
  methods: {
    onSubmit() {
      this.$emit("addBook", {
        bookName: 123, // 类型错误！
      });
      this.$emit("non-declared-event"); // 类型错误！
    },
  },
});

const year = ref<string | number>("2020"); // year's type: Ref<string | number>
year.value = 2020; // ok!
// 如果泛型的类型未知，建议将 ref 转换为 Ref<T>

import { defineComponent, reactive } from "vue";

interface Book {
  title: string;
  year?: number;
}

export default defineComponent({
  name: "HelloWorld",
  setup() {
    const book = reactive<Book>({ title: "Vue 3 Guide" });
    // or
    const book: Book = reactive({ title: "Vue 3 Guide" });
    // or
    const book = reactive({ title: "Vue 3 Guide" }) as Book;
  },
});