배경.

​
경험이 거의 없는 JavaScript 근처에서 갑자기 개발에 들어갔기 때문입니다.
코드 리뷰에서 모델이 없는 것은 고통스럽다는 지적을 받아 정적 검사형을 도입했다.
다만, 모든 것이 처음이기 때문에 학습과 동시에 플로우 type의 작법을 총결하였다.
주변 환경은 다음과 같다.
Babel + webpack + flowtype + react
ES2015 기준으로 쓴 몸으로 하겠습니다.

가져오기

yarn add -D flow-bin 추가

대략적인 절차

검사할 js 파일을 선택하십시오

이 js 파일을 검사 대상으로 삼기

유형 검사 실시

수정 오류

flowtype에 사용되는 코드를 정식용 코드로 추출

3과 4를 반복해 일시적으로 오류를 모두 없애는 것을 목표로 한다.

2단계.객체 검사 방법

대상 파일의 시작 줄에 설명// @flow하여 검사 대상이 됩니다.
현재 검사 대상 파일 일람은 flow ls에서 확인할 수 있습니다
기본적으로 사용되는 관련 라이브러리 등도 검사 대상이 된다.
이로 인해 의외의 오류가 발생할 수 있으므로 검사할 필요가 없는 파일을 .flowconfigignore에 추가합니다

단계 3.유형 검사 구현

flow 자체를 설치한 경우flow 실행 가능
yarn에 flow를 추가한 경우yarn run flow로 집행(위의flow ls 등도 마찬가지)

4단계.잘못을 수정하다

서법을 모방하여 오류가 발생한 부분을 수정하다

유형 정보

사용 가능한 유형

독립형(후술)

string

number

boolean

니

니(뭐지? 이거 쓰면 플로우 맛이 없어!)

null(null이 무엇인지만 지정할 수 있음)

empty(지정해도 통과할 수 없을 것 같아)

void(반환값으로 지정)

사용자 정의 유형

규정된 유형 이외에도 독자적으로 사용을 정의할 수 있다.
이번에는 JSON 모드를 만들기 위해 독자적인 장르를 정의했다.

type MyType = {
  name: string;
  price: number;
}

Advanced 타입 같아요.

조사 중에 발견되었지만 이번에는 사용하지 않았다

// stringでもnumberでも
function foo(value: $Either<string, number>) {
  console.log(value);
}
foo(333); // OK!
foo('333'); // OK!

이것은null이나void와 합치면 아주 복잡한 행동이 됩니다

flowtype 쓰기

변수 정의

유형 정의를 추가하려면 콜론(:) 연결을 사용하여 유형을 설명합니다.

const hoge: string = '735'; // OK!
const hoge: string = 735;   // NG!

함수 정의

변수 정의

function foo(name: string) {
  console.log('hello, ' + name);
}

반환 값 정의

괄호 뒤에 콜론(:)으로 유형 연결하기

function foo(name: string): number {
  return name.length;
}
foo('350'); // OK!
foo(350);   // NG!

클래스 필드 정의

클래스 초기에 정의된
다음 코드와 같이 정의되지 않은 (홈) 을 사용하면 오류가 발생합니다

class Foo {
  name: string;

  constructor(name: string) {
    this.name = name; // OK!
    this.home = name; // NG!
  }
}
const foo = new Foo('FOOOOO');

배열 정의

배열을 정의하려면 Aray<유형>

function foo(numbers: Array<number>) {
}

만약 Aray와 같다면 하늘의 배열을 전달할 수 있을 것 같다.
단, 결과 내용은 empty이기 때문에 요소를 추가할 수 없습니다...

Predicate 정의

Lodash를 사용하는 동안 Filter에 전달된predicate를 정의할 기회가 있습니다.
이것에 관해서는any를 지정해서 스킵을 진행합니다.
(조만간 정확한 방법이 있는지 알아보고 싶다.)

참고 자료

flow형 세계 입문-SlideShare
0부터 시작하는 Flow Part.1 - console.lealog();
레드ux 응용 프로그램이 플로우를 가져올 때까지 노트. - 모르겠어요.
flowtype의 UtilityType에 대한 1-Qita
https://github.com/facebook/flow/blob/master/src/typing/type.ml
정적 검사기 flow 클래스에서 Private 필드의 의사록 - Namiking을 정의합니다.net
Lambda(Node.js)에서 Flow에 대한 정적 체크를 가져옵니다.IO