Как отлаживать JavasScript и TypeScript, не затрагивая (слишком сильно) существующий код
Вход в JavaScript довольно прост, и есть много редакторов, помогающих на этапе отладки вашего кода, вы можете установить точку останова или, что еще лучше, условные точки останова, например, в Chrome.
Но иногда вы все же хотите зарегистрировать параметр определенной функции стрелки. Проблема в том, что общий подход требует переписать часть вашего кода, поскольку стрелочная функция подразумевает, что только возвращаемое значение находится внутри круглых скобок. Другие инструкции или задания сломают ваш код.
Так, например, если у меня есть такая функция, как:
const doubleValue= (x) => (2*x)
Если я хочу записать значение x перед возвратом значения, мне нужно настроить код, например:
Приведенный выше пример действительно тривиален, но как насчет чего-то более конкретного, например регистрации одного свойства объекта?
const f = ({a,b,c}) => { console.log(a); return {a,b,c});
А как насчет другого сценария, такого как функциональный компонент в React JS, в котором вы хотите проверить определенный реквизит, и вам снова приходится бороться с несколькими фигурными скобками?
Ну, я нашел менее болезненный способ, который не требует переписывания, просто правильно добавляя console.log, ну, это немного сложно, если честно.
Для приведенного выше примера:
const doubleValue= (x) => !console.log(x) && (2*x) const f1 = ({ a, b, c }) => !console.log(a) && { a, b, c };
И в сценарии React JS:
const UserComponent = (props) => ( <h1>{`Hello ${props.name} ${props.surname}`}</h1> ); const UserComponentWithLog = (props) => console.log(props) || <h1>{`Hello ${props.name} ${props.surname}`}</h1>;
Так где же магия? Чтобы обеспечить нормальный поток выполнения, вам нужно добавить что-то всегда истинное, console.log() — это пустая инструкция, которая при отрицании в js становится истинной.
В примере React JS также очень легко связать условный рендеринг с тем же трюком, не затрагивая другие части кода.
Те же примеры в Codepen и в Codesanbox
Обновление: как насчет TypeScript?
В TypeScript это же условие вызовет ошибку во время компиляции, так как void не может быть вместе с логическим значением. Но вы можете легко добавить небольшую вспомогательную функцию, например:
const cl = (o: any) => { console.log(o); return true; }
Затем вы можете использовать его внутри своего кода без изменения структуры ваших операторов:
if (cl(data) && data) { return <div>hello with data </div> }
И это также можно использовать внутри условного рендеринга.
{cl(props) && translateTitle(props.title)}