在TypeScript中，我们可以使用联合类型来定义多种类型中的一种。当你需要一个变量能够保存多种类型的值时，你可以使用联合类型。

下面是一个简单的例子，演示了如何在TypeScript中使用联合类型：

// 定义一个联合类型
type NumberOrString = number | string;
 
// 使用联合类型定义一个函数，该函数可以接收number或string类型的参数
function getLength(value: NumberOrString): number {
  if (typeof value === 'string') {
    return value.length;
  } else {
    // 在这里TypeScript知道value是number类型
    return value.toString().length;
  }
}
 
// 测试函数
console.log(getLength(123)); // 输出: 3
console.log(getLength('hello')); // 输出: 5

在这个例子中，NumberOrString 是一个联合类型，表示一个值可以是 number 或者 string 类型。getLength 函数接受一个 NumberOrString 类型的参数，并返回该参数的长度。当我们调用 getLength 函数时，我们可以传入 number 或者 string 类型的参数，TypeScript 会根据定义的联合类型进行类型检查。

# 安装Vue CLI，如果已安装请跳过此步
npm install -g @vue/cli
 
# 创建一个新的Vue3项目，使用Vite作为构建工具，并且支持TypeScript
vue create my-vue3-project
 
# 在提示选择预设时，选择“Manually select features”
# 然后选择“TypeScript”和“Vite”
 
# 进入项目目录
cd my-vue3-project
 
# 启动开发服务器
npm run dev

以上命令首先确保Vue CLI已安装，然后创建一个新的Vue 3项目，使用Vite作为构建工具，并且启用TypeScript支持。在创建项目时，用户需要手动选择需要的特性。完成项目创建后，可以通过npm run dev启动开发服务器进行开发工作。

# 安装Vue CLI，如果已安装请跳过此步
npm install -g @vue/cli
 
# 创建一个新的Vue项目
vue create my-project
 
# 进入项目目录
cd my-project
 
# 启动Vue项目
npm run serve

在Vue文件中使用常见的Vue指令：

<template>
  <div>
    <!-- 文本插值 -->
    <p>{{ message }}</p>
 
    <!-- 条件渲染 -->
    <div v-if="isCondition">条件为真时渲染</div>
 
    <!-- 事件绑定 -->
    <button @click="onClick">点击我</button>
 
    <!-- 属性绑定 -->
    <img v-bind:src="imageSrc" alt="图片">
 
    <!-- 双向绑定 -->
    <input v-model="inputValue">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      isCondition: true,
      imageSrc: 'path/to/image.jpg',
      inputValue: ''
    };
  },
  methods: {
    onClick() {
      alert('按钮被点击');
    }
  }
};
</script>

Vue的生命周期钩子：

export default {
  created() {
    // 实例被创建后调用
  },
  mounted() {
    // el被新创建的vm.$el替换，并挂载到实例上去之后调用
  },
  beforeDestroy() {
    // 实例销毁之前调用
  }
};

在MicroPython中，要通过BLE连接到小米温湿度计2并获取数据，你需要使用micropython的ble库。以下是一个简单的示例代码，它会扫描BLE设备，连接到小米温湿度计2，并获取温度和湿度数据。

from machine import Pin
from micropython import const
from ble_advertising import Advertising
 
# 定义小米温湿度计2的服务UUID
TEMPERATURE_SERVICE_UUID = const(0x181A)
HUMIDITY_SERVICE_UUID = const(0x181A)
 
# 定义温度和湿度的特征UUID
TEMPERATURE_CHARACTERISTIC_UUID = const(0x2A6E)
HUMIDITY_CHARACTERISTIC_UUID = const(0x2A6F)
 
# 初始化BLE适配器
ble = Advertising()
 
# 连接小米温湿度计2
def connect_to_xiaomi_hygrothermograph_2():
    # 扫描可用的BLE设备
    for adv in ble.scan():
        if 'xiaomi' in adv.name and 'Hygrothermograph 2' in adv.name:
            # 连接到小米温湿度计2
            central = ble.connect(adv)
            # 获取服务
            temp_service = central.service(TEMPERATURE_SERVICE_UUID)
            humidity_service = central.service(HUMIDITY_SERVICE_UUID)
            # 获取特征
            temperature_characteristic = temp_service.characteristic(TEMPERATURE_CHARACTERISTIC_UUID)
            humidity_characteristic = humidity_service.characteristic(HUMIDITY_CHARACTERISTIC_UUID)
            # 读取温度和湿度数据
            temperature = temperature_characteristic.read()
            humidity = humidity_characteristic.read()
            # 断开连接
            central.disconnect()
            # 返回温度和湿度数据
            return temperature, humidity
 
# 调用连接函数
temperature, humidity = connect_to_xiaomi_hygrothermograph_2()
# 显示温度和湿度数据
print(f"Temperature: {temperature[0]}°C, Humidity: {humidity[0]}%")

确保你的设备支持BLE，并且你的MicroPython固件已经包含了ble_advertising库。这个示例假设你的设备上有一个BLE适配器，并且它的名字包含"xiaomi"和"Hygrothermograph 2"。根据你的设备和固件版本，可能需要对代码进行适当的调整。

在Vite + Vue 3 + TypeScript 项目中安装 Ant Design of Vue 的方法如下：

1. 确保你的项目已经初始化并且可以运行。
2. 在终端中，进入你的项目目录。
3. 运行以下命令来安装 Ant Design Vue：

npm install ant-design-vue@next --save

或者使用 yarn：

yarn add ant-design-vue@next

4. 由于Ant Design Vue 依赖于Vue 3，你不需要进行额外的配置。
5. 在你的Vue组件中使用Ant Design Vue组件。例如，使用Button组件：

<template>
  <a-button type="primary">按钮</a-button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { Button } from 'ant-design-vue';
 
export default defineComponent({
  components: {
    'a-button': Button
  }
});
</script>

确保你的Vite配置文件（如果有自定义）能够正确处理.vue、.ts和相关的Ant Design Vue组件。如果你遇到了样式或者其他问题，请确保按照Ant Design Vue的官方文档操作，可能需要额外的配置来处理样式和主题。

在Vue 3中，可以使用组合式API（Composition API）来创建响应式的数据，并且使用onMounted和onUnmounted生命周期钩子来处理组件的挂载和卸载。对于监听窗口的resize事件，可以使用Vue 3的window对象的addEventListener方法来添加事件监听，并在onUnmounted钩子中移除该事件监听。

以下是一个简单的例子：

<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>
 
<script>
import { onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    // 定义resize事件的处理函数
    const handleResize = () => {
      // 处理窗口大小变化的逻辑
      console.log('窗口大小已变化');
    };
 
    // 在组件挂载时添加事件监听
    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });
 
    // 在组件卸载时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });
  }
}
</script>

在这个例子中，当组件被挂载时，它将添加一个事件监听器来监听resize事件。当组件被卸载时，它将移除该事件监听器，以防止潜在的内存泄漏。这是一个很好的实践，尤其是在处理全局事件时，确保你的应用程序中不会有任何未完成的引用或者事件监听器。

在ES6中，可以使用export关键字来暴露模块化的代码。以下是一些常见的模块化代码暴露方式：

1. 默认导出（一个模块只能有一个默认导出）：

// mathUtils.js
export default function add(a, b) {
  return a + b;
}

2. 命名导出（可以有多个命名导出）：

// mathUtils.js
export function add(a, b) {
  return a + b;
}
 
export function subtract(a, b) {
  return a - b;
}

3. 重命名导出：

// mathUtils.js
function add(a, b) {
  return a + b;
}
 
export { add as sum };

4. 导出整个对象或类：

// myClass.js
class MyClass {
  constructor() {}
  method() {}
}
 
export default MyClass;

导入模块时，使用import关键字，例如：

// main.js
import add from './mathUtils.js';
// 或者
import { add, subtract } from './mathUtils.js';
// 或者导入默认导出
import MyDefaultExport from './myClass.js';

以上代码展示了如何在ES6模块中进行代码的导出和导入，是模块化编程的基本用法。

<template>
  <div>
    <!-- 导入按钮 -->
    <el-button @click="importData">导入</el-button>
    <!-- 导出按钮 -->
    <el-button @click="exportData">导出</el-button>
    <!-- 上传文件的input元素，隐藏 -->
    <input type="file" @change="handleFileChange" style="display: none" ref="inputFile" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { read, write, utils } from 'xlsx';
 
const inputFile = ref(null);
 
// 导入数据
function importData() {
  inputFile.value.click(); // 触发文件上传
}
 
// 处理文件变化
function handleFileChange(e) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = read(data, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    const jsonData = utils.sheet_to_json(worksheet);
    console.log(jsonData); // 这里可以处理导入的数据
  };
  reader.readAsArrayBuffer(e.target.files[0]);
}
 
// 导出数据
function exportData() {
  const jsonData = [
    // 这里是要导出的数据
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' }
  ];
  const ws = utils.json_to_sheet(jsonData);
  const wb = write(ws, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([wb], { type: 'application/octet-stream' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.xlsx';
  a.click();
  URL.revokeObjectURL(url);
}
</script>

这个代码实例提供了一个简单的Vue 3组件，用于导入和导出数据。导入功能使用了一个隐藏的input元素来上传文件，然后使用FileReader和xlsx库解析Excel文件并转换为JSON。导出功能则是创建了一个新的Excel文件，并使用xlsx库将JSON数据转换为Excel表格，最后通过创建一个临时的URL和下载链接来实现导出。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const count = ref(0);
    const message = 'Hello Vue 3 + TypeScript!';
 
    function increment() {
      count.value++;
    }
 
    return { count, message, increment };
  }
});
</script>

这个例子展示了如何在Vue 3和TypeScript中创建一个简单的组件。它使用了Vue 3的Composition API，通过<script lang="ts">指定TypeScript作为脚本语言。组件包括一个响应式的计数器和一个显示消息的标题，并演示了如何在Vue 3中定义响应式数据和方法。

报错信息 "js emit is not support" 通常表明你正在尝试在 TypeScript 编译器中使用某些特定的编译选项，但是这些选项在你当前使用的编译器版本中不受支持。

在这种情况下，报错可能与 skipLibCheck 或 noEmit 选项有关。skipLibCheck 用于跳过对库文件（例如.d.ts 文件）的类型检查，而 noEmit 用于在编译过程中不生成输出文件。

解决方法:

1. 确认你的 TypeScript 版本是否支持这些选项。如果你使用的是一个较旧的 TypeScript 版本，那么可能不存在这些选项。你可以通过运行 npm update typescript 或者 yarn upgrade typescript 来更新 TypeScript 到最新版本。
2. 如果你已经是最新版本的 TypeScript，但仍然遇到问题，检查你的 tsconfig.json 文件中的编译选项是否正确配置。确保你没有拼写错误，并且正确使用了这些选项。

例如，如果你想要跳过库文件的类型检查，确保 tsconfig.json 中的 "skipLibCheck" 设置为 true。如果你想禁止任何输出文件的生成，确保 "noEmit" 设置为 true。

{
  "compilerOptions": {
    "skipLibCheck": true,
    "noEmit": true
    // 其他编译选项...
  }
  // 其他配置...
}

3. 如果更新 TypeScript 或修正 tsconfig.json 后问题依旧，请查看官方文档或者相关社区的支持，以获取更具体的解决方案。