iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

前端是該來學一下 TypeScript 了 系列 第 10

Day10:【TypeScript 學起來】只有 TS 才有的型別 : any / unknow / void / never

  • 分享至 

  • xImage
  •  

Q: 身為工程師,你覺得有什麼工具大大提高了工作效率?
A: 單身

看文章的人表示: 看個文章也中槍 XDDD (孤獨萬歲 單身無罪~

好 終於來講 TypeScript 才有的型別了, 今天會提到的有:any / unknow / void / never。


any

如果你不希望某些值出現型別檢查錯誤,可以使用any,他是用來表示允許賦值為任意型別。

❌ 假設我們設定 myFavoriteNumber 變數的值的型別為 string, 若使用數字則會報錯。

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
//error : Cannot assign to 'myFavoriteNumber' because it is a constant.

✅ 這時候使用any, 則允許任何型別。

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
let obj: any = { x: 0 };
obj.bar = 100;
obj = "hello";
const n: number = obj;
const s: string = obj;
const b: boolean = obj;
console.log(n); //hello

宣告一個變數為任意值之後,對它的任何操作,返回的內容的型別都是任意值。在 any型別下,可以賦值給任何型別,使用任何屬性和方法,都是被允許的。 但這樣是非常危險,非必要都不會使用any,要慎用~


未宣告型別的變數及參數也視為 any 型別

變數如果在宣告的時候,未指定其型別,那麼它會被識別為any型別:

例子1:

let something;
something = 7;
something = "seven";

例子2:


function fn(s) {
    console.log(s.subtr(3));
  }
fn(42);


用 noImplicitAny , 來提醒我使用了any

如上面所述,未指定型別則被識為 any, 如果你想避免这种情况, 可以在 tsconfig 設定 noImplicitAny = true,或是打開"strict": true 開啟所有嚴謹模式。 他就會提醒你使用了any型別。


unknown

unknow 可以接受任何型別賦值, 有點類似 any 類型, 但使用上比 any 安全,來看下面例子:

function f1(a: any) {
    a.b(); //ok
}

function f2(a: unknown) {
    a.b();//error: Property 'b' does not exist on type 'unknown'.

}

使用 unknow, 會報錯沒有b函式的屬性, 而 any 則會不會告訴你。

雖然 unknown 和 any 一樣可以接受任何型別賦值,但 any 可以賦值給任何型別,unknown 只能賦值給 any 和自己。

let value: unknown;

let value1: unknown = value; // ok
let value2: any = value; // ok
let value3: boolean = value; // error
let value4: number = value; // error
let value5: string = value; // error
let value6: object = value; // error
let value7: any[] = value; // error
let value8: Function = value; // error

void

JavaScript 沒有空值(void)的概念,在 TypeScript 中,可以用 void 表示沒有任何返回值的函式,如以下例子,這個函式只有 alert,不會 return 任何值。

function alertName(): void {
    alert('My name is iris');
}

never

來表示不應該存在的狀態的型別,一般用於錯誤處理函式。

function error(message: string): never {
  throw new Error(message);
}

此外, 以下面例子,參數使用Union Types(聯合型別),當參數被判斷沒有其他型別時,也會被視為 never

function fn(x: string | number) {
  if (typeof x === "string") {
    // do something
  } else if (typeof x === "number") {
    // do something else
  } else {
    x; // has type 'never'!
  }
}


邊學習邊紀錄的測試例子,不嫌棄可參考這裡

下篇也是繼續筆記TypeScript才有的那些型別,感謝閱讀, 明天見~


參考資料

https://willh.gitbook.io/typescript-tutorial/basics/any
https://www.typescriptlang.org/tsconfig#noImplicitAny
https://www.typescriptlang.org/docs/handbook/2/functions.html#never
https://www.typescriptlang.org/docs/handbook/2/functions.html#unknown


上一篇
Day09: 【TypeScript 學起來】物件型別 Object Types : Arrays / Function
下一篇
Day11:【TypeScript 學起來】只有 TS 才有的型別 : Union Types(聯合型別) / Intersection types (交集型別)
系列文
前端是該來學一下 TypeScript 了 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言