Day09: 【TypeScript 学起来】物件型别 Object Types : Arrays / Function

Q: 如何反驳「工程师离开电脑之後就是个废物」的这个说法？
A: 不不不，很多工程师在电脑前面也是废物

哈哈我在任何时候都是废物 XDD
继上篇了解了基本 object 在 TypScript 的使用，今天来了解 array 及 function 。

Arrays

在 TypeScript 中，有四种方式可以来定义阵列型别：

1. 一般方括号写法

让 TypeScript 自动进行型别推断（Type Inference）。如下面例子，TS 推断 list1 为 number[] 型别。

const list1 = [1, 2, 3];

2.「型别 + 方括号」表示法

✅ number[]表示此阵列型别只允许数值:

const list2: number[] = [1, 2, 3];

❌ 如果不是数值则会报错，如：

list1.push('8');
// error: Argument of type 'string' is not assignable to parameter of type 'number'.

3. 阵列泛型

✅ 我们可以使用阵列泛型（Array Generic） Array 来表示阵列：

const list3: Array<number> = [1, 2, 3];

4. 用 interface (介面)定义阵列

✅ 也可以使用 interface 来描述阵列的形状，NumberArray 表示：只要索引的型别是数字时，那麽值的型别必须是数字。

interface NumberArray {
    [index: number]: number;
}
const list4: NumberArray = [1, 1, 2, 3, 5];

❗ 虽然 interface 也可以用来描述阵列，但是我们一般不会这麽做，因为这种方式比前面的方式复杂多了。不过有一种情况例外，那就是它常用来表示类别阵列。

Function

1. Parameter Type Annotations 参数型别注释

✅ 在参数後面添加:资料型别来定义这个 function 接受什麽型别的参数。

function greet(name: string) {
  console.log("Hello, " + name.toUpperCase() + "!!");
}

❌ 如果参数不是 string , 则会报错：

greet(42);
//error: Argument of type 'number' is not assignable to parameter of type 'string'.

2. Return Type Annotations 返回值型别注释

✅ 可以给 function 设定返回值要返回什麽样的资料型别。

function getFavoriteNumber(): number {
  return 26;
}

❌ 如果返回一个字串，则会报错：

function getFavoriteNumber2(): number {
    return "26";
}
//error : Type 'string' is not assignable to type 'number'.

3. 定义 Function 的方法

Function Declaration 函式宣告

//javascript
function sum(x, y) {
    return x + y;
}

//typescript
function sum(x: number, y: number): number {
  return x + y;
}
console.log(sum(1,2)); //3

Function Expression 函式表示式

//javascript
let sum2 = function (x, y) {
    return x + y;
};

//typescript
let sum2 = function (x: number, y: number): number {
  return x + y;
};
console.log(sum2(1,2)); //3

Arrow Function 箭头函式

//javascript
let sum3 = (x, y) => {
    return x + y;
}

//typescript
let sum3 = (x: number, y: number): number =>  x + y;
console.log(sum3(1,2)); //3

Anonymous Functions 匿名函式

✅ 在 TypeScript 中使用匿名函数时，他会自动去推断参数型别。我们来看看例子：

const names = ["Alice", "Bob", "Eve"];
names.forEach( (s) => {
    console.log(s.toUpperCase());
});

TypeScript 会自动names这个变数是字串阵列，带入的参数为字串。

❌ 我们来故意拼错字串才能用的属性toUpperCase拼成 toUppercase（不过日常真的会不小心拼错）：

names.forEach( (s) => {
    console.log(s.toUppercase());
});

// error: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?

他会告诉你'toUppercase'不存在字串型别的属性，是不是要改为'toUpperCase'，觉得这个真心很方便～

後面也会详细笔记一些有关 function 函式的应用，包括 interface 定义函式形状、可选参数、重载等。