3 <html lang=
"en" class=
"no-js">
7 <meta name=
"viewport" content=
"width=device-width,initial-scale=1">
11 <link rel=
"canonical" href=
"https://docs.woltlab.com/6.0/migration/wsc55/javascript/">
14 <link rel=
"prev" href=
"../php/">
17 <link rel=
"next" href=
"../templates/">
19 <link rel=
"icon" href=
"../../../assets/default.favicon.ico">
20 <meta name=
"generator" content=
"mkdocs-1.5.2, mkdocs-material-9.1.21">
24 <title>TypeScript and JavaScript - WoltLab Suite Documentation
</title>
28 <link rel=
"stylesheet" href=
"../../../assets/stylesheets/main.eebd395e.min.css">
31 <link rel=
"stylesheet" href=
"../../../assets/stylesheets/palette.ecc896b0.min.css">
41 <link rel=
"stylesheet" href=
"../../../stylesheets/extra.css">
43 <script>__md_scope=new URL(
"../../..",location),__md_hash=e=
>[...e].reduce((e,_)=
>(e<
<5)-e+_.charCodeAt(
0),
0),__md_get=(e,_=localStorage,t=__md_scope)=
>JSON.parse(_.getItem(t.pathname+
"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=
>{try{t.setItem(a.pathname+
"."+e,JSON.stringify(_))}catch(e){}}
</script>
58 <body dir=
"ltr" data-md-color-scheme=
"default" data-md-color-primary=
"teal" data-md-color-accent=
"indigo">
62 <input class=
"md-toggle" data-md-toggle=
"drawer" type=
"checkbox" id=
"__drawer" autocomplete=
"off">
63 <input class=
"md-toggle" data-md-toggle=
"search" type=
"checkbox" id=
"__search" autocomplete=
"off">
64 <label class=
"md-overlay" for=
"__drawer"></label>
65 <div data-md-component=
"skip">
68 <a href=
"#migrating-from-woltlab-suite-55-typescript-and-javascript" class=
"md-skip">
73 <div data-md-component=
"announce">
75 <aside class=
"md-banner">
76 <div class=
"md-banner__inner md-grid md-typeset">
79 <a href=
"https://www.woltlab.com">Back to
<strong>woltlab.com
</strong></a>
87 <div data-md-color-scheme=
"default" data-md-component=
"outdated" hidden
>
96 <header class=
"md-header md-header--shadow" data-md-component=
"header">
97 <nav class=
"md-header__inner md-grid" aria-label=
"Header">
98 <a href=
"../../.." title=
"WoltLab Suite Documentation" class=
"md-header__button md-logo" aria-label=
"WoltLab Suite Documentation" data-md-component=
"logo">
100 <img src=
"../../../assets/logo.png" alt=
"logo">
103 <label class=
"md-header__button md-icon" for=
"__drawer">
104 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
106 <div class=
"md-header__title" data-md-component=
"header-title">
107 <div class=
"md-header__ellipsis">
108 <div class=
"md-header__topic">
109 <span class=
"md-ellipsis">
110 WoltLab Suite Documentation
113 <div class=
"md-header__topic" data-md-component=
"header-topic">
114 <span class=
"md-ellipsis">
116 TypeScript and JavaScript
127 <label class=
"md-header__button md-icon" for=
"__search">
128 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
130 <div class=
"md-search" data-md-component=
"search" role=
"dialog">
131 <label class=
"md-search__overlay" for=
"__search"></label>
132 <div class=
"md-search__inner" role=
"search">
133 <form class=
"md-search__form" name=
"search">
134 <input type=
"text" class=
"md-search__input" name=
"query" aria-label=
"Search" placeholder=
"Search" autocapitalize=
"off" autocorrect=
"off" autocomplete=
"off" spellcheck=
"false" data-md-component=
"search-query" required
>
135 <label class=
"md-search__icon md-icon" for=
"__search">
136 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
137 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
139 <nav class=
"md-search__options" aria-label=
"Search">
141 <button type=
"reset" class=
"md-search__icon md-icon" title=
"Clear" aria-label=
"Clear" tabindex=
"-1">
142 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
147 <div class=
"md-search__output">
148 <div class=
"md-search__scrollwrap" data-md-scrollfix
>
149 <div class=
"md-search-result" data-md-component=
"search-result">
150 <div class=
"md-search-result__meta">
153 <ol class=
"md-search-result__list" role=
"presentation"></ol>
161 <div class=
"md-header__source">
162 <a href=
"https://github.com/WoltLab/docs.woltlab.com/" title=
"Go to repository" class=
"md-source" data-md-component=
"source">
163 <div class=
"md-source__icon md-icon">
165 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d=
"M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
167 <div class=
"md-source__repository">
177 <div class=
"md-container" data-md-component=
"container">
184 <main class=
"md-main" data-md-component=
"main">
185 <div class=
"md-main__inner md-grid">
189 <div class=
"md-sidebar md-sidebar--primary" data-md-component=
"sidebar" data-md-type=
"navigation" >
190 <div class=
"md-sidebar__scrollwrap">
191 <div class=
"md-sidebar__inner">
195 <nav class=
"md-nav md-nav--primary" aria-label=
"Navigation" data-md-level=
"0">
196 <label class=
"md-nav__title" for=
"__drawer">
197 <a href=
"../../.." title=
"WoltLab Suite Documentation" class=
"md-nav__button md-logo" aria-label=
"WoltLab Suite Documentation" data-md-component=
"logo">
199 <img src=
"../../../assets/logo.png" alt=
"logo">
202 WoltLab Suite Documentation
205 <div class=
"md-nav__source">
206 <a href=
"https://github.com/WoltLab/docs.woltlab.com/" title=
"Go to repository" class=
"md-source" data-md-component=
"source">
207 <div class=
"md-source__icon md-icon">
209 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d=
"M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
211 <div class=
"md-source__repository">
217 <ul class=
"md-nav__list" data-md-scrollfix
>
226 <li class=
"md-nav__item">
227 <a href=
"../../../getting-started/" class=
"md-nav__link">
242 <li class=
"md-nav__item md-nav__item--nested">
247 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2" >
251 <label class=
"md-nav__link" for=
"__nav_2" id=
"__nav_2_label" tabindex=
"0">
253 <span class=
"md-nav__icon md-icon"></span>
256 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_2_label" aria-expanded=
"false">
257 <label class=
"md-nav__title" for=
"__nav_2">
258 <span class=
"md-nav__icon md-icon"></span>
261 <ul class=
"md-nav__list" data-md-scrollfix
>
268 <li class=
"md-nav__item">
269 <a href=
"../../../php/pages/" class=
"md-nav__link">
282 <li class=
"md-nav__item">
283 <a href=
"../../../php/database-objects/" class=
"md-nav__link">
296 <li class=
"md-nav__item">
297 <a href=
"../../../php/database-access/" class=
"md-nav__link">
310 <li class=
"md-nav__item">
311 <a href=
"../../../php/exceptions/" class=
"md-nav__link">
325 <li class=
"md-nav__item md-nav__item--nested">
330 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2_5" >
334 <label class=
"md-nav__link" for=
"__nav_2_5" id=
"__nav_2_5_label" tabindex=
"0">
336 <span class=
"md-nav__icon md-icon"></span>
339 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_2_5_label" aria-expanded=
"false">
340 <label class=
"md-nav__title" for=
"__nav_2_5">
341 <span class=
"md-nav__icon md-icon"></span>
344 <ul class=
"md-nav__list" data-md-scrollfix
>
352 <li class=
"md-nav__item md-nav__item--nested">
357 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2_5_1" >
361 <label class=
"md-nav__link" for=
"__nav_2_5_1" id=
"__nav_2_5_1_label" tabindex=
"0">
363 <span class=
"md-nav__icon md-icon"></span>
366 <nav class=
"md-nav" data-md-level=
"3" aria-labelledby=
"__nav_2_5_1_label" aria-expanded=
"false">
367 <label class=
"md-nav__title" for=
"__nav_2_5_1">
368 <span class=
"md-nav__icon md-icon"></span>
371 <ul class=
"md-nav__list" data-md-scrollfix
>
378 <li class=
"md-nav__item">
379 <a href=
"../../../php/api/caches/" class=
"md-nav__link">
392 <li class=
"md-nav__item">
393 <a href=
"../../../php/api/caches_persistent-caches/" class=
"md-nav__link">
406 <li class=
"md-nav__item">
407 <a href=
"../../../php/api/caches_runtime-caches/" class=
"md-nav__link">
427 <li class=
"md-nav__item">
428 <a href=
"../../../php/api/comments/" class=
"md-nav__link">
441 <li class=
"md-nav__item">
442 <a href=
"../../../php/api/cronjobs/" class=
"md-nav__link">
455 <li class=
"md-nav__item">
456 <a href=
"../../../php/api/events/" class=
"md-nav__link">
470 <li class=
"md-nav__item md-nav__item--nested">
475 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2_5_5" >
479 <label class=
"md-nav__link" for=
"__nav_2_5_5" id=
"__nav_2_5_5_label" tabindex=
"0">
481 <span class=
"md-nav__icon md-icon"></span>
484 <nav class=
"md-nav" data-md-level=
"3" aria-labelledby=
"__nav_2_5_5_label" aria-expanded=
"false">
485 <label class=
"md-nav__title" for=
"__nav_2_5_5">
486 <span class=
"md-nav__icon md-icon"></span>
489 <ul class=
"md-nav__list" data-md-scrollfix
>
496 <li class=
"md-nav__item">
497 <a href=
"../../../php/api/form_builder/overview/" class=
"md-nav__link">
510 <li class=
"md-nav__item">
511 <a href=
"../../../php/api/form_builder/structure/" class=
"md-nav__link">
524 <li class=
"md-nav__item">
525 <a href=
"../../../php/api/form_builder/form_fields/" class=
"md-nav__link">
538 <li class=
"md-nav__item">
539 <a href=
"../../../php/api/form_builder/validation_data/" class=
"md-nav__link">
552 <li class=
"md-nav__item">
553 <a href=
"../../../php/api/form_builder/dependencies/" class=
"md-nav__link">
573 <li class=
"md-nav__item">
574 <a href=
"../../../php/api/package_installation_plugins/" class=
"md-nav__link">
575 Package Installation Plugins
587 <li class=
"md-nav__item">
588 <a href=
"../../../php/api/user_activity_points/" class=
"md-nav__link">
601 <li class=
"md-nav__item">
602 <a href=
"../../../php/api/user_notifications/" class=
"md-nav__link">
615 <li class=
"md-nav__item">
616 <a href=
"../../../php/api/sitemaps/" class=
"md-nav__link">
636 <li class=
"md-nav__item">
637 <a href=
"../../../php/code-style/" class=
"md-nav__link">
650 <li class=
"md-nav__item">
651 <a href=
"../../../php/apps/" class=
"md-nav__link">
664 <li class=
"md-nav__item">
665 <a href=
"../../../php/gdpr/" class=
"md-nav__link">
687 <li class=
"md-nav__item md-nav__item--nested">
692 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_3" >
696 <label class=
"md-nav__link" for=
"__nav_3" id=
"__nav_3_label" tabindex=
"0">
697 Languages, Templates & CSS
698 <span class=
"md-nav__icon md-icon"></span>
701 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_3_label" aria-expanded=
"false">
702 <label class=
"md-nav__title" for=
"__nav_3">
703 <span class=
"md-nav__icon md-icon"></span>
704 Languages, Templates & CSS
706 <ul class=
"md-nav__list" data-md-scrollfix
>
713 <li class=
"md-nav__item">
714 <a href=
"../../../view/languages/" class=
"md-nav__link">
727 <li class=
"md-nav__item">
728 <a href=
"../../../view/templates/" class=
"md-nav__link">
741 <li class=
"md-nav__item">
742 <a href=
"../../../view/template-modifiers/" class=
"md-nav__link">
755 <li class=
"md-nav__item">
756 <a href=
"../../../view/template-plugins/" class=
"md-nav__link">
769 <li class=
"md-nav__item">
770 <a href=
"../../../view/css/" class=
"md-nav__link">
792 <li class=
"md-nav__item md-nav__item--nested">
797 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_4" >
801 <label class=
"md-nav__link" for=
"__nav_4" id=
"__nav_4_label" tabindex=
"0">
802 TypeScript and JavaScript API
803 <span class=
"md-nav__icon md-icon"></span>
806 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_4_label" aria-expanded=
"false">
807 <label class=
"md-nav__title" for=
"__nav_4">
808 <span class=
"md-nav__icon md-icon"></span>
809 TypeScript and JavaScript API
811 <ul class=
"md-nav__list" data-md-scrollfix
>
818 <li class=
"md-nav__item">
819 <a href=
"../../../javascript/general-usage/" class=
"md-nav__link">
832 <li class=
"md-nav__item">
833 <a href=
"../../../javascript/typescript/" class=
"md-nav__link">
847 <li class=
"md-nav__item md-nav__item--nested">
852 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_4_3" >
856 <label class=
"md-nav__link" for=
"__nav_4_3" id=
"__nav_4_3_label" tabindex=
"0">
858 <span class=
"md-nav__icon md-icon"></span>
861 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_4_3_label" aria-expanded=
"false">
862 <label class=
"md-nav__title" for=
"__nav_4_3">
863 <span class=
"md-nav__icon md-icon"></span>
866 <ul class=
"md-nav__list" data-md-scrollfix
>
873 <li class=
"md-nav__item">
874 <a href=
"../../../javascript/components_ckeditor5/" class=
"md-nav__link">
887 <li class=
"md-nav__item">
888 <a href=
"../../../javascript/components_confirmation/" class=
"md-nav__link">
901 <li class=
"md-nav__item">
902 <a href=
"../../../javascript/components_dialog/" class=
"md-nav__link">
915 <li class=
"md-nav__item">
916 <a href=
"../../../javascript/components_google_maps/" class=
"md-nav__link">
929 <li class=
"md-nav__item">
930 <a href=
"../../../javascript/components_pagination/" class=
"md-nav__link">
951 <li class=
"md-nav__item md-nav__item--nested">
956 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_4_4" >
960 <label class=
"md-nav__link" for=
"__nav_4_4" id=
"__nav_4_4_label" tabindex=
"0">
962 <span class=
"md-nav__icon md-icon"></span>
965 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_4_4_label" aria-expanded=
"false">
966 <label class=
"md-nav__title" for=
"__nav_4_4">
967 <span class=
"md-nav__icon md-icon"></span>
970 <ul class=
"md-nav__list" data-md-scrollfix
>
977 <li class=
"md-nav__item">
978 <a href=
"../../../javascript/new-api_writing-a-module/" class=
"md-nav__link">
991 <li class=
"md-nav__item">
992 <a href=
"../../../javascript/new-api_core/" class=
"md-nav__link">
1005 <li class=
"md-nav__item">
1006 <a href=
"../../../javascript/new-api_dom/" class=
"md-nav__link">
1019 <li class=
"md-nav__item">
1020 <a href=
"../../../javascript/new-api_events/" class=
"md-nav__link">
1033 <li class=
"md-nav__item">
1034 <a href=
"../../../javascript/new-api_ajax/" class=
"md-nav__link">
1047 <li class=
"md-nav__item">
1048 <a href=
"../../../javascript/new-api_dialogs/" class=
"md-nav__link">
1061 <li class=
"md-nav__item">
1062 <a href=
"../../../javascript/new-api_browser/" class=
"md-nav__link">
1063 Browser and Screen Sizes
1075 <li class=
"md-nav__item">
1076 <a href=
"../../../javascript/new-api_ui/" class=
"md-nav__link">
1096 <li class=
"md-nav__item">
1097 <a href=
"../../../javascript/legacy-api/" class=
"md-nav__link">
1110 <li class=
"md-nav__item">
1111 <a href=
"../../../javascript/code-snippets/" class=
"md-nav__link">
1133 <li class=
"md-nav__item md-nav__item--nested">
1138 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_5" >
1142 <label class=
"md-nav__link" for=
"__nav_5" id=
"__nav_5_label" tabindex=
"0">
1144 <span class=
"md-nav__icon md-icon"></span>
1147 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_5_label" aria-expanded=
"false">
1148 <label class=
"md-nav__title" for=
"__nav_5">
1149 <span class=
"md-nav__icon md-icon"></span>
1152 <ul class=
"md-nav__list" data-md-scrollfix
>
1159 <li class=
"md-nav__item">
1160 <a href=
"../../../package/package-xml/" class=
"md-nav__link">
1174 <li class=
"md-nav__item md-nav__item--nested">
1179 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_5_2" >
1183 <label class=
"md-nav__link" for=
"__nav_5_2" id=
"__nav_5_2_label" tabindex=
"0">
1185 <span class=
"md-nav__icon md-icon"></span>
1188 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_5_2_label" aria-expanded=
"false">
1189 <label class=
"md-nav__title" for=
"__nav_5_2">
1190 <span class=
"md-nav__icon md-icon"></span>
1193 <ul class=
"md-nav__list" data-md-scrollfix
>
1200 <li class=
"md-nav__item">
1201 <a href=
"../../../package/pip/" class=
"md-nav__link">
1214 <li class=
"md-nav__item">
1215 <a href=
"../../../package/pip/acl-option/" class=
"md-nav__link">
1228 <li class=
"md-nav__item">
1229 <a href=
"../../../package/pip/acp-menu/" class=
"md-nav__link">
1242 <li class=
"md-nav__item">
1243 <a href=
"../../../package/pip/acp-search-provider/" class=
"md-nav__link">
1256 <li class=
"md-nav__item">
1257 <a href=
"../../../package/pip/acp-template/" class=
"md-nav__link">
1270 <li class=
"md-nav__item">
1271 <a href=
"../../../package/pip/acp-template-delete/" class=
"md-nav__link">
1284 <li class=
"md-nav__item">
1285 <a href=
"../../../package/pip/bbcode/" class=
"md-nav__link">
1298 <li class=
"md-nav__item">
1299 <a href=
"../../../package/pip/box/" class=
"md-nav__link">
1312 <li class=
"md-nav__item">
1313 <a href=
"../../../package/pip/clipboard-action/" class=
"md-nav__link">
1326 <li class=
"md-nav__item">
1327 <a href=
"../../../package/pip/core-object/" class=
"md-nav__link">
1340 <li class=
"md-nav__item">
1341 <a href=
"../../../package/pip/cronjob/" class=
"md-nav__link">
1354 <li class=
"md-nav__item">
1355 <a href=
"../../../package/pip/database/" class=
"md-nav__link">
1368 <li class=
"md-nav__item">
1369 <a href=
"../../../package/pip/event-listener/" class=
"md-nav__link">
1382 <li class=
"md-nav__item">
1383 <a href=
"../../../package/pip/file/" class=
"md-nav__link">
1396 <li class=
"md-nav__item">
1397 <a href=
"../../../package/pip/file-delete/" class=
"md-nav__link">
1410 <li class=
"md-nav__item">
1411 <a href=
"../../../package/pip/language/" class=
"md-nav__link">
1424 <li class=
"md-nav__item">
1425 <a href=
"../../../package/pip/media-provider/" class=
"md-nav__link">
1438 <li class=
"md-nav__item">
1439 <a href=
"../../../package/pip/menu/" class=
"md-nav__link">
1452 <li class=
"md-nav__item">
1453 <a href=
"../../../package/pip/menu-item/" class=
"md-nav__link">
1466 <li class=
"md-nav__item">
1467 <a href=
"../../../package/pip/object-type/" class=
"md-nav__link">
1480 <li class=
"md-nav__item">
1481 <a href=
"../../../package/pip/object-type-definition/" class=
"md-nav__link">
1482 objectTypeDefinition
1494 <li class=
"md-nav__item">
1495 <a href=
"../../../package/pip/option/" class=
"md-nav__link">
1508 <li class=
"md-nav__item">
1509 <a href=
"../../../package/pip/page/" class=
"md-nav__link">
1522 <li class=
"md-nav__item">
1523 <a href=
"../../../package/pip/pip/" class=
"md-nav__link">
1536 <li class=
"md-nav__item">
1537 <a href=
"../../../package/pip/script/" class=
"md-nav__link">
1550 <li class=
"md-nav__item">
1551 <a href=
"../../../package/pip/smiley/" class=
"md-nav__link">
1564 <li class=
"md-nav__item">
1565 <a href=
"../../../package/pip/sql/" class=
"md-nav__link">
1578 <li class=
"md-nav__item">
1579 <a href=
"../../../package/pip/style/" class=
"md-nav__link">
1592 <li class=
"md-nav__item">
1593 <a href=
"../../../package/pip/template/" class=
"md-nav__link">
1606 <li class=
"md-nav__item">
1607 <a href=
"../../../package/pip/template-delete/" class=
"md-nav__link">
1620 <li class=
"md-nav__item">
1621 <a href=
"../../../package/pip/template-listener/" class=
"md-nav__link">
1634 <li class=
"md-nav__item">
1635 <a href=
"../../../package/pip/user-group-option/" class=
"md-nav__link">
1648 <li class=
"md-nav__item">
1649 <a href=
"../../../package/pip/user-menu/" class=
"md-nav__link">
1662 <li class=
"md-nav__item">
1663 <a href=
"../../../package/pip/user-notification-event/" class=
"md-nav__link">
1664 userNotificationEvent
1676 <li class=
"md-nav__item">
1677 <a href=
"../../../package/pip/user-option/" class=
"md-nav__link">
1690 <li class=
"md-nav__item">
1691 <a href=
"../../../package/pip/user-profile-menu/" class=
"md-nav__link">
1711 <li class=
"md-nav__item">
1712 <a href=
"../../../package/database-php-api/" class=
"md-nav__link">
1736 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
1741 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6" checked
>
1745 <label class=
"md-nav__link" for=
"__nav_6" id=
"__nav_6_label" tabindex=
"0">
1747 <span class=
"md-nav__icon md-icon"></span>
1750 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_6_label" aria-expanded=
"true">
1751 <label class=
"md-nav__title" for=
"__nav_6">
1752 <span class=
"md-nav__icon md-icon"></span>
1755 <ul class=
"md-nav__list" data-md-scrollfix
>
1765 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
1770 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_1" checked
>
1774 <label class=
"md-nav__link" for=
"__nav_6_1" id=
"__nav_6_1_label" tabindex=
"0">
1775 From WoltLab Suite
5.5
1776 <span class=
"md-nav__icon md-icon"></span>
1779 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_1_label" aria-expanded=
"true">
1780 <label class=
"md-nav__title" for=
"__nav_6_1">
1781 <span class=
"md-nav__icon md-icon"></span>
1782 From WoltLab Suite
5.5
1784 <ul class=
"md-nav__list" data-md-scrollfix
>
1791 <li class=
"md-nav__item">
1792 <a href=
"../php/" class=
"md-nav__link">
1807 <li class=
"md-nav__item md-nav__item--active">
1809 <input class=
"md-nav__toggle md-toggle" type=
"checkbox" id=
"__toc">
1815 <label class=
"md-nav__link md-nav__link--active" for=
"__toc">
1816 TypeScript and JavaScript
1817 <span class=
"md-nav__icon md-icon"></span>
1820 <a href=
"./" class=
"md-nav__link md-nav__link--active">
1821 TypeScript and JavaScript
1826 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
1833 <label class=
"md-nav__title" for=
"__toc">
1834 <span class=
"md-nav__icon md-icon"></span>
1837 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
1839 <li class=
"md-nav__item">
1840 <a href=
"#minimum-requirements" class=
"md-nav__link">
1841 Minimum requirements
1846 <li class=
"md-nav__item">
1847 <a href=
"#subscribe-button-wcfuserobjectwatchsubscribe" class=
"md-nav__link">
1848 Subscribe Button (WCF.User.ObjectWatch.Subscribe)
1853 <li class=
"md-nav__item">
1854 <a href=
"#support-for-legacy-inheritance" class=
"md-nav__link">
1855 Support for Legacy Inheritance
1874 <li class=
"md-nav__item">
1875 <a href=
"../templates/" class=
"md-nav__link">
1888 <li class=
"md-nav__item">
1889 <a href=
"../icons/" class=
"md-nav__link">
1902 <li class=
"md-nav__item">
1903 <a href=
"../dialogs/" class=
"md-nav__link">
1916 <li class=
"md-nav__item">
1917 <a href=
"../libraries/" class=
"md-nav__link">
1918 Third Party Libraries
1930 <li class=
"md-nav__item">
1931 <a href=
"../deprecations_removals/" class=
"md-nav__link">
1932 Deprecations and Removals
1952 <li class=
"md-nav__item md-nav__item--nested">
1957 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_2" >
1961 <label class=
"md-nav__link" for=
"__nav_6_2" id=
"__nav_6_2_label" tabindex=
"0">
1962 From WoltLab Suite
5.4
1963 <span class=
"md-nav__icon md-icon"></span>
1966 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_2_label" aria-expanded=
"false">
1967 <label class=
"md-nav__title" for=
"__nav_6_2">
1968 <span class=
"md-nav__icon md-icon"></span>
1969 From WoltLab Suite
5.4
1971 <ul class=
"md-nav__list" data-md-scrollfix
>
1978 <li class=
"md-nav__item">
1979 <a href=
"../../wsc54/php/" class=
"md-nav__link">
1992 <li class=
"md-nav__item">
1993 <a href=
"../../wsc54/javascript/" class=
"md-nav__link">
1994 TypeScript and JavaScript
2006 <li class=
"md-nav__item">
2007 <a href=
"../../wsc54/templates/" class=
"md-nav__link">
2020 <li class=
"md-nav__item">
2021 <a href=
"../../wsc54/libraries/" class=
"md-nav__link">
2022 Third Party Libraries
2034 <li class=
"md-nav__item">
2035 <a href=
"../../wsc54/deprecations_removals/" class=
"md-nav__link">
2036 Deprecations and Removals
2056 <li class=
"md-nav__item md-nav__item--nested">
2061 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_3" >
2065 <label class=
"md-nav__link" for=
"__nav_6_3" id=
"__nav_6_3_label" tabindex=
"0">
2066 From WoltLab Suite
5.3
2067 <span class=
"md-nav__icon md-icon"></span>
2070 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_3_label" aria-expanded=
"false">
2071 <label class=
"md-nav__title" for=
"__nav_6_3">
2072 <span class=
"md-nav__icon md-icon"></span>
2073 From WoltLab Suite
5.3
2075 <ul class=
"md-nav__list" data-md-scrollfix
>
2082 <li class=
"md-nav__item">
2083 <a href=
"../../wsc53/php/" class=
"md-nav__link">
2096 <li class=
"md-nav__item">
2097 <a href=
"../../wsc53/session/" class=
"md-nav__link">
2098 Session Handling and Authentication
2110 <li class=
"md-nav__item">
2111 <a href=
"../../wsc53/javascript/" class=
"md-nav__link">
2112 TypeScript and JavaScript
2124 <li class=
"md-nav__item">
2125 <a href=
"../../wsc53/templates/" class=
"md-nav__link">
2138 <li class=
"md-nav__item">
2139 <a href=
"../../wsc53/libraries/" class=
"md-nav__link">
2140 Third Party Libraries
2160 <li class=
"md-nav__item md-nav__item--nested">
2165 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_4" >
2169 <label class=
"md-nav__link" for=
"__nav_6_4" id=
"__nav_6_4_label" tabindex=
"0">
2170 From WoltLab Suite
5.2
2171 <span class=
"md-nav__icon md-icon"></span>
2174 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_4_label" aria-expanded=
"false">
2175 <label class=
"md-nav__title" for=
"__nav_6_4">
2176 <span class=
"md-nav__icon md-icon"></span>
2177 From WoltLab Suite
5.2
2179 <ul class=
"md-nav__list" data-md-scrollfix
>
2186 <li class=
"md-nav__item">
2187 <a href=
"../../wsc52/php/" class=
"md-nav__link">
2200 <li class=
"md-nav__item">
2201 <a href=
"../../wsc52/templates/" class=
"md-nav__link">
2202 Templates and Languages
2214 <li class=
"md-nav__item">
2215 <a href=
"../../wsc52/libraries/" class=
"md-nav__link">
2216 Third Party Libraries
2236 <li class=
"md-nav__item md-nav__item--nested">
2241 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_5" >
2245 <label class=
"md-nav__link" for=
"__nav_6_5" id=
"__nav_6_5_label" tabindex=
"0">
2246 From WoltLab Suite
3.1
2247 <span class=
"md-nav__icon md-icon"></span>
2250 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_5_label" aria-expanded=
"false">
2251 <label class=
"md-nav__title" for=
"__nav_6_5">
2252 <span class=
"md-nav__icon md-icon"></span>
2253 From WoltLab Suite
3.1
2255 <ul class=
"md-nav__list" data-md-scrollfix
>
2262 <li class=
"md-nav__item">
2263 <a href=
"../../wsc31/php/" class=
"md-nav__link">
2284 <li class=
"md-nav__item md-nav__item--nested">
2289 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_6" >
2293 <label class=
"md-nav__link" for=
"__nav_6_6" id=
"__nav_6_6_label" tabindex=
"0">
2294 From WoltLab Suite
3.0
2295 <span class=
"md-nav__icon md-icon"></span>
2298 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_6_label" aria-expanded=
"false">
2299 <label class=
"md-nav__title" for=
"__nav_6_6">
2300 <span class=
"md-nav__icon md-icon"></span>
2301 From WoltLab Suite
3.0
2303 <ul class=
"md-nav__list" data-md-scrollfix
>
2310 <li class=
"md-nav__item">
2311 <a href=
"../../wsc30/php/" class=
"md-nav__link">
2324 <li class=
"md-nav__item">
2325 <a href=
"../../wsc30/javascript/" class=
"md-nav__link">
2338 <li class=
"md-nav__item">
2339 <a href=
"../../wsc30/templates/" class=
"md-nav__link">
2352 <li class=
"md-nav__item">
2353 <a href=
"../../wsc30/css/" class=
"md-nav__link">
2366 <li class=
"md-nav__item">
2367 <a href=
"../../wsc30/package/" class=
"md-nav__link">
2388 <li class=
"md-nav__item md-nav__item--nested">
2393 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_7" >
2397 <label class=
"md-nav__link" for=
"__nav_6_7" id=
"__nav_6_7_label" tabindex=
"0">
2399 <span class=
"md-nav__icon md-icon"></span>
2402 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_7_label" aria-expanded=
"false">
2403 <label class=
"md-nav__title" for=
"__nav_6_7">
2404 <span class=
"md-nav__icon md-icon"></span>
2407 <ul class=
"md-nav__list" data-md-scrollfix
>
2414 <li class=
"md-nav__item">
2415 <a href=
"../../wcf21/php/" class=
"md-nav__link">
2428 <li class=
"md-nav__item">
2429 <a href=
"../../wcf21/templates/" class=
"md-nav__link">
2442 <li class=
"md-nav__item">
2443 <a href=
"../../wcf21/css/" class=
"md-nav__link">
2456 <li class=
"md-nav__item">
2457 <a href=
"../../wcf21/package/" class=
"md-nav__link">
2486 <li class=
"md-nav__item md-nav__item--nested">
2491 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_7" >
2495 <label class=
"md-nav__link" for=
"__nav_7" id=
"__nav_7_label" tabindex=
"0">
2497 <span class=
"md-nav__icon md-icon"></span>
2500 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_7_label" aria-expanded=
"false">
2501 <label class=
"md-nav__title" for=
"__nav_7">
2502 <span class=
"md-nav__icon md-icon"></span>
2505 <ul class=
"md-nav__list" data-md-scrollfix
>
2513 <li class=
"md-nav__item md-nav__item--nested">
2518 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_7_1" >
2522 <label class=
"md-nav__link" for=
"__nav_7_1" id=
"__nav_7_1_label" tabindex=
"0">
2524 <span class=
"md-nav__icon md-icon"></span>
2527 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_7_1_label" aria-expanded=
"false">
2528 <label class=
"md-nav__title" for=
"__nav_7_1">
2529 <span class=
"md-nav__icon md-icon"></span>
2532 <ul class=
"md-nav__list" data-md-scrollfix
>
2539 <li class=
"md-nav__item">
2540 <a href=
"../../../tutorial/series/overview/" class=
"md-nav__link">
2553 <li class=
"md-nav__item">
2554 <a href=
"../../../tutorial/series/part_1/" class=
"md-nav__link">
2567 <li class=
"md-nav__item">
2568 <a href=
"../../../tutorial/series/part_2/" class=
"md-nav__link">
2581 <li class=
"md-nav__item">
2582 <a href=
"../../../tutorial/series/part_3/" class=
"md-nav__link">
2595 <li class=
"md-nav__item">
2596 <a href=
"../../../tutorial/series/part_4/" class=
"md-nav__link">
2609 <li class=
"md-nav__item">
2610 <a href=
"../../../tutorial/series/part_5/" class=
"md-nav__link">
2623 <li class=
"md-nav__item">
2624 <a href=
"../../../tutorial/series/part_6/" class=
"md-nav__link">
2653 <div class=
"md-sidebar md-sidebar--secondary" data-md-component=
"sidebar" data-md-type=
"toc" >
2654 <div class=
"md-sidebar__scrollwrap">
2655 <div class=
"md-sidebar__inner">
2658 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
2665 <label class=
"md-nav__title" for=
"__toc">
2666 <span class=
"md-nav__icon md-icon"></span>
2669 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
2671 <li class=
"md-nav__item">
2672 <a href=
"#minimum-requirements" class=
"md-nav__link">
2673 Minimum requirements
2678 <li class=
"md-nav__item">
2679 <a href=
"#subscribe-button-wcfuserobjectwatchsubscribe" class=
"md-nav__link">
2680 Subscribe Button (WCF.User.ObjectWatch.Subscribe)
2685 <li class=
"md-nav__item">
2686 <a href=
"#support-for-legacy-inheritance" class=
"md-nav__link">
2687 Support for Legacy Inheritance
2701 <div class=
"md-content" data-md-component=
"content">
2702 <article class=
"md-content__inner md-typeset">
2710 <h1 id=
"migrating-from-woltlab-suite-55-typescript-and-javascript">Migrating from WoltLab Suite
5.5 - TypeScript and JavaScript
<a class=
"headerlink" href=
"#migrating-from-woltlab-suite-55-typescript-and-javascript" title=
"Permanent link">#
</a></h1>
2711 <h2 id=
"minimum-requirements">Minimum requirements
<a class=
"headerlink" href=
"#minimum-requirements" title=
"Permanent link">#
</a></h2>
2712 <p>The ECMAScript target version has been increased to ES2022 from es2017.
</p>
2713 <h2 id=
"subscribe-button-wcfuserobjectwatchsubscribe">Subscribe Button (WCF.User.ObjectWatch.Subscribe)
<a class=
"headerlink" href=
"#subscribe-button-wcfuserobjectwatchsubscribe" title=
"Permanent link">#
</a></h2>
2714 <p>We have replaced the old jQuery-based
<code>WCF.User.ObjectWatch.Subscribe
</code> with a more modern replacement
<code>WoltLabSuite/Core/Ui/User/ObjectWatch
</code>.
</p>
2715 <p>The new implementation comes with a ready-to-use template (
<code>__userObjectWatchButton
</code>) for use within
<code>contentInteractionButtons
</code>:
2716 <div class=
"highlight"><table class=
"highlighttable"><tr><td class=
"linenos"><div class=
"linenodiv"><pre><span></span><span class=
"normal">1</span></pre></div></td><td class=
"code"><div><pre><span></span><code><span class=
"cp">{
</span><span class=
"nf">include
</span> <span class=
"na">file
</span><span class=
"o">=
</span><span class=
"s1">'__userObjectWatchButton
'</span> <span class=
"na">isSubscribed
</span><span class=
"o">=
</span><span class=
"nv">$isSubscribed
</span> <span class=
"na">objectType
</span><span class=
"o">=
</span><span class=
"s1">'foo.bar
'</span> <span class=
"na">objectID
</span><span class=
"o">=
</span><span class=
"nv">$id
</span><span class=
"cp">}
</span>
2717 </code></pre></div></td></tr></table></div></p>
2718 <p>See
<a href=
"https://github.com/WoltLab/WCF/pull/4962/">WoltLab/WCF#
4962</a> for details.
</p>
2719 <h2 id=
"support-for-legacy-inheritance">Support for Legacy Inheritance
<a class=
"headerlink" href=
"#support-for-legacy-inheritance" title=
"Permanent link">#
</a></h2>
2720 <p>The migration from JavaScript to TypeScript was a breaking change because the previous prototype based inheritance was incompatible with ES6 classes.
2721 <code>Core.enableLegacyInheritance()
</code> was added in an effort to emulate the previous behavior to aid in the migration process.
</p>
2722 <p>This workaround was unstable at best and was designed as a temporary solution only.
2723 <a href=
"https://github.com/WoltLab/WCF/pull/5041">WoltLab/WCF#
5041</a> removed the legacy inheritance, requiring all depending implementations to migrate to ES6 classes.
</p>
2726 <div class=
"md-source-file">
2748 <footer class=
"md-footer">
2750 <div class=
"md-footer-meta md-typeset">
2751 <div class=
"md-footer-meta__inner md-grid">
2752 <div class=
"md-copyright">
2754 <div class=
"md-copyright__highlight">
2755 Copyright ©
2020 WoltLab GmbH
2760 <a href=
"https://squidfunk.github.io/mkdocs-material/" target=
"_blank" rel=
"noopener">
2766 <div class=
"md-copyright">
2767 <a href=
"https://www.woltlab.com/legal-notice/">Legal Notice
</a>
2768 <a href=
"https://www.woltlab.com/privacy-policy/">Privacy Policy
</a>
2776 <div class=
"md-dialog" data-md-component=
"dialog">
2777 <div class=
"md-dialog__inner md-typeset"></div>
2780 <script id=
"__config" type=
"application/json">{
"base":
"../../..",
"features": [
"navigation.tracking"],
"search":
"../../../assets/javascripts/workers/search.74e28a9f.min.js",
"translations": {
"clipboard.copied":
"Copied to clipboard",
"clipboard.copy":
"Copy to clipboard",
"search.result.more.one":
"1 more on this page",
"search.result.more.other":
"# more on this page",
"search.result.none":
"No matching documents",
"search.result.one":
"1 matching document",
"search.result.other":
"# matching documents",
"search.result.placeholder":
"Type to start searching",
"search.result.term.missing":
"Missing",
"select.version":
"Select version"},
"version": {
"provider":
"mike"}}
</script>
2783 <script src=
"../../../assets/javascripts/bundle.220ee61c.min.js"></script>