갑자기 자바스크립트:flow type을 0에서 하나의 파일이 완성될 때까지 시작합니다

7841 단어 flowtypeJavaScript

배경.



경험이 거의 없는 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

    좋은 웹페이지 즐겨찾기