Skip to content
Effect 文档

安装

要求：

  • TypeScript 5.4 或更新版本。
  • 支持 Node.js、Deno 和 Bun。

自动安装

为了快速设置新的 Effect 应用程序，我们推荐使用 create-effect-app，它将为您处理所有配置。要创建新项目，请运行：

Terminal window
npx create-effect-app@latest

完成提示后，create-effect-app 将创建一个以您的项目名称命名的文件夹，并安装所有必需的依赖项。

有关 CLI 的更多详细信息，请参阅 Create Effect App 文档。

手动安装

Node.js

按照以下步骤为 Node.js 创建新的 Effect 项目：

  1. 创建项目目录并进入：

    Terminal window
    mkdir hello-effect
    cd hello-effect

  2. 初始化 TypeScript 项目：

    Terminal window
    npm init -y
    npm install --save-dev typescript

    这将创建一个 package.json 文件，为您的 TypeScript 项目提供初始设置。

  3. 初始化 TypeScript：

    Terminal window
    npx tsc --init

    运行此命令时，它将生成一个包含 TypeScript 配置选项的 tsconfig.json 文件。需要考虑的最重要选项之一是 strict 标志。

    确保打开 tsconfig.json 文件并验证 strict 选项的值设置为 true。

    {
      "compilerOptions": {
        "strict": true
      }
    }

  4. 安装必要的依赖包：

    Terminal window
    npm install effect

    此包将为您的 Effect 项目提供基础功能。

让我们编写并运行一个简单的程序来确保一切设置正确。

在您的终端中，执行以下命令：

Terminal window
mkdir src
touch src/index.ts

Open the index.ts file and add the following code:

src/index.ts
import { Effect, Console } from "effect"


const program = Console.log("Hello, World!")


Effect.runSync(program)

Run the index.ts file. Here we are using tsx to run the index.ts file in the terminal:

Terminal window
npx tsx src/index.ts

You should see the message "Hello, World!" printed. This confirms that the program is working correctly.

Deno

Follow these steps to create a new Effect project for Deno:

  1. Create a project directory and navigate into it:

    Terminal window
    mkdir hello-effect
    cd hello-effect

  2. Initialize Deno:

    Terminal window
    deno init

  3. Install the necessary package as dependency:

    Terminal window
    deno add npm:effect

    This package will provide the foundational functionality for your Effect project.

Let’s write and run a simple program to ensure that everything is set up correctly.

Open the main.ts file and replace the content with the following code:

main.ts
import { Effect, Console } from "effect"


const program = Console.log("Hello, World!")


Effect.runSync(program)

Run the main.ts file:

Terminal window
deno run main.ts

You should see the message "Hello, World!" printed. This confirms that the program is working correctly.

Bun

Follow these steps to create a new Effect project for Bun:

  1. Create a project directory and navigate into it:

    Terminal window
    mkdir hello-effect
    cd hello-effect

  2. Initialize Bun:

    Terminal window
    bun init

    When running this command, it will generate a tsconfig.json file that contains configuration options for TypeScript. One of the most important options to consider is the strict flag.

    Make sure to open the tsconfig.json file and verify that the value of the strict option is set to true.

    {
      "compilerOptions": {
        "strict": true
      }
    }

  3. Install the necessary package as dependency:

    Terminal window
    bun add effect

    This package will provide the foundational functionality for your Effect project.

Let’s write and run a simple program to ensure that everything is set up correctly.

Open the index.ts file and replace the content with the following code:

index.ts
import { Effect, Console } from "effect"


const program = Console.log("Hello, World!")


Effect.runSync(program)

Run the index.ts file:

Terminal window
bun index.ts

You should see the message "Hello, World!" printed. This confirms that the program is working correctly.

Vite + React

Follow these steps to create a new Effect project for Vite + React:

  1. Scaffold your Vite project, open your terminal and run the following command:

    Terminal window
    # npm 6.x
    npm create vite@latest hello-effect --template react-ts
    # npm 7+, extra double-dash is needed
    npm create vite@latest hello-effect -- --template react-ts

    This command will create a new Vite project with React and TypeScript template.

  2. Navigate into the newly created project directory and install the required packages:

    Terminal window
    cd hello-effect
    npm install

    Once the packages are installed, open the tsconfig.json file and ensure that the value of the strict option is set to true.

    {
      "compilerOptions": {
        "strict": true
      }
    }

  3. Install the necessary package as dependency:

    Terminal window
    npm install effect

    This package will provide the foundational functionality for your Effect project.

Now, let’s write and run a simple program to ensure that everything is set up correctly.

Open the src/App.tsx file and replace its content with the following code:

src/App.tsx
import { useState, useMemo, useCallback } from "react"
import reactLogo from "./assets/react.svg"
import viteLogo from "/vite.svg"
import "./App.css"
import { Effect } from "effect"


function App() {
  const [count, setCount] = useState(0)


  const task = useMemo(
    () => Effect.sync(() => setCount((current) => current + 1)),
    [setCount]
  )


  const increment = useCallback(() => Effect.runSync(task), [task])


  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={increment}>count is {count}</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}


export default App

After making these changes, start the development server by running the following command:

Terminal window
npm run dev

Then, press o to open the application in your browser.

When you click the button, you should see the counter increment. This confirms that the program is working correctly.