在typescript使用react-barrage

要在 TypeScript 中使用 react-barrage，您需要首先安装以下依赖项：

npm install --save react react-dom react-barrage

然后在您的 TypeScript 代码中，您需要导入 react-barrage 组件和类型：

import React from 'react';
import ReactDOM from 'react-dom';
import { Barrage, BarrageItemProps } from 'react-barrage';

接着，您可以使用 Barrage 组件来渲染弹幕。Barrage 组件需要一个 BarrageItemProps 类型的数组作为 props，每个 BarrageItemProps 对象描述一个弹幕的内容和样式。例如：

const barrageItems: BarrageItemProps[] = [
  {
    content: 'Hello world!',
    style: { color: 'white', fontWeight: 'bold' },
    speed: 80,
    duration: 5000,
  },
  {
    content: 'Welcome to react-barrage!',
    style: { color: 'red' },
    speed: 100,
    duration: 7000,
  },
];

ReactDOM.render(
  <Barrage items={barrageItems} />,
  document.getElementById('root')
);

这将在页面上渲染一个带有两个弹幕的 Barrage 组件。您可以根据需要定义更多的 BarrageItemProps 对象来添加更多的弹幕。