[TOC]
>[success] # JS -- 函數的兩種表現形式
~~~
1.我們熟知js有兩種函數表現形式'函數聲明'和'函數表達式'
2.二者的區別:在函數聲明的中,重名的函數不管你在哪
里調用,都執行最后一個函數,函數表達式就不會出現函
數聲明 重名的問題,只會依次正常執行
~~~
>[danger] ##### 函數聲明
~~~
// 函數聲明(Function Declaration)
function sum(x, y) {
return x + y;
}
~~~
>[danger] ##### 函數的表達式
~~~
// 函數表達式(Function Expression)
let mySum = function (x, y) {
return x + y;
};
~~~
>[danger] ##### es6 箭頭函數
~~~
const esExample = (name)=>{
console.log(name)
}
~~~
>[success] # TS -- 定義一個函數
~~~
1.剛才已經知道js 函數中的常見三種寫法,接下的案例將會根據這個三種
寫法依次推到成現在我們要寫的'ts' 寫法
~~~
>[danger] ##### TS -- 函數聲明
(定義)
~~~
1.TS以函數的聲明的形式,需要定義函數參數中的類型,以及返回類型。
'function 函數名(參數:類型):函數返回的類型{}'
2.如果函數沒有返回類型就是void
~~~
~~~
function add(arg1:number,arg2:number):number{
return arg1 + arg2
}
console.log(add(1,2)) //3
~~~
>[danger] TS -- 函數函數的表達式/ 箭頭函數(定義)
~~~
1.這個案例直接用箭頭函數寫一個函數表達式的形式
2.下面兩種寫法最后編譯成'js'的結果不同,但是卻在'TS' 表現形式略有區別
第一個案例只對等號右側的匿名函數進行了類型定義,在吧這個重新被定義
的類型函數賦值給了'add',第二個案例就比較遵循'ts' 規則,先定義了一個
函數類型,這個類型參數指定的類型,以及函數返回的類型,然后使用的
時候在按照定義規范去用
~~~
* 第一種寫法
~~~
const add = (arg1:number,arg2:number) => arg1 + arg2
console.log(add(1,2)) // 3
~~~
* 第二種寫法
~~~
// 聲明一個函數類型包括參數類型和返回類型
// 這里要注意的是這里是ts函數定義寫法并不是箭頭函數意思,其左側是函數的參數類型,右側是函數的返回值類型
let add:(x:number,y:number) => number
// 使用的時候具體函數使用
// 參數名字可以不一致但是類型一定要相同
add = (arg1:number,arg2:number) =>{ return arg1+arg2}
console.log(add(1,2)) // 3
~~~
* 第二種寫法 弄成基本類型對比理解
~~~
// 函數比我多了一步使用而已
let name:string
name = "1"
~~~
>[danger] ##### 使用接口(定義)
~~~
interface add {
(x:number,y:number):number
}
// 按照接口格式 規范實現我們的myAdd方法
let myAdd:add
myAdd = (x:number,y:number)=>{
return x+y
}
// 使用
console.log(myAdd(1,2)) //3
~~~
>[danger] ##### 使用類型別名(定義)
~~~
// ts箭頭函數不加大括號的含義是 返回 類型
type PersonInfo = (name:string) => string
// 這里箭頭函數是正常的js 表達的意思
let personName:PersonInfo = (name) => name
~~~
>[danger] ##### ts 定義參數可選參數寫法 -- '?'的使用
~~~
1.JavaScript里,每個參數都是可選的,可傳可不傳。但'TS'不同每個函數參數都是必須的,可以理解定義即使用
2.但使用的時候不想將每一個定義的參數都傳值使用,就可以用'?' 的形式,
和接口中使用的方式相似
3.需要注意的是,可選參數必須接在必需參數最后面。
~~~
~~~
type AddFun = (x:number,y:number,z?:any) => number
let add:AddFun
add = (x:number,y:number)=>{
return x+y
}
// 增加了一個z參數
add = (x:number,y:number,z:number)=>{
return x+y+z
}
~~~
* 官方給的案例
~~~
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // works correctly now
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
let result3 = buildName("Bob", "Adams"); // ah, just right
~~~
>[danger] TS函數 -- 設置函數參數默認值
~~~
1.和es6 一樣直接在參數中給要增加的參數賦值默認參數即可
2.案例二中,如果定義默認參數在最前面,想使用默認參數需要傳
遞'undefined'
3.當有默認參數的時候,默認參數會自動變成一個可選參數,這個好理解
因為不填就用默認參數,填就用填寫參數,但是'?'形式的可選參數依然必須
在末尾
~~~
~~~
function buildName(firstName: string, lastName: string = 'Cat') {
return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
~~~
* 案例二
~~~
function buildName(firstName = "Will", lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
let result3 = buildName("Bob", "Adams"); // okay and returns "Bob Adams"
let result4 = buildName(undefined, "Adams"); // okay and returns "Will Adams"
~~~
>[danger] ##### TS函數 -- 設置 剩余參數
[js 函數傳遞](http://www.hmoore.net/cyyspring/more/1006387)
~~~
1.使用的場景:你想同時操作多個參數,或者你并不知道會有多少參數傳遞
進來
2.在es5的時候使用'arguments',在es6 使用'...'
3.對es6中的'...' 簡單講解:
var a = [1,2,3]
var b = [...a]
console.log(b) // [1, 2, 3] 可以解包
// 對象解包
var aObj = {'a':1}
var bObj2 = {...aObj,"b":2}
console.log(bObj2 ) // {a: 1, b: 2}
4.在'ts' 中也是'...'但需要定義數組類型參數' ...args: number[]'
~~~
~~~
const handleData = (arg1: number, ...args: number[]) => {
// ...
}
~~~
>[danger] ##### 函數重載
~~~
1.有時候函數會因為傳遞的參數不同,導致函數參數返回的時候類型值不同
,這時候第一反應可能是使用我們之前用的'聯合類型',案例一將告訴你為什
推薦'重載' 而用'聯合類型'
2.官方文檔的標準解釋:為了讓編譯器能夠選擇正確的檢查類型,它與
JavaScript里的處理流程相似。 它查找重載列表,嘗試使用第一個重載定
義。 如果匹配的話就使用這個。 因此,在定義重載的時候,一定要把最精
確的定義放在最前面。
~~~
* 3.4.5 版本不支持下面的寫法
~~~
1.這個案例表達的意思是,返回值可以是數字也可以是字符,但實際傳入
是數字只能返回數字,傳入的是字符串返回的只能是字符串
~~~
~~~
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
~~~
* 為了讓 剛才的寫法更加嚴格使用'重載'
~~~
1.在編寫的時候發現你的參數是數字,就會提示你必須用數字類型作為返回
值。
~~~
~~~
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): any {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
~~~
- TypeSprict -- 了解
- TS-- 搭建(一)webpack版本
- TS -- 搭建(二)直接使用
- TS -- 基本類型
- ts -- 類型推導和字面量類型
- ts -- 類型擴展和類型縮小
- ts -- any場景
- ts -- 使用unknown 還是 any
- ts -- any/never/unknown
- ts -- 斷言
- ts -- 類型大小寫疑惑
- ts -- 數組類型 [] 還是泛型疑惑
- TS -- 枚舉
- 外部枚舉
- TS -- 函數
- ts -- 重載作用
- ts -- 05 this is
- 解構
- TS -- 接口
- 繞過接口的多余參數檢查
- Interface 與 Type 的區別
- TS -- 類
- ts -- 類作為類型
- TS -- 交叉和聯合 類型
- ts -- 交叉類型
- ts -- 聯合類型
- ts -- 交叉和聯合優先級
- ts -- 類型縮減
- TS -- 什么是泛型
- ts -- 泛型函數表達式/函數別名/接口
- ts -- 泛型類
- ts -- extends 泛型約束
- ts -- 泛型new
- ts -- Ts的泛型
- TS -- 縮小類型詳解類型守衛
- TS -- 類型兼容性
- TS -- 命名空間與模塊化
- ts -- 模塊化
- ts -- 命名空間
- TS -- 工具方法
- Record -- 一組屬性 K(類型 T)
- Exclude -- 從聯合類型中去除指定的類
- Extract -- 聯合類型交集
- NonNullable -- 從聯合類型中去除 null 或者 undefined
- Partial -- 將所有屬性變為可選
- Required -- 所有屬性變為必填
- Readonly -- 所有屬性只讀
- Pick -- 類型中選取出指定的鍵值
- Omit -- 去除指定的鍵值