Svelteリファレンス

svelte/action

アクション

アクションは要素が作成されたときに呼び出される関数です。このインターフェースを使用して、このようなアクションの型を指定できます。次の例では、<div> 要素でのみ動作し、オプションでパラメータを受け取り、パラメータに既定値が設定されているアクションを定義しています

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> の両方が、アクションがパラメータを受け取らないことを示しています。

関数から update と destroy のメソッドを持つオブジェクトを返して、追加の属性とイベントの型を指定できます。詳細は ActionReturn インターフェースを参照してください。

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

アクションは、このインターフェースで定義された 2 つのプロパティを含むオブジェクトを返すことができます。どちらも省略可能です。

update: アクションにはパラメータがあります。このメソッドは、パラメータが変更されるたびに、Svelte がマークアップに更新を適用した直後に呼び出されます。ActionReturn と ActionReturn<undefined> のどちらも、アクションがパラメータを受け取らないことを意味します。
destroy: 要素がアンマウントされた後に呼び出されるメソッド

さらに、アクションによって適用される要素に対していかなる属性やイベントを有効にするか指定することもできます。これは TypeScript タイピングにのみ適用され、ランタイムに影響を与えません。

使用例

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;

GitHub でこのページを編集する

前次

svelte svelte/animate