前言
Node.js 环境下，npm 是大家常用的包管理工具，它允许我们通过安装已有的模块包快速编写出自己想要的项目，节省了开发时间和成本。而作为一名前端开发人员，我们往往需要快速实现自己的想法，这时一个好的项目脚手架就能极大地提高我们的工作效率。
在本文中，我们将深入介绍如何使用 npm 包 @3dorchard/generator-typescript-boilerplate 来快速搭建 TypeScript 项目的脚手架。
安装
安装 @3dorchard/generator-typescript-boilerplate 非常简单，使用命令行执行
npm install -g yo @3dorchard/generator-typescript-boilerplate
此时我们已经成功地把生成器安装在了本地。
使用
我们可以在项目根目录中，直接执行该生成器，它将通过问答式的对话与我们交互，最终生成一个基于 TypeScript 的项目脚手架。
yo @3dorchard/typescript-boilerplate
在交互中，我们可以回答如下问题：
- 输入项目名称；
- 输入项目描述；
- 是否使用基于 React 的 UI 库；
- 是否开启 lint；
之后生成器会为我们自动生成一份文档，包括项目的搭建方式、启动方式等。
应用程序的基本框架已经建立成功了，我们将可以看到一个项目根目录结构，如所需 TypeScript 文件、demo 文件夹、图片文件夹以及配置文件等等，就像下面这样：
-- -------------------- ---- ------- ---------------- --- ------- --- ---- - --- ------- - --- ----------- - --- ------ - --- --------- --- --------- --- ---------- --- ------------ --- --------- --- ------------- --- ---------
此外，我们还可以运行如下的命令，以调试或发布我们的应用程序：
npm start // 启动开发环境 npm run build // 打包
示例代码
我们新建一个简单的 TypeScript 应用来演示一下如何使用该生成器。
首先我们进入项目的根目录，执行以下 command：
yo @3dorchard/typescript-boilerplate
随后按照上文的步骤进行交互，最终项目文件结构如下：
-- -------------------- ---- ------- -------- - ---------- - ------------- - ------- - -------------- - - -------------- - - ----------- - - --------------- - - - ---------- - ------------ - ----------- --------------- ------------ ---------------- ------------
我们现在可以在项目 src 目录下新建 Todo.tsx：
-- -------------------- ---- -------
------ - -- ----- ---- --------
--------- --------- -
----- -------
---------- --------
-------- -- -- -----
-
----- ----- ------------------- - ------- ---------- -- -
------ -
---- ----------------------- --------
--------------- --------------- - -------------- - ------
---
------------
------
--
-
------ ------- -----
以上代码完成了一个待办事项的展示，其中 text 表示待办事项的内容，completed 表示待办事项是否完成，onClick 是个 function，在该待办事项被点击时会触发。
然后我们创建 TodoList.tsx：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ ---- ---- ---------
--------- ------------- -
------ -
----- -------
---------- --------
--- -------
----
----------- ---- ------- -- -----
-
----- --------- ----------------------- - ------- -------------- -- -
------ -
----
--------------------- -- -
----- ------------- --------- ----------- -- -------------------------- --
---
-----
--
-
------ ------- ---------
在 TodoList.tsx 代码中，我们展示了一组待办事项。传递给组件的参数：
- todos：为一个由待办事项数组组成的对象。包含带有 text、completed 和 id 属性的对象；
- toggleTodo：是一个 function，接收 id 并返回 void。
最后我们创建 AddTodo.tsx：
import * as React from 'react';
interface AddTodoProps { addTodo: (text: string) => void }
const AddTodo: React.FC<addtodoprops> = ({ addTodo }: AddTodoProps) => { const [inputValue, setInputValue] = React.useState(''); const handleInputChange = (event: React.FormEvent<htmlinputelement>) => { setInputValue(event.currentTarget.value); }; const handleAddClick = () => { addTodo(inputValue); setInputValue(''); }; return (
export default AddTodo;
addTodo 的参数为字符串 text。
最后，我们将以上组件整合到 App.tsx 中：
import * as React from 'react'; import TodoList from './components/TodoList' import AddTodo from './components/AddTodo'
interface Todo { text: string, completed: boolean, id: number, }
const App = () => { const [todos, setTodos] = React.useState<Todo[]>([]); const addTodo = (text: string) => { setTodos([...todos, { text, completed: false, id: todos.length, }]); }; const toggleTodo = (id: number) => { setTodos(todos.map(todo => { if (todo.id === id) { return { ...todo, completed: !todo.completed, }; } else { return todo; } })); }; return (
export default App;
在 App.tsx 中，我们引入了为 AddTodo.tsx、TodoListComponent.tsx 和 Todo.tsx 的组件，实现了一个简单的 TodoList 工具，它具有添加删除和标记完成这样的功能。
总结
现在，我们已经介绍了如何使用 @3dorchard/generator-typescript-boilerplate 生成器来快速构建 TypeScript 项目脚手架的方法，并且通过一个简单的示例对其进行了讲解。
希望你们能够在实际操作中，得心应手地应用上本文所介绍的相关雷技，达到一个更高的生产力。
完整项目的代码可以参考：TypeScript TodoList 示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd981e8991b448e6811