Vue3使用TypeScript编写时注意事项

## 一、interface与type区别

#### 1、声明区别

`interface`可以多次声明且自动合并

```typescript
interface User {
  name: string;
}
interface User {
  age: number;
}
// 最终 User 类型为 { name: string; age: number }
```

`type`不能重复声明

```typescript
type User = { name: string };
type User = { age: number }; // ❌ 错误：重复标识符
```

#### 2、扩展方式区别

`interface`扩展使用`extends`关键词

```typescript
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}
```

`type`扩展使用`&`运算符

```typescript
type Animal = { name: string };
type Dog = Animal & { breed: string };
```

#### 3、定义类型区别

`interface`只能定义对象类型

```typescript
interface Point {
  x: number;
  y: number;
}
```

`type`可以定义任意类型

```typescript
// 原始类型别名
type ID = string | number;

// 元组
type Point = [number, number];

// 联合类型
type Status = 'success' | 'error' | 'pending';

// 映射类型
type Readonly<T> = { readonly [P in keyof T]: T[P] };

// 条件类型
type IsString<T> = T extends string ? true : false;
```

## 二、Record类型作用

`Record<K, T>` 是 TypeScript 内置的**工具类型**，用于创建一个对象类型，其所有属性的键都是 `K` 类型，值都是 `T` 类型。

```typescript
const params: Record<string, any> = {};

params.id = "1234-5678-90123";
params.type = 1;

// params: {"id": "1234-5678-90123", "type": 1}
```

#### 1、限制键的特定值

```typescript
// 键只能是 'name' | 'age' | 'email'
type UserInfo = Record<'name' | 'age' | 'email', string>;

const user: UserInfo = {
  name: 'Alice',
  age: '25', // 注意：age 也是 string 类型
  email: 'alice@example.com'
};
```

#### 2、创建枚举映射

```typescript
type Status = 'pending' | 'success' | 'error';

// 为每个状态创建配置
const statusConfig: Record<Status, { color: string; icon: string }> = {
  pending: { color: 'yellow', icon: '⏳' },
  success: { color: 'green', icon: '✅' },
  error: { color: 'red', icon: '❌' }
};
```

#### 3、与 as const 配合使用

```typescript
const STATUS = {
  PENDING: 'pending',
  SUCCESS: 'success',
  ERROR: 'error'
} as const;

type Status = typeof STATUS[keyof typeof STATUS];
type StatusConfig = Record<Status, { color: string }>;
```

## 三、`as const`作用

`as const` 是 TypeScript 的**常量断言**，它告诉 TypeScript 将表达式视为**不可变的字面量类型**，而不是更宽泛的类型。

```typescript
// 不使用 as const
const colors = ['red', 'green', 'blue'];
// 类型: string[]
// colors[0] 类型: string

// 使用 as const
const colors = ['red', 'green', 'blue'] as const;
// 类型: readonly ["red", "green", "blue"]
// colors[0] 类型: "red"
```

#### 1、对象属性只读化

```typescript
// 不使用 as const
const config = {
  api: 'https://api.example.com',
  timeout: 5000,
  retry: 3
};
// 类型: { api: string; timeout: number; retry: number }
// 可以修改: config.timeout = 1000; ✅

// 使用 as const
const config = {
  api: 'https://api.example.com',
  timeout: 5000,
  retry: 3
} as const;
// 类型: { readonly api: "https://api.example.com"; readonly timeout: 5000; readonly retry: 3 }
// 不能修改: config.timeout = 1000; ❌ 错误
```

## 四、vue组件方法暴露

vue setup 中使用`defineExpose({})`才能将方法暴露出去

```typescript
// TestDialog.vue
import {ref} from "vue";

const showModal = ref<boolean>(false);

function show(params: any) {
  console.log(params);
  showModal.value = true;
}

defineExpose({ // 暴露show方法，暴露key
  show,
  key: value
})
```

在另一个组件中调用`show`

```vue
<template>  
    <test-dialog ref="dialog"/>
</template>

## 五、props带初始值定义

使用`withDefaults()`包裹`defineProps<>()`

```typescript
const props = withDefaults(defineProps<{
  rowKey?: string | ((row: Record<string, any>) => string | number);
  defaultPageSize?: number;
}>(), {
  rowKey: 'id',
  defaultPageSize: 20,
});
```

## 一、interface与type区别

#### 1、声明区别

`interface`可以多次声明且自动合并

```typescript
interface User {
  name: string;
}
interface User {
  age: number;
}
// 最终 User 类型为 { name: string; age: number }
```

`type`不能重复声明

```typescript
type User = { name: string };
type User = { age: number }; // ❌ 错误：重复标识符
```

#### 2、扩展方式区别

`interface`扩展使用`extends`关键词

```typescript
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}
```

`type`扩展使用`&`运算符

```typescript
type Animal = { name: string };
type Dog = Animal & { breed: string };
```

#### 3、定义类型区别

`interface`只能定义对象类型

```typescript
interface Point {
  x: number;
  y: number;
}
```

`type`可以定义任意类型

```typescript
// 原始类型别名
type ID = string | number;

// 元组
type Point = [number, number];

// 联合类型
type Status = 'success' | 'error' | 'pending';

// 映射类型
type Readonly<T> = { readonly [P in keyof T]: T[P] };

// 条件类型
type IsString<T> = T extends string ? true : false;
```

## 二、Record类型作用

`Record<K, T>` 是 TypeScript 内置的**工具类型**，用于创建一个对象类型，其所有属性的键都是 `K` 类型，值都是 `T` 类型。

```typescript
const params: Record<string, any> = {};

params.id = "1234-5678-90123";
params.type = 1;

// params: {"id": "1234-5678-90123", "type": 1}
```

#### 1、限制键的特定值

```typescript
// 键只能是 'name' | 'age' | 'email'
type UserInfo = Record<'name' | 'age' | 'email', string>;

const user: UserInfo = {
  name: 'Alice',
  age: '25', // 注意：age 也是 string 类型
  email: 'alice@example.com'
};
```

#### 2、创建枚举映射

```typescript
type Status = 'pending' | 'success' | 'error';

#### 3、与 as const 配合使用

```typescript
const STATUS = {
  PENDING: 'pending',
  SUCCESS: 'success',
  ERROR: 'error'
} as const;

type Status = typeof STATUS[keyof typeof STATUS];
type StatusConfig = Record<Status, { color: string }>;
```

## 三、`as const`作用

`as const` 是 TypeScript 的**常量断言**，它告诉 TypeScript 将表达式视为**不可变的字面量类型**，而不是更宽泛的类型。

```typescript
// 不使用 as const
const colors = ['red', 'green', 'blue'];
// 类型: string[]
// colors[0] 类型: string

// 使用 as const
const colors = ['red', 'green', 'blue'] as const;
// 类型: readonly ["red", "green", "blue"]
// colors[0] 类型: "red"
```

#### 1、对象属性只读化

## 四、vue组件方法暴露

vue setup 中使用`defineExpose({})`才能将方法暴露出去

```typescript
// TestDialog.vue
import {ref} from "vue";

const showModal = ref<boolean>(false);

function show(params: any) {
  console.log(params);
  showModal.value = true;
}

defineExpose({ // 暴露show方法，暴露key
  show,
  key: value
})
```

在另一个组件中调用`show`

```vue
<template>  
    <test-dialog ref="dialog"/>
</template>

## 五、props带初始值定义

使用`withDefaults()`包裹`defineProps<>()`

最后修改：2026 年 04 月 16 日

👆请简单粗暴地爱我。

Vue3使用TypeScript编写时注意事项

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Spring框架依赖注入

MySQL知识扩展

Day12 - JDBC驱动安装及其简单使用方法

Java常用注解表

Electron的简介

Ajax与Axios框架

Tomcat9.0安装与IDEA配置

Vue3使用TypeScript编写时注意事项

DeepSeek R1/V3 使用本地知识库

[工具类] Collections类常用的方法

Vue3使用TypeScript编写时注意事项

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Vue3使用TypeScript编写时注意事项

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款