Utilize ?. operator and set TypeScript target

ui/app.ts

@@ -69,7 +69,7 @@ function pagify(pageName, page): RouteResolver {
     render: () => {
       const lastRenderTimestamp = Date.now();
       let p;
-      if (state && state.error) p = m(errorPage.component, state);
+      if (state?.error) p = m(errorPage.component, state);
       else p = m(contextifyComponent(page.component), state);
       const attrs = {};
       attrs["page"] = pageName;

ui/components.ts

@@ -116,7 +116,7 @@ function applyContext(vnode, parentContext): void {
       vnodeContext.set(vnode, vc);
       vnode.attrs = Object.assign({}, vc, vnode.attrs);
     }
-    if (vnode.children && vnode.children.length)
+    if (vnode.children?.length)
       for (const c of vnode.children) applyContext(c, vc);
   }
 }
@@ -133,7 +133,7 @@ export function contextifyComponent(component: ComponentTypes): ComponentTypes {
         applyContext(res, context);
         return res;
       };
-    } else if (!component.prototype || !component.prototype.view) {
+    } else if (!component.prototype?.view) {
       c = (initialNode) => {
         const state = (component as ClosureComponent)(initialNode);
         const view = state.view;

ui/components/all-parameters.ts

@@ -85,7 +85,7 @@ const component: ClosureComponent = (): Component => {
         let c = 0;
         for (const k of keys) {
           const p = device[k];
-          const str = p.value && p.value[0] ? `${k} ${p.value[0]}` : k;
+          const str = p.value?.[0] ? `${k} ${p.value[0]}` : k;
           if (re && !re.test(str)) continue;
           ++c;
           if (count < limit) filteredKeys.push(k);

ui/components/parameter.ts

@@ -38,7 +38,7 @@ const evaluateParam = memoize((exp, obj, now: number) => {
       ) {
         let v = null;
         const p = obj[e[i][1]];
-        if (p && p.value) {
+        if (p?.value) {
           v = p.value[0];
           timestamp = Math.min(timestamp, p.valueTimestamp);
         }
@@ -58,7 +58,7 @@ const evaluateParam = memoize((exp, obj, now: number) => {
     value = exp;
   } else if (exp[0] === "PARAM") {
     const p = obj[exp[1]];
-    if (p && p.value) {
+    if (p?.value) {
       timestamp = p.valueTimestamp;
       value = p.value[0];
       parameter = exp[1];
@@ -84,7 +84,7 @@ const component: ClosureComponent = (): Component => {
       if (value == null) return null;
 
       let edit;
-      if (device[parameter] && device[parameter].writable) {
+      if (device[parameter]?.writable) {
         edit = m(
           "button",
           {

ui/files-page.ts

@@ -207,7 +207,7 @@ export const component: ClosureComponent = (): Component => {
                         actionHandler: async (action, obj) => {
                           if (action !== "save")
                             throw new Error("Undefined action");
-                          const file = obj["file"] ? obj["file"][0] : null;
+                          const file = obj["file"]?.[0];
 
                           // nginx strips out headers with dot, so replace with dash
                           const headers = {

ui/presets-page.ts

@@ -331,7 +331,7 @@ export const component: ClosureComponent = (): Component => {
                 overlay.open(
                   cb,
                   () =>
-                    !(comp.state && comp.state["current"]["modified"]) ||
+                    !comp.state?.["current"]["modified"] ||
                     confirm("You have unsaved changes. Close anyway?")
                 );
               },

ui/smart-query.ts

@@ -145,7 +145,7 @@ function queryTag(tag: string): Expression {
 
 export function getTip(resource: string, label: string): string {
   let tip;
-  if (resources[resource] && resources[resource][label]) {
+  if (resources[resource]?.[label]) {
     const param = resources[resource][label];
     const types =
       resource === "devices" ? param["type"] : param["type"].split(",");