Typescript를 위한 입력된 이벤트 시스템
15482 단어 webdevjavascripttypescriptbeginners
개발하는 동안 저는 일반적으로 다음과 같이 빠르게 작성되는 고전적인 온/오프 스타일 이벤트 시스템이 필요했습니다.
몇 줄의 코드. 그러나 이번에는 전체 이벤트 시스템 유형을 보호할 수 있는지 궁금했습니다.
Typescript 유형으로.
코드 받기
전체 58줄의 코드를 a github gist에 저장했습니다. 코드가 도용될 경우 책임지지 않음을 알려드립니다.
의도한 대로 작동하지 않거나 어딘가에서 오류가 발생합니다. 자신의 책임하에 사용하십시오.
사용 방법
켜기/끄기 스타일 이벤트 이미터로 작업한 적이 있다면 이 시스템의 사용법은 간단할 것입니다. 나는 여전히 가고있다
간단히 설명하기 위해.
기본 온/오프 스타일 이벤트 시스템 작동 방식
이에 대해 이미 알고 있다면 다음 헤드라인으로 건너뛸 수 있습니다. :)
이벤트 시스템의 경우 일반적으로 코드에 이벤트를 트리거하지 않고 이벤트 발생을 브로드캐스트하는 지점이 있습니다.
누군가가 실제로 듣고 있는지 알고 있습니다.
코드의 다른 부분은 기존 이벤트를 구독하고 이에 반응할 수 있습니다. 웹사이트의 DOM에서 이벤트로 작업한 적이 있다면
정확히 이 패턴:
// Adding a callback function to "change" events on a text box.
// The callback is called every time when a change event happens.
document.getElementById("myCoolTextbox").addEventListener("change", function(event){
// ...
});
따라서 일부 이벤트에 대한 무한 구독자(리스너)가 있을 수 있으며 이벤트가 트리거될 때마다 모든 구독자에게 알림이 전송됩니다.
이벤트 유형 준비
모든 기존 이벤트와 해당 데이터 페이로드를 정의하는 TypeScript
interface
를 생성할 수 있도록 이벤트 시스템을 설계했습니다.예를 들어 이벤트 시스템이 있는 가상의 비디오 플레이어 앱을 만들고 싶다면 다음 이벤트를 정의할 수 있습니다.
interface AppEvents {
load: {
filename: string;
format: string;
totalTimeMs: number;
},
update: {
currentTimeMs: number;
},
play: void,
pause: void,
stop: void
}
따라서 사용자가 파일을 열 때
load
이벤트, 파일을 재생하는 동안 계속해서 발생하는 update
이벤트가 있습니다.및
play
, pause
및 stop
이벤트는 사용자 상호 작용 시 트리거됩니다.이벤트 시스템 생성 및 사용
시스템의 모든 이벤트를 정의하는 TypeScript 인터페이스를 사용하여 실제로 코드로 시스템을 생성할 수 있습니다.
// appEvents.ts
import createEventSystem from "./eventSystem.ts";
interface AppEvents {
load: {
filename: string;
format: string;
totalTimeMs: number;
},
update: {
currentTimeMs: number;
},
play: void,
pause: void,
stop: void
}
const eventSystem = createEventSystem<AppEvents>();
export default eventSystem;
이제 시스템은 우리 코드의 어디에서나 사용할 수 있습니다. Typescript는 알려진 이벤트만 트리거되도록 합니다.
예상 페이로드를 정확히 수신해야 합니다.
import appEvents from "./appEvents.ts";
import { loadAndParseAudioFile } from "./audioLoader.ts";
export async function loadFile(filename){
const {
filename,
format,
totalTimeMs
} = await loadAndParseAudioFile(filename);
appEvents.trigger("load", {filename, format, totalTimeMs});
}
애플리케이션의 다른 부분에서 코드는 정의된 이벤트를 구독할 수 있습니다.
// logger.ts
import appEvents from "./appEvents.ts";
appEvents.on("load", (payload) => {
console.log(`You opened the file ${payload.filename} with a length of ${payload.totalTimeMs} milliseconds.`);
});
이벤트 듣기 중지
이벤트 수신에서 분리하려면
.off()
메서드를 호출하고 정확히 동일한 콜백 함수를오프 핸들러:
function handler(data){
console.log("An update happened!", data);
}
eventSystem.on("update", handler);
// And somewhere else:
eventSystem.off("update", handler);
유사한 코드를 가진 다른 콜백 함수가 아니라 동일한 콜백 함수여야 한다는 점에 유의하십시오.
이것은 작동하지 않습니다!
eventSystem.on("update", (data) => {
console.log("An update happened!", data);
});
eventSystem.off("update", (data) => {
console.log("An update happened!", data);
});
// These are TWO separate functions, therefore the "off" call did not work.
ENUM을 이벤트 이름으로 사용
타입스크립트 인터페이스는 필드 이름의 형식에 신경쓰지 않기 때문에 ENUM을 자유롭게 정의하여
IDE에서 더 쉽게 검색할 수 있도록 기존 이벤트 이름:
export enum EventNames {
LOAD,
UPDATE,
PLAY,
PAUSE,
STOP
};
interface AppEvents {
[EventNames.LOAD]: {
filename: string;
format: string;
totalTimeMs: number;
},
[EventNames.UPDATE]: {
currentTimeMs: number;
},
[EventNames.PLAY]: void,
[EventNames.PAUSE]: void,
[EventNames.STOP]: void
}
이렇게 하면 다음과 같이 트리거 및 구독을 호출할 수 있습니다.
eventSystem.trigger(EventNames.PLAY);
eventSystem.on(EventNames.UPDATE, ({currentTime}) => {
console.log(`Current time: ${currentTime}`);
});
-------------
This post was published on my [personal blog](https://parastudios.de/), first.
You should follow me on dev.to for more tips like this. Click the follow button in the sidebar! 🚀
Reference
이 문제에 관하여(Typescript를 위한 입력된 이벤트 시스템), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/paratron/a-typed-event-system-for-typescript-25pb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)