Повысьте надежность внешнего интерфейса с помощью Flow

Посмотрите на общий код:

//例1
function foo(x) {
  return x + 10
}
foo('Hello!')

//例2
function main(params){
   //fn1函数获取了一个数据
   var object = fn1(params)
   //fn2根据获数据，产生一个结果
   var result = fn2(object)

   return result
}

Пример 2 Очевидно, что этот процесс очень «черный», если вы хотите узнать, какие данные содержит объект, вы можете:

распечатать console.log(объект)
Прочтите комментарии fn1 и благословите их за правильность и полноту
Или совместите 1, 2, а потом внимательно посмотрите исходники fn1, надеюсь это не очень сложно

Помучившись вышеописанными шагами, я наконец-то могу написать какой-то код, но мне все равно нужно быть очень осторожным, потому что есть еще одна функция:fn2

При изменении кода необходимо следить за тем, чтобы результат результата не пострадал, так как же это обеспечить?

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

Динамический тип какое-то время крут, крематорий рефакторинга кодаЗнай портал:Почему вы говорите, что «динамическая типизация — это круто, крематорий рефакторинга кода»

Пришло время полностью оптимизировать эту надоедливую проблему

Ввести систему типов

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

Ничто не может гарантировать на уровне кода, что переменная, функция соответствует ожиданиям..

Следовательно, необходимо добавить систему типа для обеспечения надежности кода, и она также может передавать эффективную информацию в более позднем обслуживании.

Flow & TypeScript

Flow — инструмент статической проверки типов для JavaScript., проект с открытым исходным кодом, созданный Facebook, который существует всего два или три года, является довольно молодым проектом. Проще говоря, это решение для языка TypeScript.

Такие решения будут, потому что JavaScript — язык со слабой (динамической) типизацией данных., Слабые (динамические) типы данных, представленные в коде, переменные или константы автоматически изменяют тип данных в соответствии с назначением, и существует несколько типов типов.Это общая черта языков сценариев с дословным переводом, но это может быть плюс и большой минус.. Преимущество в том, что его легко освоить и использовать,Недостатком является то, что разработчики часто приводят к неожиданным результатам из-за неправильного типа присваивания или передачи значения.. Иногда при использовании фреймворка или библиотеки функций, если вы невнимательно читаете файл или файл написан нечетко, легко вызвать неправильное использование.

Этот недостаток становится более серьезным, когда приложение масштабируется.Когда мы разрабатываем и сотрудничаем в группах, мы обычно используем унифицированные спецификации кода, чтобы уменьшить возникновение этой проблемы, ноJS语言本身не может эффективно предотвратить эти проблемы.Строго (статически) типизированные языки надмножества JavaScript, такие как TypeScript, стали популярными.Со строгой точки зрения, на основе языка JavaScript, воссоздать другой набор строго (статически) типизированных языков, таких как Java или C#., поэтому TypeScript называет себя JavaScript-решением корпоративного уровня.

Проблемы с TypeScript

У TypeScript, естественно, есть свой рынок, но есть и очевидные проблемы:

Во-первых, разработчикам JavaScript нужно учиться дальше, контента много.
Имеет крутую кривую обучения
Код приложения, который уже используется, должен быть полностью изменен на синтаксис кода TypeScript, чтобы полноценно функционировать. Это будет важным решением для многих крупных команд разработчиков приложений, у которых уже есть внутренние кодовые базы, потому что, не пройдя путь полного рефакторинга, они не смогут получить максимальную отдачу от строго (статически) типизированных языков, например: angular2

Таким образом, многие текущие библиотеки функций или фреймворки с открытым исходным кодом не используют TypeScript напрямую в качестве языка кода.С другой стороны, TypeScript не является языком, который в определенной степени популярен. Конечно, TypeScript также является активным проектом с открытым исходным кодом.Он разрабатывается уже некоторое время.Он поддерживается Microsoft.Недавно построенный фреймворк Angular2 (во главе с Google) также использует TypeScript в качестве основного языка разработки..

Поток нового выбора

Сейчас,Flow предоставляет еще одну новую опцию, которая является строго (статически) типизированным помощником.检查工具.Функция Flow состоит в том, чтобы позволить существующему синтаксису JavaScript заранее делать объявления (определения) типов и выполнять их.自动检查, конечно же, при окончательной компиляции можно использовать и инструмент babel для удаления этих тегов.

По сравнению с TypeScript набор языков переформулирован и, наконец, скомпилирован в код JavaScript для запуска. Поток идет ненавязчивым и ненавязчивым путем.

Преимущества потока

轻И простой в освоении и использовании Его кривая обучения не такая высокая, как у TypeScript, хотя контента много, но после полдня обучения вы можете начать его использовать постепенно.
Поток — это просто检查工具Это не новый язык программирования или надмножество языков, поэтому он совместим со всеми видами существующего кода JavaScript. Если вы когда-нибудь не захотите его использовать, просто удалите отметку и вернитесь к исходному коду, не обременяя себя

so

Очевидная причина выбрать инструмент flow.js вместо строго типизированного языка TypeScript? flow.js минимально вмешивается в проект и может использоваться без дополнительной работы.

Продемонстрируйте на небольшом примере

Этот тип несоответствия очень легко получить в коде, например, в примере 1 выше:

function foo(x) {
  return x + 10
}

foo('Hello!')

Параметр x, мы ожидаем, что он будет числового типа при объявлении функции, но в итоге мы используем строковый тип при вызове функции. Каков будет окончательный результат? «Привет! 10», это потому, что знак плюс (+) в языке JavaScript также может использоваться как операция конкатенации строк в дополнение к сложению чисел. Конечно, это не тот результат, который нам нужен.

Если вы сообразительны, вы должны использовать тип в качестве отличительного имени переданного параметра.С первого взгляда легко увидеть, какой тип требуется для переданного параметра, как показано ниже:

function foo(number) {
  return number + 10
}

Если в случае с составным типом, например, тип этого параметра может быть числовым или логическим типом, как вы это напишете ясно?
Если это сложный тип объекта, как сначала определить структуру?
Кроме того, как должен быть записан возвращаемый тип функции?

Используя определение типа Flow для решения проблемы этого небольшого случая, его можно переписать в виде следующего кода:

// @flow

function foo(x: number): number {
  return x + 10
}

foo('hi')

Когда в качестве входящего значения используется нечисловое значение, появится предупреждающее сообщение от инструмента «Поток», например:

[flow] Cannot call foo with 'hi' bound to x because string 1 is incompatible with number 2. (a.getting-start.js:6:5)

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

// @flow

function foo(x: number | boolean): number | string {
  if (typeof x === 'number') {
    return x + 10
  }
  return 'x is boolean'
}

foo(1)
foo(true)
foo(null)  // 这一行有类型错误消息

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

сценарий реального случая

Вы можете подумать, что инструмент Flow можно использовать только в небольшом коде, но на самом деле это не так. Исходный код Vue использует много определения типов в flowjs:

Использование потока

flow init
// @поток или /* @поток */
Плагин IDE или проверка потока В Visual Studio Code, поскольку он имеет встроенные функции проверки TypeScript и JavaScript, если вы хотите использовать инструмент Flow для проверки типов, вам нужно добавить следующую строку в пользовательские настройки, чтобы избежать конфликтов:

"javascript.validate.enable": false

4. Плагин babel преобразует разметку Flow во время компиляции

{
  "plugins": [
    "transform-flow-strip-types"
  ]
}

Типы данных, поддерживаемые Flow

Flow поддерживает примитивные типы данных, такие как следующий список:

boolean
number
string
null
void

Псевдонимы типов и общий синтаксис

// @flow
export type Test = {
  titleOne?: string,
  titleTwo: ?string
}
var a: Test = {titleOne:"3",titleTwo:4}

var b:string = ""
//any
export type NavigationGestureDirection = 'horizontal' | 'vertical';

type T = Array<string>
var x: T = []
x["Hi"] = 2 //有Flow警告

type TT = Array<Test>
var xx:TT = []
xx = [{titleOne: '1',
  titleTwo: false}]

type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};

let val:MyObject = {foo:2,bar:false,baz:'444'};
var val1: MyObject = {foo:2,bar:false,baz:null};
var val2: MyObject = {foo:2,bar:false};
function method(val: MyObject):MyObject { return {foo:2,bar:false,baz:'2'}} 
class Foo { constructor(val: MyObject) { /* ... */ } }

Реагировать на приложение

Если вы используете спецификацию React.PropTypes внутри класса React, вы можете выполнять статическую проверку типов атрибутов в JSX:

var Hello = React.createClass ({
  propTypes: {
    name: React.PropTypes.string.isRequired
  }
  ...
});
//<Hello/> //Flow就会发现 缺少属性的错误
//<Hello name={42}/>//属性类型的错误

import * as React from 'react';

type Props = {
  foo: number,
  bar?: string,
};

function MyComponent(props: Props) {
  props.doesNotExist; // Error! You did not define a `doesNotExist` prop.

  return <div>{props.bar}</div>;
}

<MyComponent foo={42} />

Для получения более подробной информации о поддержке React посетите https://flow.org/en/docs/react/components/