TypeScript 基礎入門-Function

發表於 2019-06-22 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

寫 JavaScript 的時候會非常撰寫 function，但 TypeScript 也有它的撰寫方式，讓我們來了解一下

前言

寫 JavaScript 的時候會非常撰寫 function，但 TypeScript 也有它的撰寫方式，讓我們來了解一下

function

首先我們在 JavaScript 的 function 是這樣子撰寫

1
2
3

function sayHi(a) {
  return "Hello " + a;
}

但是這時候往往我們都會搞不清楚要傳入 sayHi 的型別會是什麼 string? number?

那 TypeScript 就幫助我們解決了這個問題，我們可以針對 function 的傳入值做宣告型別

1
2
3

function sayHi(a: string) {
  return "Hello " + a;
}

那這時候如果我們傳入的是一個非 string 的東西進去就會出現錯誤

型別錯誤

Interfaces (接口)

最後再補充一個特別的東西，也就是 Interfaces，透過 Interfaces 可以讓參數為物件的時候可以有一個更明確的結構，那我們看一下簡單範例了解

interface Person {
  name: string;
  age: number;
}

function sayHi(a: Person) {
  return "Hello " + a.name + "，現在" + a.age + "歲";
}

接下來我對 sayHi() 傳入一個物件，可以發現是非常明確的宣告了傳入的物件型別

interface Person {
  name: string;
  age: number;
}

function sayHi(a: Person) {
  return "Hello " + a.name + "，現在" + a.age + "歲";
}

const user = {
  name: 'Ray',
  age: 28
}

sayHi(user);

但是如果我傳入了不正確型別呢?我們可以發現 TypeScript 立刻跟我們講我們輸入錯誤的型別

錯誤型別