TypeScript的export用法

TypeScript 中,export 用于將模塊中的變量、函數、類、類型等暴露給外部使用。export 語法允許將模塊化的代碼分割并在其他文件中導入。

1. 命名導出(Named Export)

命名導出是 TypeScript 中最常見的一種導出方式,它允許你導出多個實體,導入時需要使用相同的名字。

語法
export { <entity1>, <entity2>, ... };

或者直接在聲明時進行導出:

export <entity>;
示例
// math.ts
export const PI = 3.14159;export function add(x: number, y: number): number {return x + y;
}export class Calculator {static multiply(x: number, y: number): number {return x * y;}
}

然后在其他文件中導入:

// app.ts
import { PI, add, Calculator } from './math';console.log(PI);  // 3.14159
console.log(add(2, 3));  // 5
console.log(Calculator.multiply(2, 3));  // 6
部分導入

你也可以選擇只導入你需要的部分:

// app.ts
import { add } from './math';console.log(add(5, 3));  // 8
別名導入

你可以為導入的命名實體指定別名:

// app.ts
import { add as sum, Calculator as Calc } from './math';console.log(sum(2, 3));  // 5
console.log(Calc.multiply(2, 3));  // 6

2. 默認導出(Default Export)

默認導出用于導出模塊中的單個實體,每個模塊只能有一個默認導出。在導入時不需要使用花括號,可以自定義導入名稱。

語法
export default <entity>;
示例
// greet.ts
export default function greet(name: string): string {return `Hello, ${name}!`;
}

然后在其他文件中導入并使用:

// app.ts
import greet from './greet';console.log(greet("Alice"));  // Hello, Alice!

3. 混合使用命名導出與默認導出

你可以在一個模塊中同時使用命名導出和默認導出:

// utils.ts
export function add(x: number, y: number): number {return x + y;
}export function subtract(x: number, y: number): number {return x - y;
}export default function multiply(x: number, y: number): number {return x * y;
}

然后可以這樣導入:

// app.ts
import multiply, { add, subtract } from './utils';console.log(multiply(2, 3));  // 6
console.log(add(2, 3));       // 5
console.log(subtract(5, 3));  // 2

4. 重命名導出(Export Aliases)

你可以在導入時或導出時使用別名。

導出時重命名
// math.ts
const PI = 3.14159;function add(x: number, y: number): number {return x + y;
}// 使用 `as` 來重命名導出的符號
export { PI as PiValue, add as addNumbers };
導入時重命名
// app.ts
import { PiValue, addNumbers } from './math';console.log(PiValue);       // 3.14159
console.log(addNumbers(5, 3));  // 8

5. 導出整個模塊(Re-export)

你可以將另一個模塊的所有內容導出到當前模塊中。這對于模塊的組合和封裝非常有用。

示例
// math.ts
export const PI = 3.14159;export function add(x: number, y: number): number {return x + y;
}// geometry.ts
export * from './math';  // 將math模塊的所有導出都重新導出// app.ts
import { PI, add } from './geometry';console.log(PI);  // 3.14159
console.log(add(2, 3));  // 5

6. 導出類型(Type Export)

除了導出變量、函數和類,TypeScript 還允許導出類型別名、接口等類型定義。

示例
// types.ts
export interface Person {name: string;age: number;
}export type Point = { x: number; y: number };// app.ts
import { Person, Point } from './types';const john: Person = { name: "John", age: 30 };
const point: Point = { x: 10, y: 20 };

7. export =import = require() 的用法

export =import = require() 語法主要用于與舊版 JavaScript 模塊(如 CommonJS)兼容。當你希望以 CommonJS 風格導出模塊時,可以使用 export =

示例
// logger.ts
class Logger {log(message: string) {console.log(message);}
}export = Logger;
// app.ts
import Logger = require('./logger');const logger = new Logger();
logger.log('Hello, World!');

這種用法較少見,因為大多數 TypeScript 代碼會使用 exportimport 語法。

總結

  • export 用于將模塊中的代碼暴露出去,可以導出函數、類、常量、類型等。
  • export default 用于導出模塊中的單個實體,導入時不需要花括號,并且可以自定義導入名稱。
  • 命名導出與默認導出 可以結合使用,一個模塊可以有多個命名導出和一個默認導出。
  • export = 用于與 CommonJS 等舊版模塊系統兼容。

exportimport 使得 TypeScript 支持模塊化,幫助你組織和分離代碼,提高代碼的可維護性和復用性。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/914914.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/914914.shtml
英文地址,請注明出處:http://en.pswp.cn/news/914914.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

數據結構-2(鏈表)

一、思維導圖二、鏈表的反轉def reverse(self):"""思路&#xff1a;1、設置previous_node、current、next_node三個變量,目標是將current和previous_node逐步向后循環并逐步進行反轉,知道所有元素都被反轉2、但唯一的問題是&#xff1a;一旦current.next反轉為向…

ros2 標定相機

一個終端執行&#xff1a; ros2 run image_tools cam2image --ros-args -p width:640 -p height:480 -p frequency:30.0 -p device_id:-1 -r /image:/camera/image_raw另一個終端執行&#xff1a;8x6 是格子角點數量&#xff0c;0.028是格子尺寸 ros2 run camera_calibration …

IsaacLab學習記錄(二)

二、導入并訓練自己的機器人1、urdf等其他格式轉usd&#xff08;工具在./scrips/tools/&#xff09;???維度????URDF (Unified Robot Description Format)????USD (Universal Scene Description)????定位??機器人模型描述標準&#xff08;僅描述單機器人&…

基于Rust Softplus 函數實踐方法

Softplus 函數 Softplus 函數是神經網絡中常用的激活函數之一,定義為: ? Softplus函數導數 ? 是 sigmoid 函數。Softplus 處處可導,并且導數恰好是 sigmoid。 它是 ReLU 函數的平滑近似,具有連續可導的特性,適合需要梯度優化的場景。 數學特性 平滑性:導數為 Sig…

Ubuntu服務器安裝Miniconda

下載 Miniconda 安裝腳本&#xff08;如果能聯網&#xff09;wget https://repo.anaconda.com/miniconda/Miniconda3-py39_24.1.2-0-Linux-x86_64.sh -O Miniconda3.sh安裝 Miniconda 到 /opt/condabash Miniconda3.sh -b -p /opt/conda激活 conda/opt/conda/bin/conda init ba…

Java數組補充v2

一、數組基本概念1. 什么是數組數組是Java中用來存儲同類型數據的固定大小的連續內存空間的數據結構。2. 數組特點固定長度&#xff1a;一旦創建&#xff0c;長度不可改變相同類型&#xff1a;所有元素必須是同一數據類型索引訪問&#xff1a;通過下標&#xff08;從0開始&…

【PTA數據結構 | C語言版】前綴樹的3個操作

本專欄持續輸出數據結構題目集&#xff0c;歡迎訂閱。 文章目錄題目代碼題目 請編寫程序&#xff0c;利用前綴樹查找給定字符串是否在某給定字符串集合 S 中。 輸入格式&#xff1a; 輸入首先給出一個正整數 n&#xff08;≤1000&#xff09;&#xff0c;隨后 n 行&#xff0…

JAVA面試寶典 -《緩存架構:穿透 / 雪崩 / 擊穿解決方案》

&#x1f4a5;《緩存架構&#xff1a;穿透 / 雪崩 / 擊穿解決方案》 文章目錄&#x1f4a5;《緩存架構&#xff1a;穿透 / 雪崩 / 擊穿解決方案》&#x1f9ed; 一、開篇導語&#xff1a;為什么緩存是高并發系統的命脈&#xff1f;?1.1 緩存的核心價值緩存帶來的收益??&…

FPGA創意項目網頁或博客推薦

1. 綜合項目平臺(開源+教程) ① Hackster.io - FPGA專區 ?? https://www.hackster.io/fpga 特點: 大量基于FPGA的創意項目(如Zynq游戲機、視覺處理、機器人控制)。 提供完整教程(Vivado工程文件+代碼)。 推薦項目: FPGA-Based Oscilloscope(低成本示波器) V…

Go 程序無法使用 /etc/resolv.conf 的 DNS 配置排查記錄

在最近的一次部署中&#xff0c;我遇到一個奇怪的問題&#xff1a;Go 程序在運行時不使用 /etc/resolv.conf 中的 DNS 設置&#xff0c;導致服務無法正常訪問域名。這篇文章記錄下完整的排查過程和最終的解決方案。1. 問題現象我有一個部署在 KVM 虛擬機內的 Go 應用&#xff0…

微服務相關問題(2)

1、Spring Cloud相關常用組件注冊中心&#xff08;nacos、Eureka等&#xff09;、負載均衡&#xff08;Ribbon、LoadBalancer&#xff09;、遠程調用&#xff08;feign&#xff09;、服務熔斷&#xff08;Sentinel、Hystrix&#xff09;、網關&#xff08;Gateway&#xff09;2…

安全初級2

一、作業要求 1、xss-labs 1~8關 2、python實現自動化sql布爾育注代碼優化(二分查找) 二、xss-labs 1~8關 1、準備 打開小皮面板&#xff0c;啟動MySQL和apacher 下載 xss-labs&#xff0c;并解壓后放到 phpstudy_pro 的 WWW 目錄下&#xff0c;重命名為 xss-labs 訪問鏈…

基礎算法題

基礎算法題 鏈表 1.1反轉鏈表 描述&#xff1a; 描述 給定一個單鏈表的頭結點pHead(該頭節點是有值的&#xff0c;比如在下圖&#xff0c;它的val是1)&#xff0c;長度為n&#xff0c;反轉該鏈表后&#xff0c;返回新鏈表的表頭。 數據范圍&#xff1a; 0≤&#xfffd;≤…

Android 15 源碼修改:為第三方應用提供截屏接口

概述 在 Android 系統開發中,有時需要為第三方應用提供系統級的截屏功能。本文將詳細介紹如何通過修改 Android 15 源碼中的 PhoneWindowManager 類,實現一個自定義廣播接口來觸發系統截屏功能。 修改方案 核心思路 通過在系統服務 PhoneWindowManager 中注冊自定義廣播監…

20250717 Ubuntu 掛載遠程 Windows 服務器上的硬盤

由 DeepSeek 生成&#xff0c;方法已經驗證可行。 通過網絡掛載Windows共享硬盤&#xff08;SMB/CIFS&#xff09; 確保網絡共享已啟用&#xff1a; 在Windows電腦上&#xff0c;右鍵點擊目標硬盤或文件夾 → 屬性 → 共享 → 啟用共享并設置權限&#xff08;至少賦予讀取權限&…

深度學習圖像增強方法(二)

三、直方圖均衡化 1. 普通直方圖均衡化 直方圖均衡化的原理是將圖像的灰度直方圖展平,使得每個灰度級都有更多的像素分布,從而增強圖像的對比度。具體步驟如下: 計算灰度直方圖:統計圖像中每個灰度級的像素數量。 計算累積分布函數(CDF):計算每個灰度級的累積概率。 映…

QT——信號與槽/自定義信號與槽

1 信號與槽基本介紹 提出疑問&#xff0c;界面上已經有按鍵了&#xff0c;怎么操作才能讓用戶按下按鍵后有操作上的反應呢&#xff1f; 在 Qt 中&#xff0c;信號和槽機制是一種非常強大的事件通信機制。這是一個重要的概念&#xff0c;特別是對于初學者來說&#xff0c;理解它…

Spring原理揭秘--Spring的AOP

在這之前我們已經介紹了AOP的基本功能和概念&#xff0c;那么當AOP集成到spring則會發生改變。Spring AOP 中的Joinpoint&#xff1a;之前提高了很多Joinpoint的類型&#xff0c;但是在spring中則只會有方法級別的Joinpoint&#xff0c;像構造方法&#xff0c;字段的調用都沒適…

C++學習筆記五

C繼承//基類 class Animal{};//派生類 class Dog : public Animal{};#include<iostearm> using namespace std;//基類 class Shape{public:void setwidth(int w){width w;}void setheight(int h){height h;}protected:int width;int height;}//派生類 class Rectangle …

AndroidStudio環境搭建

一、AndroidStudio下載 正常百度出來的站會自動翻譯成中文&#xff0c;導致歷史版本的界面總是顯示不出可下載的地方&#xff0c;點擊成切回英文&#xff0c;就能看出了。 歷史版本&#xff1a;https://developer.android.google.cn/studio/archive