面试题：TypeScript中命名空间与第三方库结合使用之基础运用

Question

假设你正在使用一个第三方图表库（如Chart.js），请阐述如何在TypeScript的命名空间中引入并使用该库，以便在项目中绘制简单的柱状图。请给出关键步骤和代码示例。

Answer 1

1. 安装库及类型声明：

   • 使用npm安装Chart.js库：npm install chart.js
   • 安装Chart.js的类型声明（如果没有自带类型声明）：npm install @types/chart.js

2. 在TypeScript命名空间中引入并使用：

   • 以下是关键代码示例：

// 创建一个命名空间
namespace MyChart {
    import Chart = require('chart.js');

    // 获取要绘制图表的DOM元素
    const ctx = document.getElementById('myChart') as HTMLCanvasElement;

    // 配置柱状图数据
    const data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    };

    // 配置图表选项
    const options = {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    };

    // 创建柱状图实例
    new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
    });
}

• 在HTML文件中添加一个canvas元素，id为myChart，用于绘制图表：

<canvas id="myChart"></canvas>

上述代码通过在TypeScript命名空间MyChart中引入Chart.js库，配置数据和选项，然后在指定的canvas元素上创建了一个简单的柱状图。