Советы и рекомендации по работе с оболочкой: Typescript

Машинопись и вещи, о которых я бы хотел знать

Машинопись и DOM

Когда вы начнете использовать и изучать TypeScript, становится очевидным, что он очень тесно связан со средой браузера. Допустим, вам нужен элемент на странице, и вы использовали базовый document.querySelector («желаемый элемент»)
TypeScript покажет вам ошибку, если вы неправильно написали элемент на странице !!

Но как же он распознает вашу ошибку в названии элемента на странице? Причина в файле lib.dom.d.ts. Этот файл является частью библиотеки TypeScript и в основном описывает все, что происходит в браузере. Это может быть объект, функция или события, которые он их распознает. Он не идеален, поскольку работает только в основном секторе элементов, но я сам неоднократно попадал в опечатки.

Поиск заканчивается?

Действительно ли метод document.querySelector(...) возвращает нам объект? Если элемент, соответствующий селектору, отсутствует на странице, но вместо него найден объект, функция возвращает null.

По умолчанию средство проверки типов рассматривает null и undefined как присваиваемые типы. Вы можете переопределить значение по умолчанию и быть более безопасным в своем подходе, ограничив поведение, добавляя проверки к tsconfig.json:

{
    "compilerOptions": {
        "strictNullChecks": true
    }
}

TypeScript теперь будет жаловаться, если вы попытаетесь получить доступ к свойству объекта, который, возможно, имеет значение NULL, и вам придется «заверить» его в существовании объекта. Вы можете сделать это, обернув эту часть условием if (textEl) {...}. Вы не всегда можете найти то, что ищете, но инструменты есть.

Переход на оболочку

Часто, когда у вас есть кодовая база, которую вы хотите перенести на TypeScript, одной из проблем является соблюдение правил TSLint. Что вы можете сделать, так это отредактировать все эти файлы, добавив

// tslint:disable

Только тогда, когда разработчик работает с устаревшим файлом, он начнет с удаления этого одного комментария и исправит все ошибки линтинга только в этом файле.

Что касается добавления фактических типов к старому коду JavaScript, вы часто можете обойтись без него. вывод типа в TypeScript позаботится об этом, и только если у вас есть неприятный код, например которая присваивает разные типы значений одной и той же переменной, может возникнуть проблема. Если рефакторинг не является тривиальной проблемой, вы можете решить использовать any

Но на самом деле используйте это в крайнем случае. TypeScript и любой другой несовместимы друг с другом.

Дополнительные ограничения

Иногда TypeScript не может определить тип. Чаще всего это параметр функции:

function fn(param) {
    console.log(param);
}

Внутри ему нужно присвоить некоторый тип параметру, поэтому он присваивает любой. Поскольку мы хотим ограничить его до минимума, обычно рекомендуется ограничить это поведение другим tsconfig.json параметром:

{
    "compilerOptions": {
        "noImplicitAny": true
    }
}

К сожалению, мы не можем указать, что это требует явного ввода в типе возвращаемого значения функции. TypeScript не будет следить за тем, что я возвращаю, или даже за тем, что я возвращаю из этой функции. Чтобы быть более точным, он будет выводить возвращаемое значение из того, что вы вернули или не вернули.

К счастью, здесь помогает TSLint. С помощью правила typedef вы можете сделать требуемые типы возвращаемых данных:

{
    "rules": {
        "typedef": [
            true,
            "call-signature"
        ]
    }
}

TypeScript - это наша оболочка для нашей черепахи. Часто ошибки в нашем коде, будь то опечатки или неправильная пунктуация, могут нарушить работу нашего приложения. Лучше перестраховаться, чем сожалеть. Есть много других советов и приемов, которые можно сделать с помощью TypeScript, но я оставлю это для следующего блога.

Источники

Https://www.sitepoint.com› 10-essential-typescript-tips-…