TypeScript 基礎入門-Function

前言

寫 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 可以讓參數為物件的時候可以有一個更明確的結構，那我們看一下簡單範例了解

1
2
3
4
5
6
7
8

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 立刻跟我們講我們輸入錯誤的型別