TypeScript 中的 void 與型別系統

void 型別解析

在 TypeScript / Angular 中，void 是一個表示函數不返回任何值的型別。

基本用法

// 1. 生命週期函數
ngOnInit(): void {
  this.loadData();
}

// 2. 一般方法
saveData(): void {
  this.updateDatabase();
}

為什麼要使用 void？

1. 明確函數目的：

   • 告訴其他開發者這個函數不需要返回值

   • 純粹執行某些操作

2. 型別安全：

// 錯誤示範：TypeScript 會報錯
ngOnInit(): void {
  return "something";  // Error: Type 'string' is not assignable to type 'void'
}

// 正確示範
ngOnInit(): void {
  this.loadData();
  // 不返回任何值
}

1. 常見使用場景：

// 生命週期鉤子
ngOnInit(): void
ngOnDestroy(): void
ngAfterViewInit(): void

// 事件處理函數
handleClick(): void
processForm(): void

// 資料處理函數
updateData(): void
deleteItem(): void

實際應用例子

1. 組件中的使用

@Component({
  selector: 'app-search',
  template: '...'
})
export class SearchComponent implements OnInit {
  // 初始化函數
  ngOnInit(): void {
    this.loadInitialData();
  }

  // 事件處理
  handleSearch(): void {
    this.performSearch();
  }

  // 私有方法
  private loadInitialData(): void {
    // 載入資料的邏輯
  }
}

2. 服務中的使用

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any[] = [];

  // 清除資料的方法
  clearData(): void {
    this.data = [];
  }

  // 更新資料的方法
  updateCache(): void {
    localStorage.setItem('cache', JSON.stringify(this.data));
  }
}

與其他返回型別的比較

// void：無返回值
function logMessage(): void {
  console.log("Hello");
}

// string：返回字串
function getMessage(): string {
  return "Hello";
}

// Promise<void>：非同步無返回值
async function processData(): Promise<void> {
  await this.saveToDatabase();
  // 不需要返回值
}

// Observable<void>：流無返回值
someMethod(): Observable<void> {
  return this.http.post('/api/endpoint', data).pipe(
    map(() => undefined)
  );
}

注意事項

1. void 不等同於 undefined：

// 正確：不寫 return
function example1(): void {
  console.log("Hello");
}

// 正確：寫 return; （空的 return）
function example2(): void {
  console.log("Hello");
  return;  // 這裡的 return 只是用來結束函數執行
}

// 錯誤：return 值
function example3(): void {
  console.log("Hello");
  return "Hi";  // 錯誤！void 型別不能返回值
}

1. 在 Angular 生命週期中的使用：

// 必須實作 OnInit 介面
export class MyComponent implements OnInit {
  ngOnInit(): void {
    // 初始化邏輯
  }
}

開發建議

1. 對於不需要返回值的函數，明確標示 void 型別

2. 生命週期函數必須使用 void

3. 事件處理函數通常使用 void

4. 如果函數需要返回值，不要使用 void