Как заставить правильно компилировать readonly свойство класса?

Question

[Alex]

Есть простой класс

По умолчанию TypeScript использует readonly только на этапе проверки типов. В сам JS свойства попадают без модификаций:

class MyClass {
  public readonly prop = 1
}

class MyClass {
    constructor() {
        Object.defineProperty(this, "prop", {
            enumerable: true,
            configurable: true, // <--
            writable: true, // <--
            value: 1
        });
    }
}

Есть ли способ заставить TypeScript компилировать readonly свойства чтобы и в рантайме их нельзя было изменить?

Answer 1

[Aetae]

А зачем тебе? Какая у тебя есть для того железобетонная причина?
А так, ты всегда можешь добавить в цепочку сборки собственноручно написанный loader который выполнит любые нужные тебе преобразования.

Comments

[Alex]

Какая у тебя есть для того железобетонная причина?

Есть массив данных. Каждый элемент в нем — экземпляр класса. Данные внутри него никогда не изменяются. Поэтому там стоит readonly и компилятор "следит" за тем, чтобы мой код никогда не пытался изменить свойства такого объекта. Тут всё ок.
Проблемы начинаются позже. Весь этот массив данных передаётся на интерфейс Vue. А Vue рекурсивно проходится по каждому свойству каждого объекта, устанавливает сеттеры/геттеры, словом выполняет различную работу для отслеживания изменений в этих объектах. Но они никогда не меняются, а значит это лишние накладные расходы. А самих таких объектов единовременно может быть очень много. Настолько, что заблокировав инициализацию реактивности получаешь заметный прирост производительности.
Вот для того оно и нужно.

Где возможно используется Object.freeze(). Но есть один класс, в котором не все поля readonly. И тут нужно использовать Object.defineProperty чтобы заблокировать изменение только нужных полей.

А TS очень плохо работает с Object.defineProperty

[Aetae]

Похоже на правду. Я своим классам, которые vue трогать не должен просто добавляю свойство _isVue и не парюсь.
Но вот ситуация, когда vue должен реактивитить объект частично, действительно бы куда проще решилась с поддержкой readonly на уровне языка. Но это идёт против typescript-овской парадигмы минимального вмешательства.

Не так уж сложно на самом деле написать кастомный loader для этого дела, используя удобный инструментарий babel(он с 7 версии может в typescript) или transform используя ttypescript. В самый край можно локально замонкипатчить сам typescript, но я бы не рекомендовал.)

P.S. Если напишешь - пульни в npm.)

[Alex]

Aetae, Ну, я посмотрел, погуглил ... Не представляю как это можно сделать

[Aetae]

Alex, ну прямо таки не представляешь: typescript не боженька же нам послал.)
Да, надо вникнуть как всё это работает под капотом, но нет там ничего запредельного. Не за пять минут конечно, но за недельку с нуля можно разобраться.

[Aetae]

Alex, появилось время, накидал пример на ts transform:

./transform.js

const ts = require('typescript');

function isReadonly(node) {
  return node.modifiers.some(
    modifier => modifier.kind === ts.SyntaxKind.ReadonlyKeyword
  )
}

function isSuperCall(node) {
  return ts.isExpressionStatement(node) && ts.isCallExpression(node.expression) && node.expression.expression.kind === ts.SyntaxKind.SuperKeyword;
}

module.exports = () => ({
  before: [ctx => {
    return sourceFile => {
      function visitor(node) {
        if (ts.isClassExpression(node) || ts.isClassDeclaration(node)) {
          const readonlyDeclarations = [];
          let constructorStatements = null;

          node.members = node.members.filter(member => {
            if (ts.isPropertyDeclaration(member) && isReadonly(member)) {
              let name = member.name;
              if (ts.isComputedPropertyName(name)) {
                return true;
              } else if (ts.isIdentifier(name)) {
                name = ts.createStringLiteral(name.escapedText);
              }

              readonlyDeclarations.push(ts.createObjectDefinePropertyCall(ts.createThis(), name, ts.createPropertyDescriptor({
                value: member.initializer || ts.createVoidZero(),
                configurable: true,
                writable: false,
                enumerable: true
              })));

              return false;
            } else if (ts.isConstructorDeclaration(member) && member.body) {
              constructorStatements = member.body.statements;
            }
            return true;
          });

          if (readonlyDeclarations.length) {
            if (constructorStatements)
              constructorStatements.splice(constructorStatements.findIndex(isSuperCall) + 1, 0, ...readonlyDeclarations);
            else node.members.push(
              ts.createConstructor(
                undefined,
                undefined,
                undefined,
                ts.createBlock(readonlyDeclarations)
              )
            );
          }
        }
        return ts.visitEachChild(node, visitor, ctx);
      }
      return ts.visitEachChild(sourceFile, visitor, ctx);
    };
  }]
});

vue.config.js

const path = require('path');
module.exports = {
  chainWebpack: config => {
    ['ts', 'tsx'].forEach(rule => config.module
      .rule(rule)
      .use('ts-loader')
      .loader('ts-loader')
      .tap(options => Object.assign(options, {
        getCustomTransformers: path.join(__dirname, './transform.js')
      })));
  }
}

Он не работает с динамическими именами методов (readonly [a+b] = 4) и не учитывает декораторы, т.к. это уже заняло бы больше времени чем хотелось бы, чтоб учесть все ситуации.)

Как отдельный loader с babel это писать было бы проще и приятнее(за счёт множества вспомогательных методов), но цена этому - повторный анализ ast.

Ещё проще и приятнее было бы сделать свой форк typescript, где поменять вот в этой строчке: writable: true на

writable: !hasModifier(property, ModifierFlags.Readonly)

(+флаг useDefineForClassFields)
Но это не наш метод.)