Charonyu's Profile

TypeScript 的 `as const`

as const 是 TypeScript 的一個型別操作符，可以將一個變數的型別綁定為它的值的精確型別。這樣可以讓 TypeScript 確保該變數的值不會被更改。

例如，如果你有一個對象字面量：


const person = {
  name: 'Alice',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA',
  },
};

你可以使用 as const 來指定 person 的型別：


const person = {
  name: 'Alice',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA',
  },
} as const;

現在，person 的型別會被精確地設置為：


{
  readonly name: 'Alice';
  readonly age: 30;
  readonly address: {
    readonly street: '123 Main St';
    readonly city: 'Anytown';
    readonly state: 'CA';
  };
}

這意味著你不能更改 person 的任何屬性或內部屬性。

as const 也可以用於數組：


const colors = ['red', 'green', 'blue'] as const;

現在，colors 的型別會被精確地設置為：


readonly ['red', 'green', 'blue']

這意味著你不能更改數組的元素。

使用 as const 可以讓你在 TypeScript 中更加精確地表示變數的型別，從而增加代碼的安全性和可靠性。

React中的應用

透過一個簡單的範例來說明使用 as const 在 useState 和元組（tuple）中的影響。


import React, { useState } from "react";

function useMyState() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("Alice");

  return [count, setCount, name, setName] as const;
}

const App = () => {
  const [count, setCount, name, setName] = useMyState();

  return (
    <div>
      <h1>{name}'s Counter</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <button onClick={() => setName("Bob")}>Change Name</button>
    </div>
  );
};

export default App;

在這個例子中，useMyState 函數返回一個使用 as const 的元組（tuple）。這個 as const 做了兩件事：

它告訴 TypeScript 這個元組（tuple）的長度是固定的，具體來說是 4 個元素。你不能對它做任何會改變長度的操作。

它使每個元素的類型更精確。在這個例子中，這可能不是特別明顯，因為我們已經很清楚各個元素的類型。但在更複雜的例子中，這可能會更有用。

請注意，as const 並不會影響 count、setCount、name、setName 這些變數的可變性。你仍然可以透過 setCount 和 setName 函數來改變 count 和 name。

簡單來說，as const 是用來讓 TypeScript 更清楚地知道這個元組（tuple）的結構和類型，但它不會限制你呼叫 setCount 或 setName 來改變狀態。

as const

TypeScript 的 as const

React中的應用

TypeScript 的 `as const`