不使用Vue CLI在Vue 3中结合TypeScript开发的问题咨询

1. 给data返回值添加类型约束 #

最直接的方式是先定义data对象的接口，再给data方法显式指定返回类型，让TypeScript自动识别属性类型：

// 定义data的类型接口
interface AppState {
  username: string;
  userAge: number;
  isLoggedIn: boolean;
}

new Vue({
  el: '#app',
  // 显式指定data方法的返回类型为AppState
  data(): AppState {
    return {
      username: '',
      userAge: 0,
      isLoggedIn: false
    };
  },
  methods: {
    toggleLogin(): void {
      // TS会自动校验this.isLoggedIn的boolean类型，避免类型错误
      this.isLoggedIn = !this.isLoggedIn;
    },
    updateAge(newAge: number): void {
      if (newAge >= 0) {
        this.userAge = newAge; // 类型不匹配时TS会直接报错
      }
    }
  }
});

2. 为计算属性、方法添加类型 #

• 计算属性：直接指定返回值类型，TS会自动推导依赖属性的类型：

computed: {
  userStatus(): string {
    return this.isLoggedIn ? '已登录' : '未登录';
  }
}

• 方法：给参数和返回值显式添加类型，避免隐式any类型：

methods: {
  greetUser(prefix: string): string {
    return `${prefix}，${this.username}`;
  }
}

3. 基础配置注意事项 #

不需要Vue CLI的情况下，只要确保：

• 安装Vue的类型定义包（Vue 2安装@types/vue，Vue 3的vue包自带类型）
• tsconfig.json中配置合适的编译选项，比如：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true, // 开启严格类型校验，建议开启
    "esModuleInterop": true
  }
}

4. 扩展：处理props（如果需要） #

如果你的Vue实例需要接收props，同样可以用接口约束：

interface AppProps {
  initialUsername: string;
}

new Vue({
  el: '#app',
  props: {
    initialUsername: {
      type: String,
      required: true
    }
  } as VuePropsDefinition<AppProps>, // 断言props类型
  data(): AppState {
    return {
      username: this.initialUsername,
      userAge: 0,
      isLoggedIn: false
    };
  }
});

内容的提问来源于stack exchange，提问作者Luis Abreu