docs: add typesciprt support document and others

feat/excalidraw
moonrailgun 2 years ago
parent 7419df1775
commit 34bbda89cf

@ -3,7 +3,7 @@ sidebar_position: 1
title: Init Plugin Develop Env
---
Before developing a plugin, we need to create a plugin development environment. This environment can be the environment where the official source code of Tailchat is directly reused (https://github.com/msgbyte/tailchat/tree/master/client/web/plugins), It can also be an independent project
Before developing a plugin, we need to create a plugin development environment. This environment can directly reuse the plugin environment of Tailchat official source code ([https://github.com/msgbyte/tailchat/tree/master/client/web/plugins](https://github.com/msgbyte/tailchat/tree/master/client/web/plugins)), It can also be an independent project
Here we mainly teach you how to create an independent plugin development environment

@ -0,0 +1,51 @@
---
sidebar_position: 2
title: Typescript Support
---
In `Tailchat`, there are some utility functions or components shared from the core project, which you can import via `@capital/common` or `@capital/component`.
Of course, there are some type issues if quoted directly. Because at this time, the type system of typescript does not know what can be introduced and what types there are.
There may be two situations here:
## Develop in the Tailchat ontology project
You can import files in the same directory through the `paths` field of `tsconfig.json`, so that typescript can directly load the complete type system when parsing
for example:
```json
{
"compilerOptions": {
"baseUrl": "./src",
"esModuleInterop": true,
"jsx": "react",
"paths": {
"@capital/*": ["../../../src/plugin/*"],
}
}
}
```
## Develop in a standalone project
You can develop by getting Tailchat's pre-generated declaration files.
> Because the type needs to be manually rewritten then some types are still any. But it can guarantee that developers will not introduce functions that do not exist
If you are using the `tailchat create` command to create the project, the command line tool template has added the following commands for you
```json
"scripts": {
"sync:declaration": "tailchat declaration github"
},
```
usage
```bash
pnpm sync: declaration
```
This command will automatically pull the remote configuration file and write it into the `types/tailchat.d.ts` file in the current directory. If you manually created the project, you can add it to your `package.json` for subsequent use

@ -18,6 +18,8 @@ import TabItem from '@theme/TabItem';
<Tabs groupId="start">
<TabItem value="cli" label="Use the cli to quick start" default>
> First, make sure you have installed `tailchat-cli`, for command line tools, please refer to: [tailchat-cli](../cli/tailchat-cli)
Move to the project directory (can be a custom project):
```bash

@ -1,5 +1,5 @@
---
sidebar_position: 2
sidebar_position: 3
title: 开发一个主题插件
---

@ -3,7 +3,7 @@ sidebar_position: 1
title: 初始化插件开发环境
---
在开发一个插件之前,我们需要创建一个插件开发环境,这个环境可以是直接复用 Tailchat 官方源码的环境(https://github.com/msgbyte/tailchat/tree/master/client/web/plugins),也可以是一个独立的项目
在开发一个插件之前,我们需要创建一个插件开发环境,这个环境可以是直接复用 Tailchat 官方源码的插件环境([https://github.com/msgbyte/tailchat/tree/master/client/web/plugins](https://github.com/msgbyte/tailchat/tree/master/client/web/plugins)),也可以是一个独立的项目
这里主要教大家怎么创建一个独立的插件开发环境

@ -0,0 +1,51 @@
---
sidebar_position: 2
title: Typescript 类型支持
---
`Tailchat` 中拥有一些从核心项目共享出来的工具函数或者组件,你可以通过 `@capital/common``@capital/component` 来引用。
当然如果直接引用的话会有一些类型问题。因为此时typescript的类型系统是不知道能够引入什么以及有什么类型的。
在这里可能会有两种情况:
## 在Tailchat本体项目中进行开发
你可以通过`tsconfig.json`的`paths`字段来引入同一目录下的文件, 这样在解析时typescript可以直接加载完整的类型系统
如:
```json
{
"compilerOptions": {
"baseUrl": "./src",
"esModuleInterop": true,
"jsx": "react",
"paths": {
"@capital/*": ["../../../src/plugin/*"],
}
}
}
```
## 在独立项目中进行开发
你可以通过获取 Tailchat 预生成好的声明文件进行开发。
> 因为类型要手动重写因为有部分类型尚是any。但是能够保证开发者不会引入不存在的函数
如果你使用的是 `tailchat create` 命令创建的项目,命令行工具模板已为您添加了如下命令
```json
"scripts": {
"sync:declaration": "tailchat declaration github"
},
```
用法
```bash
pnpm sync:declaration
```
该命令会自动拉取远程的配置文件并写入当前目录下的 `types/tailchat.d.ts` 文件中。如果你是手动创建的项目,你可以将其添加到你的`package.json`中以方便后续使用

@ -17,6 +17,8 @@ import TabItem from '@theme/TabItem';
<Tabs groupId="start">
<TabItem value="cli" label="使用命令行工具快速创建" default>
> 首先确保你已经安装了 `tailchat-cli`, 关于命令行工具可参照: [tailchat-cli](../cli/tailchat-cli)
移动到项目目录下(可以是自定义项目):
```bash

Loading…
Cancel
Save