前言：根据资料类型来学习

1. (已讲完)原始资料型别（Primitive types） : string (字串)、number (数值)、boolean (布林值)、null、undefined

• string (字串)、number (数值)、boolean (布林值)没什么好讲的，跟JavaScript一样~~
• null、undefined： typescript 配置与设定

2. (已讲完)TypeScript 才有的型别: any、unknown、void、 never、 union types (联合型别) 、intersection types（交集型别）、 literal types (字面值型别)、 tuple (元组)、 enums (列举)

• any、unknown、 never： typescript 配置与设定

• TypeScript 才有的型别讲解

3. (这期讲)物件型别（Object types）: object (物件) 、 arrays (阵列) 、function (函式)

会分成2期，本期讲function ，下期讲 object (物件)

function 新增特性

Call Signatures:给 function 新增属性

const jsFunc = () => {
    return "this's a function";
}

jsFunc.prop = "this's a prop";
jsFunc.desc = "this's a desc";

TypeScript 中， type expression 是不允许对 function 新增属性的，于是我们可以在 object type 写一个 call signatures， 如下DescribableFunction

//新增 call signatures
type DescribableFunction = {  
  description: string;
  (someArg: number): boolean;  
};

function doSomething(fn: DescribableFunction) {
  console.log(fn.description + " returned " + fn(6));
}

//回传boolean 如果大于5回传true
const func = (someArg: number): boolean => { 
  return someArg > 5;  
};

//新增属性
func.description = "isNumber > 5";

doSomething(func); //isNumber > 5 returned true

function的参数新增特性

Construct Signatures：使用 new 来建立新 object， 就称为 constructors

type SomeConstructor = {
  new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
  return new ctor("hello");
}

Function Overloads 函式重载

大白话来说，函数重载就是针对同一个 function 提供多个不同的 type definition。可以使用相同的 function 名称，定义不同的参数数量或型别创建多种方法。

// overload signatures 定义
function padding(all: number): object;
function padding(topAndBottom: number, leftAndRight: number): object;
function padding(top: number, right: number, bottom: number, left: number): object;

// function implementation 实际执行的function
function padding(a: number, b?: number, c?: number, d?: number) {
  if (b === undefined && c === undefined && d === undefined) {
    b = c = d = a;
  } else if (c === undefined && d === undefined) {
    c = a;
    d = b;
  }
  return {
    top: a,
    right: b,
    bottom: c,
    left: d
  };
}

padding(1); // ok: all
padding(1, 1); // ok: topAndBottom, leftAndRight
padding(1, 1, 1, 1); // ok: top, right, bottom, left
padding(1, 1, 1); // Error: No overload expects 3 arguments, but overloads do exist that expect either 2 or 4 

函数重载用大白话说就是，针对同一个 function 提供多个不同的 type definition。可以使用相同的 function 名称，定义不同的参数数量或型别创建多种方法

default-initialized parameters =使用参数预设值

⚠️如果要使用预设值，在呼叫该函式的时候要传入undefined。

const getName = (firstName = "Tom", lastName: string) => {
    return `${firstName} ${lastName}`;
}

console.log(getName("Tom")); //Tom Chen

//如果要使用预设值，在呼叫该函式的时候要传入undefined。
console.log(getName(undefined, "Chen")); //Tom Chen

Optional Parameters？可选参数

⚠️在 JavaScript 中没有被带入的函式参数会是 undefined 且可以正常运作，

✅但在 TypeScript 中，函式的参数预设都是必填的，没填的话 compiler 会直接报错，使用？可以解决这个错误。

• 特别注意的是 optional parameter 一定只能放在 required parameter 的后面！
• 特别提醒在 callback 的时候尽量不要使用 optional parameter！可能会发生这种错误www.typescriptlang.org/docs/handbo…

// firstName 是必填，lastName 则可以选填
const getName = (firstName: string, lastName?: string) => {
    return  lastName ? `${firstName} ${lastName}` : firstName;
}

想新增无限组参数，可使用剩余参数关键字...

const getName = (firstName: string, ...rest: string[]) => {
    return `${firstName} ${rest.join(' ')}`;
} 
const names = getName('Tom', 'Jerry', 'Chen');
console.log(names);