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>