Typescript入門-Day10：套件

引用套件的方式

在 TypeScript 中，可以使用 import 語句來引用套件。套件可以是第三方庫，也可以是自定義的模組。

引用第三方套件

首先，需要使用 npm 安裝第三方套件。例如，安裝 lodash：

npm install lodash

然後，可以在 TypeScript 代碼中引用並使用 lodash：

import * as _ from 'lodash';

let numbers = [1, 2, 3, 4];
let doubled = _.map(numbers, (n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

引用自定義模組

可以引用自己定義的模組。假設有一個 utils.ts 文件：

// utils.ts
export function greet(name: string): string {
    return `Hello, ${name}`;
}

然後在其他文件中引用它：

import { greet } from './utils';

console.log(greet('Alice')); // Hello, Alice

自定義套件

自定義套件是指自己創建和打包的模組。這些模組可以分享給其他項目或開發者使用。

創建自定義套件

1. 初始化項目： 使用 npm 初始化一個新的項目：

   npm init -y
   

2. 創建 TypeScript 配置文件： 創建 tsconfig.json 文件並添加配置：

   {
       "compilerOptions": {
           "module": "commonjs",
           "target": "es5",
           "declaration": true,
           "outDir": "./dist",
           "strict": true
       },
       "include": ["src"]
   }
   
   

3. 編寫代碼： 在 src 文件夾中創建 TypeScript 文件。例如，創建 index.ts：

   // src/index.ts
   export function greet(name: string): string {
       return `Hello, ${name}`;
   }
   
   

4. 編譯代碼： 使用 TypeScript 編譯器將代碼編譯為 JavaScript：

   tsc
   

5. 發布套件： 可以將自定義套件發布到 npm 或其他包管理器。如果是本地使用，可以通過 npm link 來使用。

   npm publish
   

常見的套件

以下是一些常見的 TypeScript 套件和它們的用途：

lodash

lodash 是一個流行的 JavaScript 工具庫，提供了大量有用的函數來處理數組、對象、字符串等。

import * as _ from 'lodash';

let arr = [1, 2, 3, 4];
let reversed = _.reverse(arr);
console.log(reversed); // [4, 3, 2, 1]

express

express 是一個快速、簡單、靈活的 Node.js Web 應用框架，提供了一組健壯的功能來開發 Web 和移動應用。

import * as express from 'express';

const app = express();

app.get('/', (req, res) => {
    res.send('Hello, World!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

axios

axios 是一個基於 Promise 的 HTTP 客戶端，用於向服務器發送異步請求。

import axios from 'axios';

axios.get('<https://jsonplaceholder.typicode.com/posts>')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

moment

moment 是一個用於解析、驗證、操作和顯示日期和時間的 JavaScript 庫。

import * as moment from 'moment';

let now = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(now); // 2024-05-27 12:34:56 (示例)

這些是一些常見的 TypeScript 套件，還有許多其他強大的套件可用於不同的需求。使用這些套件可以大大提高開發效率和代碼質量。