js 형식 검사 도구 flow 의 기본 사용

글 목록

Flow 의 사용

Flow 설치

Flow 의 명령 행 도구 사용

코드 에 Flow 형식 추가

Flow 의 유형

Flow 는 JavaScript 코드 의 정적 형식 검사 기 입 니 다.그것 은 당신 이 업무 효율 을 높이 는 데 도움 을 줄 수 있 습 니 다.코드 를 더 빠 르 고 스마트 하 며 자신 감 있 고 대규모 로 만 듭 니 다.
Flow 사용
Flow 설치
Flow 설치

npm i flow-bin -D

바벨 설치

npm i babel-cli babel-preset-flow

Flow 명령 행 도구 사용
package. json 에 해당 하 는 scripts 를 추가 하여 flow 명령 을 실행 하고 src / 디 렉 터 리 에 있 는 js 코드 를 변환 하 며 lib / 디 렉 터 리 에 출력 합 니 다.

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "flow": "flow",
    "init": "flow init"
  }
}

새 파일 .babelrc, babel 프로필

{
    "presets": [
        "flow"
    ]
}

초기 화 명령 을 먼저 실행 하면 프로젝트 디 렉 터 리 는. flow config 파일 을 생산 합 니 다. 변환 이 필요 하지 않 은 파일 을 설정 할 수 있 습 니 다.

npm run init

npm 로 flow 명령 실행

npm flow

명령 행 도 구 는 거의 사용 되 지 않 습 니 다. 편리 성 이 낮 기 때문에 가장 흔히 볼 수 있 는 사용 방식 은 IDE 플러그 인 (VSCode 등) 입 니 다.
VSCode 플러그 인 이름: Flow Language Support
코드 에 Flow 형식 추가
코드 에 유형 을 추가 하 는 방법 은 두 가지 가 있 습 니 다.
주석 형: 이런 방식 은 코드 에 아무런 영향 을 주지 않 습 니 다. JS 코드 는 정상적으로 실 행 될 수 있 지만 코드 구 조 는 주석 내용 의 존재 로 인해 가 독성 을 낮 출 수 있 습 니 다.코드 형 (추천): 이 방식 은 JS 코드 구 조 를 바 꿀 수 있 으 며, babel 과 함께 사용 해 야 정상적으로 작 동 할 수 있 습 니 다.
설명 형 프레젠테이션:

// @flow
function test(a /*: number*/, b /*: number*/) /*: number*/{
  return a + b;
}
//   test   a,b     number,      number

코드 데모:

// @flow
function test(a: number, b: number): number{
  return a + b;
}
//   test   a,b     number,      number

어떤 형식 이 든 파일 에 // @flow 표 시 를 추가 해 야 배경 에 있 는 flow 프로 세 스 가 이 파일 에 대해 유형 검 사 를 할 수 있 습 니 다. / @ flow 표 시 는 표 시 를 적 게 하지 않 고 /* @flow */ 로 쓸 수 있 습 니 다.
모든 파일 에 표 시 를 추가 하지 않 으 려 면 flow 에서 파일 형식 검 사 를 하려 면 flow 를 시작 할 때 명령 을 사용 해 야 합 니 다.

flowchat check --all

Flow 의 종류
유형
설명 하 다.
number
숫자, NaN, Infinity 는 모두 number 형식의 데이터 이다.
string
문자열
null
null 만 null 타 입 이에 요.
void
undefined 가 flow 에서 의 유형 은 void 입 니 다.
Array
배열 형식, 정의 할 때 Array 라 는 형식 을 사용 해 야 합 니 다. T 는 지정 한 유형 으로 특정한 유형의 데이터 로 구 성 된 배열 을 말 합 니 다.
Object
대상 유형 은 대상 이 비교적 자 유 롭 기 때문에 대상 유형 을 규정 할 때 여러 가지 표기 법 이 있다.
any
임의의 유형 을 나타 내 는데, 이 유형 은 가능 한 한 적 게 사용 하지만, 때로는 매우 유용 하 다!
Functions
함수 형식
Maybe
Maybe 형식 은 null 과 undefined 두 가지 잠재 적 인 유형 을 포함 하 는 값 을 설명 할 수 있 습 니 다.
조작
또는 동작 은 여러 가지 가능 한 형식 으로 변 수 를 설정 할 수 있 습 니 다. 1
유형 추정
flow 는 어떤 데이터 의 유형 을 스스로 추정 하려 고 시도 할 것 이다.