TS+JS混合编程

利用一些框架开发时，前端主要采用了Vue3和TypeScript，但仍然可以使用JavaScript（JS）进行开发。以下是一些实现前端编程的方法：

1. 在单文件组件中使用JavaScript

在Vue的单文件组件（.vue文件）中，你可以选择在<script>标签中使用JavaScript而不是TypeScript。只需省略lang="ts"属性，或者将其改为lang="js"，即可使用JavaScript编写组件逻辑。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from JavaScript!'
    };
  }
};
</script>

2. 混合使用TypeScript和JavaScript文件

原框架可能已经配置了TypeScript，但仍然可以在项目中添加JavaScript文件，并在需要的地方导入和使用它们。确保在tsconfig.json中启用了allowJs选项，这样TypeScript编译器会识别并编译JavaScript文件。

{
  "compilerOptions": {
    "allowJs": true
  }
}

3. 理解并适应TypeScript代码

虽然你主要使用JavaScript，但了解一些TypeScript的基本概念（如接口、类型注解等）将有助于你更好地理解项目中的代码。例如，当你看到类似以下的TypeScript代码时：

interface Props {
  id: number;
  title: string;
}

const props = defineProps<Props>();

你可以将其视为对组件属性的类型定义，这有助于确保数据的正确性和代码的健壮性。在JavaScript中，你可以忽略类型定义，直接使用属性：

export default {
  props: ['id', 'title']
};

4. 使用JavaScript与Pinia等状态管理库

如果项目中使用了Pinia，可以在JavaScript文件中定义store。例如：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 };
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

然后在组件中使用：

<script>
import { useCounterStore } from './stores/counter';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};
</script>

5. 处理TypeScript类型定义（可选）

如果需要与TypeScript代码交互，可以为JavaScript代码添加类型定义文件（.d.ts），以提供类型检查和自动补全功能。例如，创建一个types.d.ts文件：

declare interface Props {
  id: number;
  title: string;
}

这样，在JavaScript代码中使用这些接口时，编辑器可以提供更好的支持。

通过以上方法，可以在带有TS代码的框架中使用JavaScript进行前端开发，同时充分利用框架的功能和优势。