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

錯誤型別

可以給點牡蠣。
Google AD