TS函式的型別

2021-09-25 04:16:09 字數 3239 閱讀 1785

乙個函式有輸入和輸出，要在 typescript 中對其進行約束，需要把輸入和輸出都考慮到，其中函式宣告的型別定義較簡單

function sum(x: number, y: number): number
function sum(x: number, y: number): number 


sum(1, 2, 3);


// index.ts(4,1): error ts2346: supplied parameters do not match any signature of call target.
寫成這樣

let mysum = function (x: number, y: number): number ;
這是可以通過編譯的，不過事實上，上面的**只對等號右側的匿名函式進行了型別定義，而等號左邊的 mysum，是通過賦值操作進行型別推論而推斷出來的。如果需要我們手動給 mysum 新增型別，則應該是這樣：

let mysum: (x: number, y: number) => number = function (x: number, y: number): number ;
注意不要混淆了 typescript 中的 => 和 es6 中的 =>

在 typescript 的型別定義中，=> 用來表示函式的定義，=> 的左邊是輸入型別，需要用括號括起來，的右邊是輸出型別。

inte***ce searchfunc 


let mysearch: searchfunc;


mysearch = function(source: string, substring: string)
與介面中的可選屬性類似，我們用 ? 表示可選的引數

function buildname(firstname: string, lastname?: string)  else 


}let tomcat = buildname('tom', 'cat');


let tom = buildname('tom');
需要注意的是，可選引數必須接在必需引數後面。換句話說，可選引數後面不允許再出現必須引數了

function buildname(firstname?: string, lastname: string)  else 


}let tomcat = buildname('tom', 'cat');


let tom = buildname(undefined, 'tom');


// index.ts(1,40): error ts1016: a required parameter cannot follow an optional parameter.
在 es6 中，我們允許給函式的引數新增預設值，typescript 會將新增了預設值的引數識別為可選引數

function buildname(firstname: string, lastname: string = 'cat') 


let tomcat = buildname('tom', 'cat');


let tom = buildname('tom');
此時就不受「可選引數必須接在必需引數後面」的限制了

function buildname(firstname: string = 'tom', lastname: string) 


let tomcat = buildname('tom', 'cat');


let cat = buildname(undefined, 'cat');
es6 中，可以使用 …rest 的方式獲取函式中的剩餘引數（rest 引數）

function push(array, ...items) );


}let a = ;


push(a, 1, 2, 3);
items 是乙個陣列。所以我們可以用陣列的型別來定義它

function push(array: any, ...items: any) );


}let a = ;


push(a, 1, 2, 3);
過載允許乙個函式接受不同數量或型別的引數時，作出不同的處理。

比如，我們需要實現乙個函式 reverse，輸入數字 123 的時候，輸出反轉的數字 321，輸入字串 『hello』 的時候，輸出反轉的字串 『olleh』。

利用聯合型別，我們可以這麼實現

function reverse(x: number | string): number | string  else if (typeof x === 'string') 


}
然而這樣有乙個缺點，就是不能夠精確的表達，輸入為數字的時候，輸出也應該為數字，輸入為字串的時候，輸出也應該為字串。

這時，我們可以使用過載定義多個 reverse 的函式型別

function reverse(x: number): number;


function reverse(x: string): string;


function reverse(x: number | string): number | string | undefined else if (typeof x === 'string') 


}
上例中，我們重複定義了多次函式 reverse，前幾次都是函式定義，最後一次是函式實現。在編輯器的**提示中，可以正確的看到前兩個提示。

增加了undefined不加的話就會報錯。不明所以。索性換成any,先放一放，學到後邊再研究它。

注意，typescript 會優先從最前面的函式定義開始匹配，所以多個函式定義如果有包含關係，需要優先把精確的定義寫在前面

ts定義陣列型別 ts中型別

1 vscode配置自動編譯 1.第一步 tsc inti 生成tsconfig.json 改 outdir js 2 第二步 任務 執行任務 監視tsconfig.json 2 typescript中的資料型別 typescript中為了使編寫的 更規範，更有利於維護，增加了型別校驗，在types...

ts型別總結

1.ts保留了js語法的全部型別 8種 number string boolean null undefind symbol array object 例 let str string zhangsan let nul null null let num number 123 注 陣列的書寫方式有所...

ts 基礎型別

宣告js的基本型別 1.數字 let a number 2 2.字串 let aa string 22 3.陣列 1 陣列元素 let b number 1,2,3 2 陣列泛型 let b array 1,2,3 3 const arr number string 1,1 2 4 type dem...