const 與 readonly

const 很直覺就是 常數 的意思，也就是說無法再被重新賦值 (re-assigned)。那 readonly 呢？

其實 const 與 readonly 原則上是在做一樣的事情的，都是在避免重新賦值這件事情，唯一的差別就是readonly 是在編譯(compile-time)的時候會去檢查我們是否有發生重新賦值，而 const 則是連執行(run-time)的時候都會檢查。當然，如果你用一個很好用的 IDE ,例如:Vistual Studio Code, 只要在你寫下程式碼的那一瞬間，他就會幫你畫底線紅字說：『誒誒！！你這樣寫有問題喔！』

const x = 5;

// 這行在會出現錯誤
// error TS2588: Cannot assign to 'x' because it is a constant.
x = 10;

class ReadonlyExample {
    public readonly y = 10;
}

let re = new ReadonlyExample();
// 這行也會出現錯誤
// TS2540: Cannot assign to 'y' because it is a read-only property.
re.y = 1;

相信大家已經發現了，雖然說一個是在 Compile-time 去檢查，一個是在 run-time 去檢查，但他們還有一個區別：那就是 const 是用在 variable, 而 readonly 是給 property 用的。在上面的範例中，x 它就是一個 variable , 而 y 它就是 property 。

那如果用反了會怎樣？
如果是把 const 用到 property 上，你的編輯器就會提醒你：

(property) ReadonlyExample.y: number
A class member cannot have the 'const' keyword.ts(1248)

如果是把 readonly 用到了 variable 上面，你也會收到這個錯誤訊息：

Declaration or statement expected.
這個錯誤訊息就比較沒有那麼直接告訴你，不過只要我們記得 readonly 是給 property 用的就好。

!!注意

另外一件很重要的事情是，不能重新賦值並不代表他是 Immutable。
(通常我們會把 Immutable 這個概念用在 集合 上面, 例如 Array 就是其中的一種)

舉個例子來說，下面這個範例是可以正常執行的：

const constArray = ['9527', '02746', '02825'];
console.log("Before pop:" + constArray); 
//輸出的結果： Before pop:9527,02746,02825

constArray.pop();
console.log("After Pop:" + constArray);
//輸出的結果： After Pop:9527,02746

constArray.push("99999");
console.log("After Push 99999:" + constArray);
//輸出的結果：After Push 99999:9527,02746,99999

注意到了嗎？雖然我們的 constArray 是個 const ·, 但是他還是可以正常操作變動它的內容。
那到底 const 對於 constArray 的作用是什麼呢？

constArray = ['9527', '02746', '02825'];

像上面這樣重新給一個新的值，就會出錯了。這個就是 const 對於 constArray 的作用。其實就和其他 variable 一樣，不能重新賦值。