svelte/action

操作(Action)

¥Action

操作是创建元素时调用的函数。你可以使用此界面来键入此类操作。以下示例定义了一个仅适用于 <div> 元素的操作，并可选择接受具有默认值的参数：

¥Actions are functions that are called when an element is created. You can use this interface to type such actions. The following example defines an action that only works on <div> elements and optionally accepts a parameter which it has a default value for:

export const 
const myAction: Action<HTMLDivElement, {
    someProperty: boolean;
} | undefined>myAction: type Action = /*unresolved*/ anyAction<HTMLDivElement, { someProperty: booleansomeProperty: boolean } | undefined> = (node: anynode, 
param: {
    someProperty: boolean;
}param = { someProperty: booleansomeProperty: true }) => {
	// ...
}

Action<HTMLDivElement> 和 Action<HTMLDivElement, undefined> 都表示该操作不接受任何参数。

¥Action<HTMLDivElement> and Action<HTMLDivElement, undefined> both signal that the action accepts no parameters.

你可以从函数中返回一个具有方法 update 和 destroy 的对象，并键入它具有的附加属性和事件。有关更多详细信息，请参阅接口 ActionReturn。

¥You can return an object with methods update and destroy from the function and type which additional attributes and events it has. See interface ActionReturn for more details.

interface Action<
	Element = HTMLElement,
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

<Node extends Element>(
	...args: undefined extends Parameter
		? [node: Node, parameter?: Parameter]
		: [node: Node, parameter: Parameter]
): void | ActionReturn<Parameter, Attributes>;

ActionReturn

操作可以返回一个包含此接口中定义的两个属性的对象。两者都是可选的。

¥Actions can return an object containing the two properties defined in this interface. Both are optional.

• 更新：一个动作可以有一个参数。Svelte 将更新应用于标记后，只要该参数发生变化，就会立即调用此方法。ActionReturn 和 ActionReturn<undefined> 都表示该操作不接受任何参数。

  ¥update: An action can have a parameter. This method will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup. ActionReturn and ActionReturn<undefined> both mean that the action accepts no parameters.

• dev”。卸载元素后调用的方法

  ¥destroy: Method that is called after the element is unmounted

此外，你可以指定操作在应用元素上启用哪些附加属性和事件。这仅适用于 TypeScript 类型，在运行时无效。

¥Additionally, you can specify which additional attributes and events the action enables on the applied element. This applies to TypeScript typings only and has no effect at runtime.

示例用法：

¥Example usage:

interface Attributes {
	Attributes.newprop?: string | undefinednewprop?: string;
	'on:event': (e: CustomEvent<boolean>e: interface CustomEvent<T = any>
MDN Reference
CustomEvent<boolean>) => void;
}

export function function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes>myAction(node: HTMLElementnode: HTMLElement, parameter: Parameterparameter: type Parameter = /*unresolved*/ anyParameter): type ActionReturn = /*unresolved*/ anyActionReturn<type Parameter = /*unresolved*/ anyParameter, Attributes> {
	// ...
	return {
		update: (updatedParameter: any) => voidupdate: (updatedParameter: anyupdatedParameter) => {...},
		destroy: () => {...}
	};
}

interface ActionReturn<
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

update?: (parameter: Parameter) => void;

destroy?: () => void;