uni-app 增加对typescript的支持

在uni-app项目中增加对TypeScript的支持，可以通过以下步骤实现。这些步骤涵盖了项目的初始化、配置文件的修改以及示例代码编写。

1. 初始化uni-app项目

如果你还没有uni-app项目，可以通过以下命令创建一个新项目：

vue create -p dcloudio/uni-preset-vue my-uni-app

选择默认模板或者自定义模板，然后进入项目目录：

cd my-uni-app

2. 安装TypeScript相关依赖

在uni-app项目中，你需要安装TypeScript及其相关依赖：

npm install typescript ts-loader @types/node --save-dev

3. 修改项目配置

在项目的根目录下，创建或修改tsconfig.json文件，添加以下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "jest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["es2018", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

4. 修改webpack配置（可选）

如果你需要自定义webpack配置，可以在vue.config.js中添加对TypeScript的支持。不过，对于uni-app，通常不需要手动修改webpack配置，因为uni-app已经内置了对TypeScript的支持。

5. 编写TypeScript示例代码

在src目录下创建一个新的.ts文件，例如src/utils/index.ts，并编写一些TypeScript代码：

// src/utils/index.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

在Vue组件中使用这个TypeScript函数：

<template>
  <view>{{ message }}</view>
</template>

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

export default defineComponent({
  setup() {
    const message = ref(greet('uni-app with TypeScript'));
    return { message };
  }
});
</script>

通过以上步骤，你已经成功地在uni-app项目中增加了对TypeScript的支持。现在，你可以在项目中使用TypeScript进行开发，享受静态类型检查和智能提示带来的便利。