typewriter.ts 是一个 TypeScript 库，可以让您在页面中模拟打字效果。它非常易于使用，因此即使没有 TypeScript 或 JavaScript 经验的新手也可以轻松使用。
安装
要安装 typewriter.ts，请使用 npm：
npm install typewriter.ts
使用
在您的 TypeScript 文件中，import typewriter.ts库：
import Typewriter from "typewriter.ts";
接下来，您需要列出要模拟它的文本，并将其作为字符串传递给 Typewriter 的构造函数。请注意，该构造函数需要一个 DOM 元素，它将作为 typewriter 编写文本的位置。
const element = document.querySelector('h1');
const typewriter = new Typewriter(element, {
delay: 100
});
typewriter.typeString('Hello, world!')
.start();这将在您的 H1 标题中模拟打字效果。我们可以为 typewriter 定义不同的选项，例如：
const typewriter = new Typewriter(element, {
delay: 100, //每个字符之间的毫秒延迟
cursor: '_', //光标字符
loop: true, //是否重复播放
deleteSpeed: 20 //删除文本的速度
});示例
以下示例演示了如何使用 typewriter.ts 在页面中创建打字效果。让我们将HTML标记添加到一个页面：
<h1 id="typewriter-container"></h1>
接下来，我们要使用 typewriter.ts 在 H1 标题中创建打字效果。这是一个例子。
-- -------------------- ---- ------- ------ ---------- ---- ---------------- ----- --------- - ------------------------------------------------ ----- ---------- - --- --------------------- - ------ ---- ------- ---- ----- ----- ------------ -- --- ---------- --------------------- --------------- ------------ -------------------------- --------------- --------------- ------------------ ---------
这个例子首先向原来的华一标签中的内容添加了“你好，世界！”，然后暂停了一秒钟，并删除了所有文本。1000 毫秒后，它会打印 “我是一个前端开发人员。” 但是在打印 "人员" 之前，它会暂停并删除 "开发"。最后，loop=true 会让它循环播放。
结论
在这篇文章中，我们学习了如何使用 typewriter.ts 在您的网页中创建打字效果。这些效果可以为您的网站或博客带来个性和创意元素，并吸引用户的注意力。通过了解 Typewriter 的选项和使用方式，您可以创建自己的打字效果，并找到更好的方法来吸引您的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e06d4