JavaScript 확장: 흐름 정적 유형을 사용하여 오류를 확인하고 보고하는 방법

이 기사의 내용은 javascript의 확장: 흐름 정적 유형을 사용하여 오류를 확인하고 보고하는 방법에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. .

js 언어는 Java, C 시리즈 및 기타 언어와 매우 다릅니다. 즉, js 언어는 약한 유형의 언어입니다. js 언어의 이러한 기능은 사람들이 js가 매우 자유롭고 필수 제약 사항이 없다고 생각하게 만들 수 있습니다. 그러나 대규모 프로젝트를 접할 때 js의 이 기능은 팀의 코드를 매우 통제하기 어렵게 만들기 때문에 더욱 문제가 될 것입니다. 이러한 이유는 TypeScript가 탄생하게 된 매우 중요한 이유이기도 합니다.

그러나 실제로 많은 개발자는 여전히 프로젝트 개발에 js를 사용하는 것을 선호하므로 Facebook은 js 언어가 정적 유형 검사 기능을 확장하고 위에서 언급한 문제를 피할 수 있도록 흐름을 개발했습니다.

1. 코드 예

flow는 '흐름 정적 유형 검사'가 필요한 파일 시작 부분에 // @flow 주석을 추가하면 도구에서 다음을 식별할 수 있다고 규정합니다. 이 파일은 정적 유형 검사를 수행해야 합니다. 그렇지 않으면 일반 js 파일로 처리되어 정적 유형 검사가 수행되지 않습니다.

flow 정적 타이핑은 jsx 구문뿐만 아니라 es6 확장 클래스, 모듈 등을 포함한 거의 모든 js 객체에 적용할 수 있습니다.

다음은 몇 가지 기본 정적 유형 예입니다. 자세한 내용은 유형 주석 | 흐름을 참조하세요.

1.1 기본 유형

js의 기본 사항 데이터 유형은 다음을 포함하여 유사합니다.

boolean: js의 부울 유형에 해당

number: js의 Number 유형에 해당

# 🎜🎜#string: js의 문자열에 해당 Type

null: js

void: js

의 null에 해당 일반 js 코드

let hello = 'hello'; // 声明一个变量

hello = 2 * 2; // 重新赋值

hello = []; // 重新赋值

흐름 정적 유형 검사 확장 코드 추가

// @flow

let hello: string = 'hello'; // 声明一个 string 类型的变量

hello = 2 * 2; // 报错

hello = []; // 报错

hello = 'hi'; // 重新赋值

1.2 함수

일반 js 코드

function plus(a, b) {
  return a + b;
}

plus(); // NaN
plus(1); // NaN
plus(1, 2); // 3
plus('hello'); // 'helloundefined'
plus('hello', ' hi'); // 'hello hi'
plus({}, {}); // '[object Object][object Object]'

#🎜 🎜#플로우 정적 유형 검사 확장 코드 추가

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

1.3 Maybe(Maybe), Optional(Optional), Semantic(Literal), Mixed(Mixed)

Maybe( 어쩌면) 유형은 유형 자체를 포함하여 유형 앞에 ?로 표시됩니다. undefine

// @flow

let hello: ?string; // 声明一个数据类型可以是 string, null, undefined 的变量

hello = null; // 赋值
hello = undefined; // 重新赋值
hello = 'hello'; // 重新赋值
hello = 1; // 报错
hello = true; // 报错

옵션 유형은 일반적으로 객체 속성이나 함수 매개변수에 사용됩니다. 이름 뒤에 ?를 추가하세요. 유형 자체를 포함하여 undefound

// @flow

const obj: {hello? : string}; // 属性 hello 可以是 string, undefined

obj = {}; // 赋值
obj = {hello: undefined}; // 重新赋值
obj = {hello: 'hello'}; // 重新赋值
obj = {hello: null}; // 报错
obj = {hello: 1}; // 报错
obj = {hello: true}; // 报错

// 属性 param 可以是 number, undefined
function method(param?: number) { /* ... */ }

method(); // 正常
method(undefined); // 正常
method(1.12); // 正常
method(null); // 报错
method('hello'); // 报错

# 🎜🎜#Semantic(Literal) 유형은 일반적으로 특정 또는 여러 특정 값을 선언하는 데 사용됩니다. (여러 값은

으로 구분됩니다.)

// @flow

let hello: 'hello'; // 声明一个只能赋值 'hello' 的变量

hello = 'hello'; // 赋值
hello = 'hi'; // 报错
hello = 12; // 报错
hello = undefined; // 报错
hello = null; // 报错

function method(param: 1 | 'hi' | boolean): void { /* ... */ }

method(); // 报错，缺少参数
method(1); // ok
method(1.2); // 报错，类型不对
method('hi'); // ok
method('hello'); // 报错，类型不对
method(true); // ok
method(false); // ok

혼합 유형은 모든 데이터 유형을 나타냅니다.|

// @flow

let hello: mixed; // 声明一个 mixed 类型的变量

hello = 'hello'; // 赋值
hello = 'hi'; // 重新赋值
hello = 12; // 重新赋值
hello = undefined; // 重新赋值
hello = null; // 重新赋值

1.4 복합 유형

array

// @flow

let arr1: Array<boolean> = [true, false, true]; // 声明一个元素是 boolean 的数组
arr1 = [true, 1]; // 报错，1 不是 boolean 值
arr1 = ['']; // 报错，'' 不是 boolean 值

let arr2: Array<string> = ["A", "B", "C"]; // 声明一个元素是 string 的数组

let arr3: Array<mixed> = [1, true, "three"] // 声明一个元素是任意类型的数组
arr1 = [true, 1]; // 重新赋值 
arr1 = ['']; // 重新赋值

map

// @flow

// 声明一个 map 类型，其有一个名为 foo，类型 boolean 的子元素
let obj1: { foo: boolean } = { foo: true };
obj1 = {}; // 报错，缺少 foo 这个属性值
obj1 = {foo: 1}; // 报错，属性值 foo 的类型必须是 boolean
obj1 = {foo: false, bar: 'hello'}; // 重新赋值

// 声明一个 map 类型，其有名为 foo, bar, baz，类型 number, boolean, string 的子元素
let obj2: {
  foo: number,
  bar: boolean,
  baz: string,
} = {
  foo: 1,
  bar: true,
  baz: 'three',
};

#🎜 🎜#더 많은 정적 유형을 보려면 유형 주석을 볼 수 있습니다.

2. 도구 사용

install

# 全局安装
npm i -g flow-bin

# 本地安装
npm i -D flow-bin

use

flow init                       # 初始化项目

flow check path/to/dir          # 检查这个目录下所有的文件
flow check path/to/js/file      # 检查指定文件

3과 함께 사용하세요. babel, 프로그램이 실행되는 동안 정적 타이핑을 수행할 수 있도록 체크하여 원하는 효과를 얻으세요.

3.1 babel-preset-flow

js 파일을 트랜스코딩할 때 babel이 흐름 구문을 인식할 수 있도록 babel-preset-flow를 설치하세요.

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

소스 파일(흐름)

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

트랜스코딩된 파일

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

3.2 babel -plugin- flow-runtime

일반적으로 개발 환경에서는 babel-plugin-flow-runtime 플러그인을 사용하는데, 이는 네이티브 실행과 마찬가지로 개발 중에 실시간으로 데이터 타입을 확인할 수 있도록 하기 위함이다. flow 정적 유형 검사와 동일합니다. (일반적으로 이 기능은 추가 js 성능을 소모하므로 프로덕션 환경에서는 사용하지 않습니다.) 🎜🎜#Transcoded file

npm i -D babel-plugin-flow-runtime flow-runtime

이때 js 파일을 flow로 가져옵니다- 매개변수 a, b의 데이터 유형과 plus 함수의 반환 값을 확인하기 위한 런타임 모듈입니다. 데이터 정의와 일치하지 않으면 오류가 보고됩니다.

위 내용은 JavaScript 확장: 흐름 정적 유형을 사용하여 오류를 확인하고 보고하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!