Машинописный текст, вероятно, является способом начать работу.

JavaScript

Заявление Моюцзяна в статье: Гарантируется оригинальность содержания, распространяются и передаются только технические галантерейные товары, никакой рекламы и хвастовства.

Предисловие: Typescript — противоречивая технология во внешнем интерфейсе, некоторые люди ее любят, а некоторые ненавидят. В этой статье я не буду советовать вам использовать или не использовать TS, а буду стоять с объективной точки зрения и обсуждать более существенные проблемы, решаемые технологией TS (т.е. проблемы типа JS) и их решения (TS — это только их). Я надеюсь, что после прочтения этой статьи вы сможете превзойти сам ТС,Узнайте больше о природе и ознакомьтесь с другими решениями. После этого, использовать его или нет, решать вам.

Для задач и решений типа JavaScript я начал с моего личного понимания и использовал карту мозга, чтобы организовать следующее:

В следующих текстах я сосредоточусь на этой карте мозга.Если вам интересно продолжить чтение, я надеюсь, что вы сможете остаться на этой карте еще немного времени.

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

  • Причина и следствие проблемы типа JS
  • Решение: Оригинал
  • Решение: поток
  • Решение: Машинопись

Первый: причина и следствие проблемы с типом JavaScript

На приведенном выше графике я представил свое причинно-следственное утверждение о проблемах с типами JavaScript. То есть, поскольку JavaScript являетсяДинамически слабо типизированные языки, что напрямую приводит к плохой надежности программ, написанных на JavaScript, и склонно к проблемам с типами. Вот несколько типов проблем, которые часто встречаются в повседневной разработке, а затем сосредоточьтесь на объяснении того, что такое динамический язык со слабой типизацией и почему это приводит к большому количеству проблем с типами в JS.

Ну, сначала давайте посмотрим на какую-то проблему.

1. Распространенные типы проблем

ошибка выполнения

let fn;	// or import fn from 'module'
fn()	// TypeError: fn is not a function

неточный

// 例一
let age = 10;
let inputIncrement = '1';
age = age + inputIncrement;	// 不报错，结果为"101"，操蛋吧。

Возможные ошибки

let fn;
const callback = fn;	// 不会立即出现问题，等callback被触发的时候才炸雷，操蛋吧。

Для ясности я упростил перечисленные выше ошибки. Следует понимать, что затронутые проблемы — это только верхушка айсберга ошибок типов, с которыми мы сталкиваемся в нашей повседневной разработке, и которые опытные разработчики могут лучше понять.

В основном,JavaScript более склонен к небрежному коду. Мы не обязательно считаем, что поиск и обработка этих небрежных кодов на этапах отладки и тестирования тратят впустую много нашего ненужного времени, особенно для студентов, которые слабы в обнаружении ошибок.Иногда трудно найти проблемы и обнаружить, что они небрежный Когда это вызвано, я не могу дождаться, чтобы ударить себя. Хуже того, некоторые операционные неточности и потенциальные ошибки не обнаруживаются до этапа ввода в эксплуатацию!

Люди, которые писали на других типах языков, должны быть более осведомлены о том, что программы JavaScript, написанные сами по себе, более склонны к низкоуровневым ошибкам, чем программы, написанные на других типах языков, особенно когда объем кода увеличивается.

После приведенного выше обсуждения мы увидели несколько распространенных проблем с типами, то есть мы столкнулись с последствиями проблем с типами JavaScript.Далее давайте обсудим злые причины проблем с типами JavaScript, то есть сам язык JavaScript является динамическим слабым типом. язык. Прежде чем объяснять их причинно-следственную связь, давайте сначала пройдемПротивопоставление строго типизированных и слабо типизированных языковчтобы понять особенности слабо типизированного языка JavaScript,Сравнение динамически типизированных и статически типизированных языковчтобы понять особенности динамически типизированного языка JavaScript.

2. Языки со строгой типизацией и языки со слабой типизацией

В отрасли не существует авторитетной концепции сравнения силы языковых типов, поэтому в Интернете существует множество различных мнений. Но главное в том, что строго типизированные языки имеют более сильные ограничения типов, в то время как слабо типизированные языки имеют мало ограничений. Вот мое понимание строго типизированных и слабо типизированных языков:

  • строго типизированный язык: Когда программа запущена, тип переменнойПроизвольные неявные преобразования типов не допускаются.(безопасность типа).
  • слабо типизированный язык: Когда программа запущена, тип переменнойРазрешает произвольные неявные преобразования типов(тип небезопасный).

Рекомендуется поискать определения понятий строго типизированного языка и слабо типизированного языка в энциклопедии Baidu, а затем сравнить объяснение языка строгого и слабого типов, которое я упомянул выше, чтобы углубить собственное понимание их.

Вот простейший случай понимания кода:

// 强类型语言：java、python等
100 - '50' //报语法错误

// 弱类型语言：javaScript
100 - '50' // 不报错误，结果为50

Здесь мы не будем обсуждать проблемы, которые приносит JavaScript как слабо типизированный язык, давайте сначала разберемся в различиях между языками со статической типизацией и языками с динамической типизацией.

3. Статически типизированные языки и динамически типизированные языки

статически типизированный язык: Во время разработки программы, после объявления типа переменной,Никакие дальнейшие модификации не допускаются(тип проверки во время компиляции).

язык с динамической типизацией: Во время разработки программы, после объявления типа переменной,может измениться в любое время(Тип проверки во время выполнения).

Вот простейший случай понимания кода:

// 静态类型语言：java
int a = 100;
a = '100';  // 报语法错误

// 动态类型语言:javascript
var a = 100;
a = '100';  // typeof(a) 输出 'string'

Здесь мы не будем обсуждать проблемы, вызванные JavaScript как динамически типизируемым языком, а вместе со слабой типизацией проанализируем причинно-следственную связь между JavaScript как динамически слабо типизированным языком и проблемами типов JavaScript.

4. Динамическая слабая типизация и причины проблем с типами

  • JavaScript динамически типизирован: это означает, что на этапе разработки программы исходный код, разработанный разработчиком, напрямую передается интерпретатору для выполнения без проверки типов.

  • JavaScript слабо типизирован: это означает, что когда программа сталкивается с проблемой типа, вызванной разработчиком во время выполнения, программасамоутверждениеПри попытке выполнить неявное преобразование типов будет сообщено об ошибке, если преобразование не может быть выполнено, и результат операции будет возвращен, если преобразование прошло успешно (иногда это не тот рабочий результат, который ожидал разработчик, т.е.неточный).

  • JavaScript является как динамически типизированным, так и слабо типизированным, что заставляет программы JavaScript работатьсклонен к ошибкам типа,скрыть возможные ошибки,так же какОшибки, не распознанные как ошибки, приводят к неточному запуску программы..

программа собственной разработкисклонен к ошибкам типа,скрыть возможные ошибки,так же какОшибки не распознаются как ошибки и выполняются неточноХороший разработчик абсолютно не может согласиться с существованием этих вещей. Мы не можем изменить язык динамического JavaScript - это слабо напечатанный язык, этот установленный факт, типы проблем, которые JavaScript, как мы это решаем?

Чтобы решить проблему типов, мы, естественно, будем думать, что можем избежать ее с помощью проверки типов. Как показано на приведенной выше диаграмме, в зависимости от момента времени проверки мы можем разделить проверку типа на два типа: проверка на этапе выполнения и проверка на этапе разработки. Среди них оригинальное решение относится к проверке типов на этапе выполнения, а решения Flow и Typescript относятся к проверке типов на этапе разработки.

Flow и Typescript опоздали, и оба они реализованы путем определения набора расширенного синтаксиса JavaScript, а затем добавления уровня аспектов компиляции. Оригинальное решение - это решение с древних времен.Нет нового синтаксиса и не нужно добавлять аспекты.Он простой и грубый и используется чаще всего.Давайте обсудим,как оригинальное решение решает проблему типа JS.

Второе: оригинальное решение проблемы типа JS

1. Дело

Я чувствую, что первоначальное решение, о котором я говорил, было слишком много, что заставило людей выглядеть немного сбитыми с толку.На самом деле, это было очень неприятно. Вернем его к исходной форме с помощью примера кода:

Дело 1:

const obj = {};
// obj.foo();	// 不做处理出现问题，error
if(obj.foo){	// 防错处理避免问题
	obj.foo();
} else {
  // xxx or
}

Случай 2:

// 不做处理
function sum (a, b) {
   return a + b
}
// 防错处理
function sum (a, b) {
    if (!(typeOf(a)=== 'int' && typeOf(b)=== 'int')){
        throw new TypeError('arguments should be number');
    } 
   return a + b
}

2. Анализ преимуществ и недостатков

На приведенных выше примерах мы проанализируем преимущества и недостатки этого подхода.

преимущество:

  • Без дополнительных затрат на обучение
  • Не вводится дополнительный процесс компиляции
  • просто и понятно

недостаток:

  • большие затраты на разработку: Помимо написания основной логики кода, разработчикам также необходимо тратить больше времени и энергии на написание кода, который позволяет избежать проблем с типами, особенно при его инкапсуляции для использования другими.
  • решить только часть проблемы: мы не можем рассмотреть и сделать суждение о типе до того, как будет использована каждая переменная, поэтому это решение может решить только часть ошибки типа.
  • Большое количество кодов суждения о типе: это решение требует написания в программе большого количества операторов кода для оценки типа, чтобы избежать ошибок, которые могут легко привести к таким проблемам, как большой размер кода, недостаточный основной бизнес-код и недостаточная ясность кода.
  • проблемы с производительностью во время выполнения: эти типы логических кодов суждений необходимо запускать на этапе выполнения, что определенно потребует больше времени выполнения.

Третье: решения для потока

Друзья инструмента Flow могут его не знать, поэтому давайте кратко познакомимся с ним.

Flow — это инструмент статической проверки типов для JavaScript. Он определяет набор ограничений типов и правил проверки, а также предоставляет набор процедур и команд проверки. После проверки и передачи исходного кодаМожно скомпилировать набор кода JavaScript со строгим типом и без объявления типа Flow., чтобы решить проблему типа JavaScript.

Решение Flow — это решение для проверки типов на этапе разработки Мы можем разделить его процесс проверки типов на три этапа, а именно:

  • объявление типаЭтап: Соответствующие объявления типов для переменных в соответствии с правилами.
  • проверка типовФаза: Используйте средство проверки, чтобы выполнить проверку соответствия на основе объявления типа переменной и значения переменной. Его можно условно разделить на три типа: проверка во время кодирования (подсказки по коду), проверка после кодирования и проверка во время компиляции.
  • компиляция типовЭтап: используйте компилятор, чтобы удалить объявления типов для переменных и получить код JavaScript, критичный к типу.

Теория та же, что и выше, давайте попрактикуемся и разделим ее на три этапа: объявление типа, проверка типов и компиляция типов.

1. Добавьте объявление типа на этапе объявления типа

Добавление объявления типа состоит из трех частей, а именноВведите аннотации в свой собственный код, введите аннотации в API (окно/узел) в среде и введите аннотации в сторонних библиотеках (представленные библиотеки).. При нехватке аннотаций типов в файлах API и сторонних библиотек в окружении мы обычно вводимфайл объявления типаспособ решить.

Вот пример добавления объявлений типов в ваш собственный код:

// @flow
// test.js
function sum(m: number, n: number): number {
	return m + n
}

2. Этап проверки типов для проверки типов

Проверка типа делится наПроверки во время кода (подсказки по коду), проверки после кода, проверки во время компиляцииВ-третьих, инструмент проверки во время кодирования обычно является подключаемым модулем, предоставляемым IDE (скорее всего, он также официально разработан), а инструмент проверки после кодирования и компиляции обычно является официальным инструментом проверки.

Инструмент проверки кодирования Flow здесь обсуждаться не будет.Ниже приводится краткое описание рабочего процесса проверки Flow после кодирования:

В нашей повседневной разработке для удобства мы обычно делаем только два вида проверки во время кодирования и проверки во время компиляции Фактически, проверка во время компиляции означает, что существует аспект проверки после кодирования перед компиляцией. Нет необходимости связываться с концепциями, о которых я говорю.

  • Установите проточный бункер для проверки инструмента
yarn add flow-bin --dev
  • Напишите информацию о конфигурации проверки: .flowconifg
# 生成.flowconifg配置文件，在这里可以配置检查源、检查规则、检查输出位置等
yarn flow init
  • Чтение конфигурации для выполнения проверок
yarn flow
  • результат проверки вывода на консоль
  • Изменить тип ошибки в коде в соответствии с отчетом о проверке

3. Введите тип компилятора Compiler Phases

Аннотации типов в исходном коде Flow не соответствуют синтаксису JavaScript. Если они будут переданы непосредственно интерпретатору JavaScript для выполнения, будет сообщено об ошибке. Поэтому нам необходимо скомпилировать исходный код, чтобы удалить объявление типа.Получите код JavaScript, который может быть выполнен интерпретатором JavaScript для решения проблемы типа JavaScript..

Существует два варианта удаления аннотаций типа Flow в файлах JavaScript:

  • Используйте библиотеку инструментов flow-remove-types для удаления
# 安装
yarn add flow-remove-types --dev
# 移除:命令参数，编译输入代码的位置、编译输出代码的位置
yarn flow-remove-types src -d dist
  • Удалено с помощью плагина Babel @babel/preset-flow
# 安装
npm install --save-dev @babel/core @babel/cli @babel/preset-flow
# 配置：.babelrc文件配置preset-flow插件
{
  "presets": ["@babel/preset-flow"]
}
# 转换：命令参数，编译输入代码的位置、编译输出代码的位置
yarn babel src -d dist

Четыре: SpaceStry Solution

Язык Typescript может быть неизвестен некоторым друзьям, поэтому позвольте мне сначала кратко представить его.

Typescript, как и Flow, — это средство проверки типов для JavaScript. Разница в том, что Typescript более мощный и более полнофункциональный, а также более экологически безопасный. Синтаксически Typescript является надмножеством Javascript (система типов + ES6).

Для понимания машинописного текста я хотел бы сказать еще несколько слов. Typescript — это язык, который нельзя сравнивать с такими языками, как C, C++, Java и JavaScript, его можно рассматривать только как аспектный язык JavaScript из-за его типов переменных и правил синтаксиса.Включает только этапы разработки и компиляции, после компиляцииКонвертируется в JavaScript и передается интерпретатору JavaScript для выполнения. Это также означает, что когда мы изучаем типы и синтаксис текстосписки,Совершенно необязательно обращать внимание на механизм его работы и правила хранения., но просто нужно понять, как это отображается на типы и синтаксис JavaScript.

Использование Typescript для завершения проверки типов, как и Flow, также можно разделить на три этапа: объявление типа, проверка типов и компиляция типов. Ниже приведены конкретные примеры.

Поток и машинопись находятся в конкурентных отношениях.Лично говоря, поток вниз, а машинопись вверх.

1. Добавьте объявление типа на этапе объявления типа

Как и в Flow, объявление типа в Typescript также состоит из трех частей, а именно:Введите аннотации в свой собственный код, введите аннотации в API (окно/узел) в среде и введите аннотации в сторонних библиотеках (представленные библиотеки).. При нехватке аннотаций типов в файлах API и сторонних библиотек в окружении мы обычно вводимфайл объявления типаспособ решить.

Вот пример добавления объявлений типов в ваш собственный код:

// test.ts
function sum(m: number, n: number): number {
	return m + n
}

2. Этап проверки типов для проверки типов

Как упоминалось ранее, проверка типов делится наПроверки во время кода (подсказки по коду), проверки после кода, проверки во время компиляциитри. Typescript можно классифицировать как статический язык, а IDE обладает сильной способностью воспринимать его код, поэтому IDE может предоставить разработчикам мощные подсказки кода, подсказки об ошибках и другие функции. Большинство проблем с типом уже можно проверить на этапе проверки кодирования (обратите внимание, что машинописный текст является прогрессивным), поэтому ниже мы не будем обсуждать основные методы проверки после кодирования.

Если вы заинтересованы, вы можете проверить официальную документацию самостоятельно.

3. Компиляция типов на этапе компиляции типов

Как и Flow, исходный код Typescript нельзя напрямую передать интерпретатору JavaScript для выполнения. Нам нужно использовать официальный инструмент tscСкомпилируйте машинописный код в код JavaScript, чтобы решить проблему типов Javascript..

Далее кратко описывается рабочий процесс компиляции Typescript:

  • установить машинопись
yarn add typescript --dev
  • Напишите конфигурацию компиляции: tsconfig.json
# 1.生成.flowconifg配置文件，在这里可以配置检查源、检查规则、检查输出位置等
yarn tsc --init

# 2.修改tyscript配置文件，主要涉及到编译输入文件位置、输出文件位置、编译规则等
# xxx
  • Прочтите конфигурацию сборки, чтобы выполнить сборку
yarn tsc
  • После завершения компиляции код JavaScript успешно получен, в случае неудачи код модифицируется в соответствии с сообщением об ошибке компиляции.

4. Много говорить

Вот краткое упоминание о системе типов Typescript,Документация официального сайта TypescriptЕго виды делятся на следующие категории:

Типы имея в виду Пример
basic Types базовый тип число, Кортеж, Пустота...
Interfaces Тип интерфейса { x : 'xx' } / interface xxx { x 'xx'}
Unions and Intersection Types Союз, тип пересечения object | null
Literal Types Тип поля 1 | 2 | 3
Enums тип перечисления Enum x { x '1' }
Functions тип функции function (m: number): Void { // xxx,no return }
Classes тип класса Полный класс Java, контроль доступа, одиночное наследование и множественная реализация
Generics Дженерики Универсальные значения: Array, универсальные функции, универсальные классы

Как новый статический язык, система типов Typescript вобрала в себя множество отличных типов из других языков, особенно из Java. На самом деле, для этих различных типов ограничений мы также можемЭквивалентно использованию исходного решения для добавления в код суждения о типе для решения проблемы с типом..

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

5. Окончательное резюме

Проблемы со шрифтами в JavaScript — это дерьмо, typescript отлично подходит для решения проблем со шрифтами, но оригинальное решение неплохое, у каждого есть свои сильные и слабые стороны.

В конце статьи написать не просто, не забудьте поставить лайк и подписаться. Момода (✿◡‿◡)

Категории