请将上面的代码用vue3的组合式语句写出其ts语言

在 Vue3 中，如果你想要使用 TypeScript 语法并且采用组合式API，可以将上述组件结构转换为单文件组件(SFC)的形式。这里是一个组合式的 Vue3 TypeScript 示例：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="输入搜索关键字">
    <button @click="search">检索</button>
    <ul>
      <li v-for="(result, index) in searchResults" :key="index">{{ result }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface SearchResult {
  text: string;
}

export default defineComponent({
  name: 'ContentSearch',
  setup() {
    const searchKeyword = ref<string>(''); // 搜索关键词
    const searchResults = ref<SearchResult[]>([]); // 检索结果

    const search = async () => {
      // 模拟异步搜索，实际项目替换为你的检索逻辑
      const results = await fetchSearchData(searchKeyword.value);
      
      // 更新搜索结果
      searchResults.value = results;
    };

    return {
      searchKeyword,
      searchResults,
      search,
    };
  },
  methods: {
    // 需要引入fetch或其他库来实现异步请求
    async fetchSearchData(keyword: string): Promise<SearchResult[]> {
      // 返回模拟数据
      return [
        { text: '搜索结果1' },
        { text: '搜索结果2' },
      ];
    },
  },
});
</script>
<style scoped></style>

这个示例中，我们使用了 `ref` 来声明可变的数据，`defineComponent` 来定义组件，并使用 TypeScript 的接口类型来增强代码的可读性和类型检查。