TypeScript之基础知识

基础知识

1. 基本类型

类型	描述
`string`	字符串（如 `"hello"`）
`number`	数字（整数或浮点数，支持二进制、八进制、十六进制）
`boolean`	布尔值（`true`/`false`）
`null`	空值（需显式声明）
`undefined`	未定义值（需显式声明，严格模式下不可隐式赋值）
`symbol`	唯一且不可变的值（通过`Symbol()`创建）
`object`	狭义对象（如对象、数组、函数，不包括原始类型）
`any`	关闭类型检查（谨慎使用！）
`void`	表示无返回值的函数
`never`	永不返回的函数（如抛出错误或无限循环）

2. 接口与类型别名

接口（Interface）：

typescript 复制代码

interface User {
  name: string;
  age: number;
  isAdmin?: boolean; // 可选属性
}

类型别名（Type Aliases）：

typescript 复制代码

type UserID = string | number; // 联合类型
type Point = [number, number]; // 元组类型

3. 函数类型

typescript 复制代码

// 参数与返回值类型
function add(a: number, b: number): number {
  return a + b;
}

// 可选参数与默认值
function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}`;
}

// 剩余参数
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

4. 泛型

typescript 复制代码

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 泛型类
class GenericBox<T> {
  private value: T;
  constructor(value: T) { this.value = value; }
  getValue(): T { return this.value; }
}

5. 联合类型与类型守卫

typescript 复制代码

// 联合类型
let value: string | number = "TypeScript";
value = 42;

// 类型守卫
function logValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

6. Vue 中的 TypeScript 使用

6.1 安装与配置

Vue CLI 项目：

bash 复制代码

vue create my-project --default
# 选择 TypeScript 支持

Vite 项目：

bash 复制代码

npm create @vitejs/app my-project -- --template vue-ts

手动配置：

安装依赖：

bash 复制代码

npm install vue @vue/runtime-core @vue/compiler-sfc
npm install typescript @types/node --save-dev

创建 tsconfig.json：

json 复制代码

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

6.2 Vue 组件的 TypeScript 写法

Options API：

vue 复制代码

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

interface User {
  name: string;
  age: number;
}

export default defineComponent({
  data() {
    return {
      user: {} as User, // 强制类型
    };
  },
  methods: {
    greet(): void {
      console.log(`Hello ${this.user.name}`);
    }
  }
});
</script>

Composition API：

vue 复制代码

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

interface User {
  name: string;
  age: number;
}

const user = ref<User>({
  name: "Alice",
  age: 25
});

const greet = (): void => {
  console.log(`Hello ${user.value.name}`);
};
</script>

6.3 Props 类型定义

vue 复制代码

<script setup lang="ts">
import type { PropType } from 'vue';

interface User {
  id: number;
  name: string;
}

defineProps({
  user: {
    type: Object as PropType<User>,
    required: true
  },
  count: {
    type: Number as PropType<number>,
    default: 0
  }
});
</script>

6.4 响应式数据与类型推断

vue 复制代码

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

// ref
const count = ref<number>(0); // 显式类型
const message = ref("Hello"); // 推断为 string

// reactive
const state = reactive({
  user: {
    name: "Alice",
    age: 25
  }
});
</script>

6.5 Vue 的类型定义文件

Vue 提供了类型定义文件（如 @vue/runtime-core），可直接使用内置类型：

typescript 复制代码

import { Ref, ComputedRef } from 'vue';

const count: Ref<number> = ref(0);
const double: ComputedRef<number> = computed(() => count.value * 2);

7. 常见问题与最佳实践

如何处理 null 和 undefined？

typescript 复制代码

// 开启 strictNullChecks
function safeLog(value: string | null) {
  if (value !== null) {
    console.log(value.length); // 确定非 null
  }
}

避免过度使用 any：

typescript 复制代码

let data: unknown = "TypeScript";
if (typeof data === "string") {
  console.log(data.toUpperCase());
}

Vue 中的类型断言：

typescript 复制代码

<script setup lang="ts">
const element = document.getElementById("app") as HTMLDivElement;
element.style.color = "red";
</script>