# basic

**Repository Path**: su27sk/basic

## Basic Information

- **Project Name**: basic
- **Description**: TypeScipt的基本使用以及结合Vue3使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-29
- **Last Updated**: 2026-01-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 前端

## README

 

# TypeScript & Vue3



## 1.TypeScript的demo

- 基本类型和引用类型

  ```
  // 1.ts不允许改变变量类型
  let aa = 1;
  // a = "1"

  // 2.基础类型使用
  let a: number = 1; // number
  let b: string = "hello"; // string
  let c: boolean = true; // boolean
  let d: null = null; // null
  let e: undefined = undefined; // undefined
  let f:symbol = Symbol('symbol'); // symbol
  let g:bigint = BigInt(100); // BigInt

  // 3.引用数据类型
  let h:Object = {}; // 对象类型
  let i: Array<number> = [1,2,3]; // 数组类型
  let j:Function = function  () {}; // 函数类型
  let K: Date = new Date(); // 日期类型
  let l: RegExp = /hello/; // 正则表达式
  ```

  ​

- 自定义类型 & 联合类型

  ```
  // 自定义类型
  type OrderId = number;

  // 联合类型 number，string，bigint
  type OrderId2 = number | string | bigint;
  ```



- 交叉类型 

  ```
  // 联合类型和交叉类型（相当于是一个并集）
  type Gender = "man" | "woman"

  type Person = {
      name: string;
      age: number;
      info: {
          gender: Gender
      };
  };

  type Pig = {
      name: string;
      age:number;
      hobby: {
          eat: boolean;
      };
  };

  // 使用& 定义交叉类型
  type Animal = Person & Pig;

  const animal : Animal = {
      name : 'Tom',
      age: 12,
      info: {
          gender: "man"
      },
      hobby: {
          eat: true
      }
  }
  ```

  ​

- 泛型

  ```
  // 泛型的使用

  // 1. 默认
  type Person <T> = {
      name: string;
      age: number;
      info: T
  }

  // 2. extends是“你必须长这样”；
  type Person2 <T extends {hobby : string[]}> = {
      name: string;
      age: number;
      info: T;
  }

  // 3. = 是“你不说话我就当你长这样”。
  type Person3 <T = {hobby : string[]}> = {
     name: string;
      age: number;
      info: T;
  }

  const person : Person3<{hobby: string[]; b:string}> = {
      name: "大圣",
      age: 1,
      info: {
          hobby :["eat","sleep"],
          b:"1" 
      },
     
  }
  ```

  ​

- 继承 & 约束泛型 & 条件类型

  ```
  // 1.继承
  class Person {}

  class Student extends Person {}

  // 2.约束泛型
  function say<T extends {id : string}>( a : T) : T {
      return a;
  }

  say({id : "1"})

  // 3.条件类型 类似于js的typeof
  type IsString<T> = T extends string ? true : false

  const isString : IsString<string> = true
  ```

  ​

- 类型复用

  ```
  // 类型复用
  type Person = {name: string; age: number}

  // 假如我的参数只需要关注name，而不需要age

  // 1.粗糙写法
  type Person2 = {name: string}

  // 2.要的拿出来
  type Person3 = Pick<Person, "name">

  // 3.不要的排除
  type Person4 = Omit<Person, "age">
  ```

- 类型保护

  ```
  // 类型保护，就是推导类型，通过推导类型来确定类型
  type Value = string | number;
  let value : Value = "123";

  // value.toFixed()  这里会报错，因为toFixed方法只针对于number，value又可能为string类型

  // 在使用之前就判断出类型就是类型保护
  function isString(value : Value) : value is string {
      return typeof value === "string"
  }

  function isNumber(value : Value) : value is number {
      return typeof value === "number"
  }

  const res1 = isString(value)
  console.log("res :", res1);

  const res2 = isNumber(value)
  console.log("res :", res2);
  ```




## 2.Vue3

1. ref & computed & watch

   ```
   <template>
       <div>商品价格：<input v-model="price"></div>
       <div>商品数量：<input v-model="count"></div>
       <div>商品总价：{{ total }}</div>
   </template>

   <script setup lang="ts">

   import { computed, ref, watch, watchEffect, watchPostEffect, watchSyncEffect } from 'vue';

   // 使用ref定义变量
   const price = ref(1);
   const count = ref(1);

   // 计算属性，通过已有的状态去派生出一个新的状态
   const total = computed(() => {
       return price.value * count.value
   })

   // 使用watch监听数据的变化
   watch([price, count], ([newP,newC],[oldP,oldC]) => {
       console.log(newP,newC,oldP,oldC)
        console.log('新值:', newP, newC, '旧值:', oldP, oldC)

       console.log("数据变化了")
       if (price.value > 10) {
           alert("价格不能大于10")
       }
   })

   watchEffect(() => {
        console.log("watchEffect")
        console.log(price.value, count.value)
   })

   watchSyncEffect(() => {
       console.log("watchSyncEffect")
       console.log(price.value, count.value)
   })

   watchPostEffect(()=>{
       console.log("watchPostEffect")
       console.log(price.value, count.value)
   })
   </script>

   <style></style>
   ```

2. 生命周期（这里只介绍最常用的三个）

   ```
   <template>
       <div>商品价格：<input v-model="price"></div>
       <div>商品数量：<input v-model="count"></div>
       <div>商品总价：{{ total }}</div>
   </template>

   <script setup lang="ts">

   import { computed, onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';

   // 使用ref定义变量
   const price = ref(1);
   const count = ref(1);

   // 计算属性，通过已有的状态去派生出一个新的状态
   const total = computed(() => {
       return price.value * count.value
   })

   // 使用watch监听数据的变化
   watch([price, count], ([newP,newC],[oldP,oldC]) => {
       console.log(newP,newC,oldP,oldC)
        console.log('新值:', newP, newC, '旧值:', oldP, oldC)

       console.log("数据变化了")
       if (price.value > 10) {
           alert("价格不能大于10")
       }
   })

   // 生命周期

   // 组件挂载
   onMounted(() => {
       console.log("组件挂载")
   })

   // 组件更新
   onUpdated(() => {
       console.log("组件更新")
   })

   // 组件卸载
   onUnmounted(() => {
       console.log("组件卸载")
   })

   </script>

   <style></style>
   ```

   ```
   <script setup lang="ts">
   import {ref} from 'vue'  
   import Lifecycle from './components/4.lifecycle.vue';
   const isOpen = ref(true);

   </script>

   <template>
     <Lifecycle v-if="isOpen"></Lifecycle>
     <button @click="isOpen = !isOpen">{{ isOpen ? "关闭" : "打开" }}</button>
   </template>
   ```

3. 组件通信

   组件通信要靠props和emit，父级给子级传的数据 props-defineProps，父级给子级传的事件 emit-defineEmits

   ```
   <template>
       <div>
           <div>{{  price }}</div>
           <div>{{  count }}</div>
           暴露给父组件update方法，参数value是100
           <div @click="emit('update', 100)">更新数据</div>
       </div>
       
   </template>

   <script setup lang="ts">

   // 父级给子级传的数据 props-defineProps
   // 父级给子级传的事件 emit-defineEmits    

   //defineEmits(["change"])

   // 表示有两个事件可以暴露，是change和update，update的参数是value
   const emit = defineEmits<{
       change:[];
       update:[value: number];
   }>();

   // 表示有两个数据可以暴露，是price和count
   defineProps<{price: number; count: number}>();

   </script>

   <style>

   </style>
   ```

   ```
   <script setup lang="ts">
   const price = ref(1);
   const count = ref(1);
   <script>

   <template>
    
     <Component :price="price" :count="count" v-on:update="(v) => (price += v)"></Component>
     <button @click="price++">price++</button>
     <Component :price="price" :count="count" v-on:update="(v) => (price += v)"></Component> 
   </template>  
   ```


​       在刚刚的父组件将自己的price和count传递给了子组件，然后绑定了update方法，内容操作是刚刚的100加给price

4. 插槽

   准备一个slotWrapper作为容器，slot作为插槽。需要关注具名插槽和默认插槽，以及插槽向容器传递数据

   ​

   ```
   // slotWrapper
   <template>

       <Slot>

           <!-- 具名插槽 -->

            <!-- <template #header="slotProps">

               <div>header{{ slotProps.header }}</div>

            </template> -->

            <template #header="{ data }">

               <div>header{{ data }}</div>

            </template>

           <!-- 默认插槽 -->

           <div @click="console.log($slots)">青蛙</div>

           <template #footer>

               <div>footer</div>

           </template>

       </Slot>

   </template>

   <script setup lang="ts">

   import Slot from './6.slot.vue'

   </script>


   // slot
   <template>
       <div>
           123
           <div>
               <!-- 这部分我不确定是什么，就需要外部传入 -->
                <div class="header">
                   <slot name="header" data="123"></slot>
                </div>
                -------------
                <div class="content">
                   <slot></slot>
               </div>
               --------------
               <div class="footer">
                   <slot name="footer"></slot>
               </div>
           </div>
       </div>
   </template>

   <style scoped>
   .header {
       background-color: red;
   }

   .content {
       background-color: yellow;
   }

   .footer {
       background-color: green;
   }
   </style>

   ```
​       

## 3.Router

构建路由

```
import { h } from 'vue'

import { createRouter, createWebHistory} from 'vue-router'

const routes = [

    {path:"/", name:"home",component: h("div","Home")},

    {

        path:"/about",

        name:"about",

        component:h("div","About")

    }

]

const router = createRouter({

    history:createWebHistory(),

    routes,

})

export default router;



```



程序入口加载router

```
import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import "./typescript/7.guard"

import router from './router';

const app = createApp(App);

// 加载路由配置

app.use(router)

app.mount('#app')

```



主页面显示

```
<template>

  <router-view></router-view>

</template>

```



路由守卫

```
// 全局守卫
router.beforeEach((to,from,next) => {
    console.log("beforeEach",to,from)
    // 跳转权限控制
    if (Math.random() > 0.5) {
        next()
    }else {
        next({name:"home"})
    }
})
```



页面跳转

```
<template>
   <div> 
        Home 
        <!-- <router-link to="/about">通过router-link的方式跳转 Detail</router-link> -->
        <!-- <button @click="router.push('/about')">通过router.push的方式跳转</button> -->
        <!-- 要是使用的时候有params只能用name,不能用path -->
        <button @click="router.push({ name: 'about', query: { a: 1}, params: { b: 1} })">携带params和query跳转</button>
    </div>
   
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import {useCounterStore} from '../stores/counter'

const router = useRouter()
const counterStore = useCounterStore()

</script>
```

```
<template>
    <div>
      Detail {{$route.query.a}} {{ $route.params.b}}  
    </div>
</template>

<script setup lang="ts">
import {useRoute} from 'vue-router'
import {useCounterStore} from '../stores/counter'

const counterStore = useCounterStore()

const route = useRoute()
console.log('query.a = ', route.query.a);
console.log('params.b =', route.params.b)


</script>
```





## 4.Pinia

```
import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import { useCount } from '../composable/useCount';

// 定义状态:老写法
// export const useCounterStore = defineStore ("counter", {
//     state:() => ({
//         count:0
//     }),
//     getters:{
//         doubleCount(state) {
//             return state.count * 2;
//         }
//     },
//     actions: {
//         increment() {
//             this.count++;
//         }
//     }
// })

export const useCounterStore = defineStore("counter", () => {
    // const count = ref(0);
    const count = useCount()
    const doubleCount = computed(() => count.value * 2);
    const increment = () => { count.value++};
    const decrement = () => {count.value--}
    return {
        count,
        doubleCount,
        increment,
        decrement,
    }
})
```



主页面加载

```
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "./typescript/7.guard"
import router from './router/index';
import {createPinia} from 'pinia'

const app = createApp(App);
// 加载路由配置
app.use(router)
// 加载pinia
const pinia = createPinia();
app.use(pinia)
app.mount('#app')

```