Typescript中Type check類型檢查的實現(xiàn)

更新時間：2025年10月10日 09:26:58 作者：心隨雨下

本文主要介紹了Typescript中Type check類型檢查的實現(xiàn),類型檢查是一項非常重要的特性,它可以幫助你捕獲潛在的錯誤,下面就來詳細的介紹一下如何實現(xiàn),感興趣的可以了解一下

1. 基礎(chǔ)類型檢查

基本類型注解

// 基本類型
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;
let nothing: null = null;
let undef: undefined = undefined;

// 數(shù)組
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];

// 元組
let tuple: [string, number] = ["hello", 42];

2. 對象類型檢查

接口（Interface）

interface User {
  id: number;
  name: string;
  email?: string; // 可選屬性
  readonly createdAt: Date; // 只讀屬性
}

const user: User = {
  id: 1,
  name: "John",
  createdAt: new Date()
};

// 錯誤：缺少必需的屬性
// const invalidUser: User = { id: 1 }; // Error: Property 'name' is missing

// 錯誤：修改只讀屬性
// user.createdAt = new Date(); // Error: Cannot assign to 'createdAt'

類型別名（Type Alias）

type Point = {
  x: number;
  y: number;
};

type ID = number | string;

3. 函數(shù)類型檢查

// 函數(shù)聲明
function add(a: number, b: number): number {
  return a + b;
}

// 函數(shù)表達式
const multiply: (x: number, y: number) => number = function(x, y) {
  return x * y;
};

// 箭頭函數(shù)
const divide = (a: number, b: number): number => a / b;

// 可選參數(shù)和默認參數(shù)
function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}!`;
}

// 剩余參數(shù)
function sum(...numbers: number[]): number {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

4. 聯(lián)合類型和交叉類型

// 聯(lián)合類型
type Status = "pending" | "success" | "error";
let currentStatus: Status = "pending";

type StringOrNumber = string | number;
let value: StringOrNumber = "hello";
value = 42;

// 交叉類型
interface Named {
  name: string;
}

interface Aged {
  age: number;
}

type Person = Named & Aged;
const person: Person = { name: "John", age: 30 };

5. 泛型類型檢查

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

// 泛型接口
interface Response<T> {
  data: T;
  status: number;
}

const userResponse: Response<User> = {
  data: { id: 1, name: "John", createdAt: new Date() },
  status: 200
};

// 泛型約束
interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(arg: T): void {
  console.log(arg.length);
}

6. 高級類型檢查

類型守衛(wèi)（Type Guards）

function isString(value: any): value is string {
  return typeof value === "string";
}

function processValue(value: string | number) {
  if (isString(value)) {
    // TypeScript 知道這里 value 是 string 類型
    console.log(value.toUpperCase());
  } else {
    // TypeScript 知道這里 value 是 number 類型
    console.log(value.toFixed(2));
  }
}

keyof 和 typeof

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

type UserKeys = keyof User; // "id" | "name" | "email"

const user = { name: "John", age: 30 };
type UserType = typeof user; // { name: string; age: number; }

7. 嚴格的類型檢查選項

在 tsconfig.json 中啟用嚴格模式：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true
  }
}

具體嚴格選項：

strict: 啟用所有嚴格類型檢查選項
noImplicitAny: 禁止隱含的 any 類型
strictNullChecks: 嚴格的 null 檢查
strictFunctionTypes: 嚴格的函數(shù)類型檢查
strictPropertyInitialization: 嚴格的屬性初始化檢查

8. 類型推斷

TypeScript 在很多情況下可以自動推斷類型：

// 類型推斷
let message = "hello"; // 推斷為 string 類型
let count = 42; // 推斷為 number 類型

// 函數(shù)返回類型推斷
function createUser(name: string, age: number) {
  return { name, age }; // 推斷返回類型為 { name: string; age: number }
}

// 上下文類型推斷
const buttons = document.querySelectorAll("button");
buttons.forEach(button => {
  button.addEventListener("click", e => {
    // e 被推斷為 MouseEvent
    console.log(e.target);
  });
});

9. 類型兼容性

TypeScript 使用結(jié)構(gòu)化類型系統(tǒng)：

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

interface NamedPoint {
  x: number;
  y: number;
  name: string;
}

let point: Point = { x: 1, y: 2 };
let namedPoint: NamedPoint = { x: 1, y: 2, name: "origin" };

point = namedPoint; // OK: NamedPoint 包含 Point 的所有屬性
// namedPoint = point; // Error: Point 缺少 name 屬性

10. 實用類型（Utility Types）

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

// Partial: 所有屬性變?yōu)榭蛇x
type PartialUser = Partial<User>;

// Readonly: 所有屬性變?yōu)橹蛔x
type ReadonlyUser = Readonly<User>;

// Pick: 選擇部分屬性
type UserBasicInfo = Pick<User, "id" | "name">;

// Omit: 排除部分屬性
type UserWithoutEmail = Omit<User, "email">;

// Record: 創(chuàng)建鍵值對類型
type UserMap = Record<string, User>;

TypeScript 的類型檢查系統(tǒng)非常強大，能夠在編譯時捕獲許多常見的錯誤，提供更好的開發(fā)體驗和代碼質(zhì)量。

到此這篇關(guān)于Typescript中Type check類型檢查的實現(xiàn)的文章就介紹到這了,更多相關(guān)Typescript Type check類型檢查內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: