{%hackmd BJrTq20hE %}
###### tags: `TypeScript`
# TypeScript Function的基礎 各種回傳類型

## 定義要傳入的參數
### 如果傳入的參數是純值

以下的函式代表action這個函式只能傳入string與number

function action(a: string, b: number){
    return a + b
}

action("Jack", 123)

如果傳入其他的參數則會報錯如下圖

### 參數可以選擇傳與不傳

在參數可以選擇傳與不傳的情況時該怎麼寫呢?
下面的例子在age後面加個?表示該參數可以為undefined，但要注意順序必有?的參數須放在後面，放在前面會報錯。

function setUserInfo(name: string, age?: number){
    console.log(name,age)
}

如果?參數寫在前面則會出現下方報錯

### 所傳入的參數是物件
所傳入的參數是物件則可以使用type定義

type Info = {
    name: string,
    age: number
}
function setUser(data:Info){
    console.log(data.name, data.age)
}

### 定義函數回傳資料的類型
在TypeScript中會自動判斷函數回傳的類型，但是也可以特別定義

function set():string{
    return "string"
}

#### 構建函示 (這個小段還沒弄清楚)
什麼是構建函式????
function createDog(name: string,){
this.name = name
return {
name:this.name
}
}
type DogType = {
name: string
}

type CreateDog = {
new():DogType
}
// 有問題的地方再研究
// function createZoo(createDog:CreateDog){
// return createDonDon("domdom") = new createDog
// }

#### never
對函式定義為never的時候，表示不會return任何值

function doSomeThing():never{
    throw new Error("")
}

#### 不回傳的參數void
一般含是沒有return任何值的時候預設就是void

function doSomeThing2(){
    console.log("123")
}


#### return array
TS會自動判斷return的陣列類型

function getArr(){
    return [0,"Jack",false]
}
const reaultArr = getArr()


但是如果用解構的方式，則會發現每個解構的變數的資料類型都可以為number、string、boolean

function getArr(){
    return [0,"Jack",false]
}
const [id, Username, isWork] = getArr()


要怎麼處理呢?
使用tuple

function getArr(){
    return [0,"Jack",false] as [number, string, boolean]
}
const [id, Username, isWork] = getArr()

這樣子所解構的變數就都會是所指定的類型了


## TypeScript Function泛型
簡單的Function泛型，簡單的來說就是使用函式的時候再決定資料類別

function print<T>(info:T){
    let data:T;
    data = info;
    console.log(info);
}
print<string>("Jack")
print<number>(123)
print<boolean>(false)


## overload
簡單的來說就是允許相同名子的函式，因為所傳入的參數不同，會有稍微不一樣的功能

一般函式也可以使用泛型或是union達成目的

function showdata1(data:number):void
function showdata1(data:string):void
function showdata1(data:unknown){
  if(typeof data == "string") {console.log(data);}
  else if(typeof data == "number") {console.log(data);}
}

以下的例子是有return資料
也可以使用泛型或是union達成目的

function showdata(data:number):number
function showdata(data:string):string
function showdata(data:unknown):unknown{
  if(typeof data == "string") {return data;}
  else if(typeof data == "number") {return data;}
}

## Function參數的收集與解構

### 有說少參數就要寫多少參數，不然會報錯

function cacl(par:number, par2:number, par3:number){
  console.log()
}
cacl(1,5,6)

### 如果不能確認參數的數量

那就把傳入的參數變成陣列傳入

function cacl2(...par:number[]){
  console.log(par)
}

cacl2(1,5,8,6,5) // [1,5,8,6,5]

### 一般的JS解構寫法在TS會報錯

function cacl3(par:number, par2:number, par3:number){
  console.log()
}

const arrNum = [4,88,6]

cacl3(...arrNum)


### 把arrNum加上斷言

function cacl3(par:number, par2:number, par3:number){
  console.log()
}
const arrNum = [4,88,6] as const
cacl3(...arrNum)