TypeScript之基础知识

基础知识

---

1. 基本类型

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

---

2. 接口与类型别名

• 接口（Interface）：

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

• 类型别名（Type Aliases）：

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

---

3. 函数类型

// 参数与返回值类型
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. 泛型

// 泛型函数
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. 联合类型与类型守卫

// 联合类型
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 项目：

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

• Vite 项目：

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

• 手动配置：

  • 安装依赖：

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

  • 创建 tsconfig.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：

  <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：

  <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 类型定义

<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 响应式数据与类型推断

<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），可直接使用内置类型：

import { Ref, ComputedRef } from 'vue';

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

---

7. 常见问题与最佳实践

1. 如何处理 null 和 undefined？

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

2. 避免过度使用 any：

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

3. Vue 中的类型断言：

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