// 声明函数类型
interface Foo {
  (x: number, y: number): number;
}

// 可索引类型
interface RandomMap {
  [propName: string]: string;
}

// 类数组 , 可以通过数组取值 , 但是不能调用方法
interface LikeArray {
  [index: number]: string;
}

// 函数添加属性
interface FunctionWithProps {
  (x: number): number;
  name: string;
}

// 定义接口类型
interface Animal {
  name: string;
  run(): void;
}

// 实现接口
class cat implements Animal {
  name: string = "cat";
  run() {
    this.name + "run";
  }
}

// 定义接口类型
interface Live {
  breathe(): void;
}

// 实现多个类型的接口
class liveCat implements Animal, Live {
  name: string = "cat";
  run() {
    this.name + "run";
  }
  breathe() {
    this.name + "breathing";
  }
}

// 定义类的静态类型
interface CatStatic {
  // 可以被 new 调用的构造函数
  new (eyes: number, hands: number): void;
}

// 类的阴阳两面, 包含静态类型和实例类型
const FooCat: CatStatic = class FooCat implements Cat {
  constructor(eyes: number, hands: number) {}
  name: string = "cat";
  run() {
    this.name + "run";
  }
};

// 泛型基础
function foo<T>(arg: T): T {
  return arg;
}

// 交换 tuple 的位置
function swap<T, K>(tuple: [T, K]): [K, T] {
  return [tuple[1], tuple[0]];
}

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

interface Car {
  color: string;
  wheels: number;
}

// 约定请求返回值结果
function getInfo<T>(url: string): Promise<T> {
  return fetch(url).then((resp) => resp.json());
}

// resp 是 Person 类型
getInfo<Person>('/getperson').then((resp) => {});
// resp 是 Car 类型
getInfo<Car>('/getcar').then((resp) => {});

// 传入一个泛型, 把泛型中的属性全部变为可选
type PersonPartial = Partial<Person>;

// 遍历某个类型的键,返回由这些键组成的新的类型
type PersonKeys = keyof Person;

// lookup types 返回某个属性的类型
type NameType = Person['name'];

// mapped types 遍历
type Test = {
  [key in PersonKeys]: any;
};

// 相当于复制了一份 Person 类型
type PersonCopy = {
  [p in PersonKeys]: Person[p];
};

// 实现了 Partial 
type PersonCopy = {
  [p in PersonKeys]?: Person[p];
};

// 泛型约束
interface IWithLength {
  length: number;
}
// 传入的类型必须包含 length 属性
function echoWithArr<T extends IWithLength>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// 条件类型关键字
// 判断一个类型是否满足另一个类型的约束
type NonType<T> = T extends null | undefined ? never : T;

// 输入 2 ，永远输出 4
function foo（a）{
 return a * 2
}
// 输入 2， 输出不确定
function bar（a）{
 return a * Math.random（）
}

const count = ref(0);
const stop = watchEffect(()=>{
    console.log(count.value)
});
stop();
watchEffect(
    ()=>{
        console.log(count.value)
    },
    {
        flush:"post" // 更新 dom 之后
    }
);

- `imooc-cli`
- `vue-cli`
- `vite`编码规范

- `ESLint`
- `Prettier` 
- 产出文档项目结构规范

- 产出文档

- 产出文档

npm install -g @imooc-cli/core
npm install -g cnpm
imooc-cli --version
imooc-cli init

npm install ant-design-vue --save

// src\main.ts

import { createApp } from 'vue';
import App from './App.vue';

// 引入 Antd 组件库
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd).mount('#app');

// App.vue
<template>
  <a-button type="primary">Primary Button</a-button>
</template>

npm install vue-router@next --save

// src\routes\index.ts

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Editor from '../views/Editor.vue';
import TemplateDetail from '../views/TemplateDetail.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/editor',
      name: 'editor',
      component: Editor,
    },
    {
      path: '/template/:id',
      name: 'template',
      component: TemplateDetail,
    },
  ],
});
export default router;

// src\main.ts

import router from './routes/index';
app.use(router);

npm install vuex@next --save

// src\store\index.ts

import { createStore } from 'vuex';

const store = createStore({
  state: { count: 0 },
});

export default store;

// src\main.ts

import vuex from './routes/index';
app.use(vuex);

// src\store\index.ts

import { createStore } from 'vuex';

export interface GlobalStore {
  count: number;
}

const store = createStore<GlobalStore>({
  state: { count: 0 },
});

export default store;

// src\App.vue

import { useStore } from 'vuex'
import { GlobalStore} from './store/index'
import { computed } from 'vue';

const store = useStore<GlobalStore>()
const count = computed(() => store.state.count)

// src\store\index.ts

import { createStore } from 'vuex';
import user from './user';
import template from './template';
import type { UserStore } from './user';
import type { TemplateStore } from './template';

export interface GlobalStore {
  user: UserStore;
  template: TemplateStore;
}

const store = createStore<GlobalStore>({
  modules: {
    user,
    template,
  },
});

export default store;

//  src\store\user.ts

import type { Module } from 'vuex';
import type { GlobalStore } from './index';
export interface UserProps {
  username: string;
  age: number;
}

export type UserList = UserProps[];

export interface UserStore {
  userList: UserList;
}

const userList: UserList = [
  {
    username: 'foo',
    age: 18,
  },
  {
    username: 'boo',
    age: 20,
  },
];

const userStore: Module<UserStore, GlobalStore> = {
  state: {
    userList: userList,
  },
  getters: {
    getUserByName: (state) => (name: string) => {
      return state.userList.find((u) => u.username === name);
    },
  },
};

export default userStore;

//  src\store\template.ts

import type { Module } from 'vuex';
import type { GlobalStore } from './index';
export interface TemplateProps {
  templateName: string;
  age: number;
}

export type TemplateList = TemplateProps[];

export interface TemplateStore {
  templateList: TemplateList;
}

const templateList: TemplateList = [
  {
    templateName: 'foo',
    age: 18,
  },
  {
    templateName: 'boo',
    age: 20,
  },
];

const templateStore: Module<TemplateStore, GlobalStore> = {
  state: {
    templateList: templateList,
  },
  getters: {
    getTemplateByName: (state) => (name: string) => {
      return state.templateList.find((t) => t.templateName === name);
    },
  },
};

export default templateStore;