TypeScript(6)函數

来源:https://www.cnblogs.com/jiakecong/archive/2022/06/21/16396314.html
-Advertisement-
Play Games

函數 函數是 JavaScript 應用程式的基礎,它幫助你實現抽象層,模擬類,信息隱藏和模塊。在 TypeScript 里,雖然已經支持類,命名空間和模塊,但函數仍然是主要的定義行為的地方。TypeScript 為 JavaScript 函數添加了額外的功能,讓我們可以更容易地使用。 基本示例 和 ...


函數

函數是 JavaScript 應用程式的基礎,它幫助你實現抽象層,模擬類,信息隱藏和模塊。在 TypeScript 里,雖然已經支持類,命名空間和模塊,但函數仍然是主要的定義行為的地方。TypeScript 為 JavaScript 函數添加了額外的功能,讓我們可以更容易地使用。
 

基本示例

和 JavaScript 一樣,TypeScript 函數可以創建有名字的函數和匿名函數。你可以隨意選擇適合應用程式的方式,不論是定義一系列 API 函數還是只使用一次的函數。

// 命名函數
function add(x, y) {
  return x + y
}

// 匿名函數
let myAdd = function(x, y) { 
  return x + y;
}

 

函數類型

為函數定義類型

讓我們為上面那個函數添加類型:

function add(x: number, y: number): number {
  return x + y
}

let myAdd = function(x: number, y: number): number { 
  return x + y
}

我們可以給每個參數添加類型之後再為函數本身添加返回值類型。TypeScript 能夠根據返回語句自動推斷出返回值類型。
 

書寫完整函數類型

現在我們已經為函數指定了類型,下麵讓我們寫出函數的完整類型。

// 函數的完整寫法
// myAdd2---->變數名----函數myAdd2
//  (x: number, y: number) => number 是當前這個函數的類型
// function(x: number, y: number): number { return x + y } 相當於符合上面這個函數的值
let myAdd2: (x: number, y: number) => number = 
function(x: number, y: number): number {
  return x + y
}

 

可選參數和預設參數

TypeScript 里的每個函數參數都是必須的。 這不是指不能傳遞 nullundefined 作為參數,而是說編譯器檢查用戶是否為每個參數都傳入了值。編譯器還會假設只有這些參數會被傳遞進函數。 簡短地說,傳遞給一個函數的參數個數必須與函數期望的參數個數一致。
 
JavaScript 里,每個參數都是可選的,可傳可不傳。 沒傳參的時候,它的值就是 undefined。 在TypeScript 里我們可以在參數名旁使用 ? 實現可選參數的功能。 比如,我們想讓 lastName 是可選的
 
TypeScript 里,我們也可以為參數提供一個預設值當用戶沒有傳遞這個參數或傳遞的值是 undefined 時。 它們叫做有預設初始化值的參數。 讓我們修改上例,把firstName 的預設值設置為 "A"

function buildName(firstName: string='A', lastName?: string): string {
  if (lastName) {
    return firstName + '-' + lastName
  } else {
    return firstName
  }
}

// 都傳入
console.log(buildName('C', 'D'))
// 只傳入姓
console.log(buildName('C'))
// 什麼也不傳
console.log(buildName())


 

剩餘參數

必要參數,預設參數和可選參數有個共同點:它們表示某一個參數。 有時,你想同時操作多個參數,或者你並不知道會有多少參數傳遞進來。 在 JavaScript 里,你可以使用 arguments 來訪問所有傳入的參數
 
在 TypeScript 里,你可以把所有參數收集到一個變數里:
剩餘參數會被當做個數不限的可選參數。 可以一個都沒有,同樣也可以有任意個。 編譯器創建參數數組,名字是你在省略號( ...)後面給定的名字,你可以在函數體內使用這個數組。

function info(x: string, ...args: string[]) {
  console.log(x, args)
}
info('abc', 'c', 'b', 'a')


 

函數重載

函數重載: 函數名相同, 而形參不同的多個函數
在JS中, 由於弱類型的特點和形參與實參可以不匹配, 是沒有函數重載這一說的 但在TS中, 與其它面向對象的語言(如Java)就存在此語法

/* 
函數重載: 函數名相同, 而形參不同的多個函數
需求: 我們有一個add函數,它可以接收2個string類型的參數進行拼接,也可以接收2個number類型的參數進行相加 
*/

// 重載函數聲明
function add (x: string, y: string): string
function add (x: number, y: number): number

// 定義函數實現
function add(x: string | number, y: string | number): string | number {
    // 在實現上我們要註意嚴格判斷兩個參數的類型是否相等,而不能簡單的寫一個 x + y
    if (typeof x === 'string' && typeof y === 'string') {
        return x + y
    } else if (typeof x === 'number' && typeof y === 'number') {
        return x + y
    }
}

console.log(add(1, 2))
console.log(add('a', 'b'))


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、Linux系統常見的壓縮命令 *.z compress程式壓縮文件(不流行了)*.gz gzip程式壓縮的文件*.bz2 bzip2程式壓縮的文件*.tar tar程式打包的數據,並沒有被壓縮過*.tar.gz tar程式打包的文件,其中經過gzip的壓縮*.tar.bz2 tar程式打包的文件 ...
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 **前言:**本文將以 Ubuntu Server 22.04 LTS 為例,說明在 VMware 虛擬機中的安裝和配置 Linux 操作系統的步驟。 一、VMWare 安裝配置 1、VMware 下載地址:VMware Workstation ...
  • Linux管理軟體的三種方法: 包管理 使用倉庫管理 編譯安裝 軟體相關概念: ABI: ABI:Application Binary Interface。應用程式的二進位介面。windows和Linux的二進位格式不一樣(ABI標準不同) Windows與Linux不相容 ELF (Executa ...
  • 雲原生時代需要什麼樣的資料庫?如何構建資料庫服務?騰訊雲資料庫技術負責人程彬認為,雲資料庫未來趨勢會從以托管為核心升級到以極致效率為核心,助力業務降本增效。從資料庫管理和應用角度來看,雲廠商、資源、客戶三角關係背後包含了三個維度的效率:系統效率、運營效率、業務效率,當這些效率都做到極致,成本會大幅下 ...
  • 前言 ​ 所謂的 APP 和 H5 打通,是指 H5 集成 JavaScript 數據採集 SDK 後,H5 觸發的事件不直接同步給伺服器,而是先發給 APP 端的數據採集 SDK,經過 APP 端數據採集 SDK 二次加工處理後存入本地緩存再進行同步。 一、App 與 H5 打通原因 1.1 數據 ...
  • 在各類App都要進行實名制的當下,進行身份認證自然不可避免。平時購買火車票、飛機票,住酒店、打游戲等都需要身份認證,如果每次都要輸入那18位的身份證號十分麻煩,手一抖就會出錯。因此,使用華為機器服務身份證識別功能掃描身份證,錄入身份信息就相當方便了。 1. 業務簡介 HMS Core機器學習服務身份 ...
  • 文本格式化標簽 語義 標簽 加粗 <strong> <b> 傾斜 <em> <i> 刪除線 <del> <s> 下劃線 <ins> <u> 盒子標簽 佈局 <div> 獨占一行,大盒子 <span> 一行可以放多個,小盒子 圖像標簽 <img 屬性=... /> 單標簽 | 屬性 | 屬性值 | 說 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、vue腳手架 1.簡介 Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。 2.命令行操作步驟 npm install -g @vue/cli 安裝3.x版本的vue腳手架 vue -V 測試是否安裝成功 vue cr ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...