반응 프로젝트의 정적 유형 검사 솔루션 정보

이 글은 주로 리액트 프로젝트에 대한 정적 타입 검사 방식을 소개하는데, 이는 특정 참조 값을 가지고 있습니다. 이제 필요한 친구들이 참고할 수 있도록 공유합니다.

타입 검사가 필요한 이유 # 🎜🎜#

JS는 유연성이 뛰어나지만 모호한 논리, 구문 오류 또는 데이터 유형을 쉽게 무시할 수 있다는 단점도 있습니다. 컴파일이나 런타임 중에 보고되는 것처럼 보이지만 이상하고 해결하기 어려운 다양한 버그가 발생할 수 있습니다.

예:

function getPrice(x) {
  return x * 10;
}
getPrice('a23') // NaN

function getDefaultValue (key, emphasis) {
    let ret;
    if (key === 'name') {
      ret = 'GuangWong';
    } else if(key=== 'gender') {
      ret = 'Man';
    }else if(key ==='age'){
      ret = 18;
    } else {
       throw new Error('Unkown key ');
    }
    if (emphasis) {
      ret = ret.toUpperCase();
    }
    return ret;
  }
  
  getDefaultValue('name'); // GuangWong
  getDefaultValue('gender', true) // MAN
  getDefaultValue('age', true)

이것은 간단한 함수이며 첫 번째 매개변수 키는 기본값을 가져오는 데 사용됩니다. 두 번째 매개변수 강조는 특정 시나리오에서 대문자를 강조하는 데 사용됩니다. 결과를 자동으로 대문자로 변환하려면 true만 전달하면 됩니다.

그러나 실수로 age 값을 숫자 리터럴로 쓴 경우 getDefaultValue('age', true)를 호출하면 런타임 시 오류가 보고됩니다. 이는 비즈니스가 온라인 상태가 된 후에만 발생할 수 있으며, 이로 인해 비즈니스를 직접 사용할 수 없게 됩니다

또한 직장에서 n 모듈 사이에 전달되는 객체의 속성이 종종 정의되지 않게 되었습니다. 위의 내용은 코드 견고성의 문제입니다. 직장에서 또 다른 골칫거리는 협업의 문제입니다. 다른 사람이 제공하는 메소드를 어떻게 하면 한눈에 알아볼 수 있는 문서를 생성할 수 있을까요? 프로젝트에는 항상 여러 사람의 공동 작업이 필요하기 때문에 A() 함수를 작성했고 B는 a() 함수를 호출할 때 a()에 필요한 매개 변수와 반환할 매개 변수를 알기 위해 API 문서를 읽어야 했습니다.

그러다가 A반 친구가 a() 함수를 변경했는데, 문서 업데이트를 깜빡하고 이때 막 프로젝트를 맡은 C반 친구가 API 문서와 a() 함수를 살펴봤습니다. 질문 표면적으로: 제공된 인터페이스는 팀 협업에서 어떻게 설명됩니까?

관련 문제는 다음과 같습니다.

1. 인터페이스는 매개변수와 반환 값을 어떻게 설명합니까?

2. 수많은 요구 사항 반복을 통해 인터페이스 매개변수와 반환 값이 여러 번 변경되었는데, 이 API에 해당하는 문서를 어떻게 업데이트해야 합니까?
4. 데이터 형식을 어떻게 설명하나요?

위의 많은 문제점을 해결하려면 유형 검사 메커니즘을 도입해야 합니다. 소위 유형 검사는 컴파일 중에 (유형 오류로 인해 발생하는) 버그를 가능한 한 빨리 찾는 것을 의미합니다. 코드 실행에 영향을 주지 않고(런타임이 필요하지 않음) js 작성은 Java와 같은 강력한 유형의 언어를 작성하는 것과 유사한 경험을 할 수 있습니다.

#🎜🎜 #

대규모 프로젝트 유지보수 가능
• #🎜 🎜#
  효율성 향상, 컴파일 단계 대신 코드 작성 시 오류 보고
• #🎜 🎜#

  코드의 가독성 향상 가능 Code as Document

• 향상된 디자인

• #🎜 🎜#Powered by Flow
  by Facebook JavaScript 정적 유형 검사 도구는 전체 프로젝트를 완전히 재구성하지 않고도 부분적으로 도입할 수 있으므로 이미 일정 규모를 갖춘 프로젝트의 경우 마이그레이션 비용이 더 적고 실현 가능합니다.

flow 사용법 학습 비용도 상대적으로 저렴합니다. 🎜#프로젝트 루트 디렉터리에 .flowconfig 파일을 만듭니다

babel 플러그인 설치

npm install -g flow-bin

1. #🎜🎜 #

   .babelrc 파일에 플러그인 추가

npm install --save-dev babel-plugin-transform-flow-strip-types

#🎜 🎜#
1. 확장 프로그램 설치(⇧⌘X): 흐름 언어 지원#🎜 🎜#

JavaScript에 대한 VS Code의 기본 구성 수정

2. #🎜 🎜#

   코드 -> 환경설정-> 사용자 설정( ⌘,)
검색: javascript.validate.enable

수정: "javascript.validate.enable": false#🎜🎜 #

1. 프로젝트에서 사용

다음과 같이 정적 검사가 필요한 파일 헤더에 흐름을 도입합니다. #🎜🎜 #

{
  "presets": [ "es2015", "react", "stage-1" ],
  "plugins": [
        "react-flow-props-to-prop-types"
  ]
}

Use typescript

2. TypeScript는 JavaScript의 상위 집합이라고 불리는 Microsoft에서 출시한 정적 코드 검사 솔루션입니다. 물론, 최종 코드는 JavaScript

1로 컴파일될 수 있습니다.

/* @flow */
function getPrice(x: number) {
  return x * 10;
}
getPrice('a23') // vscode 工具提示错误

2. #js 작성 방법

let num: number;
num = 'likely';
    
[ts] 不能将类型“"likely"”分配给类型“number”。
let num: number

위와 아래는 JavaScript 함수입니다. 메서드의 작성을 보지 않으면 이 API에 어떤 함정이 있을지 알 수 없습니다.

export const fetch = function (url, params, user) {
  // dosomething

  return http(options).then(data => {
    return data
  }).catch(err => {
    return err
  })
}

위의 TypeScript에는 많은 정보가 포함되어 있어 함수 호출 방법을 쉽게 알 수 있습니다.
url은 문자열이거나 객체 유형# 🎜🎜#

params는 생략할 수 있으며 모든 유형을 전달할 수 있습니다.

user는 필수입니다. 물론 User 유형에서는

을 전달하지 않을 수도 있습니다. Promise의 평가 결과는 Object일 수도 있고 Error일 수도 있습니다.

#🎜🎜 #
3.Component

export const fetch = function (url: string | object, params?: any, user?: User): Promise<object | Error> {
  // dosomething

  return http(options).then(data => {
    return data
  }).catch(err => {
    return err
  })
}

위의 컴포넌트에 대해 컴포넌트가 어떤 속성을 가지고 있는지, 어떤 속성을 가지고 있는지 명확하게 알 수 있습니다. 속성은 필수이고 어떤 속성은 선택사항인지 한눈에 알 수 있으며 문서화 코드와 관련해 우리가 실제로 수행하는 작업은 무엇인지

关于typescript还有很多其他特点，如类，接口，泛型等，具体可参考官方文档
https://www.typescriptlang.org/

项目迁移typescript

1.node
(1)使用npm安装:npm install -g typescript,当前项目使用了是v2.8.3
(2)2.2 tsconfig.json

{
  "compilerOptions": {
      "module": "commonjs",
      "target": "es5",
      "noImplicitAny": true,
      "sourceMap": true,
      "lib": ["es6", "dom"],
      "outDir": "dist",
      "baseUrl": ".",
      "jsx": "react",
      "paths": {
          "*": [
              "node_modules/*",
              "src/types/*"
          ]
      }
  },
  "include": [
      "src/**/*"
  ]
}

(3)将.js文件改为.ts
(4)结合 gulp 进行实时编译

var gulp = require('gulp');
var pump = require('pump');
var webpack = require('webpack');

var ts = require('gulp-typescript');
var livereload = require('gulp-livereload');
var tsProject = ts.createProject("tsconfig.json");

gulp.task('compile:tsc:server', function () {
  return gulp.src('src/server/**/*.ts')
      .pipe(tsProject())
      .pipe(gulp.dest('dist/server'));
});
//将任务同步执行
var gulpSequence = require('gulp-sequence');
gulp.task('compile', gulpSequence(
  'compile:tsc:server',
))


gulp.task('watch', ['compile'], function() {
  livereload.listen();

  gulp.watch(['./src/server/**/*.ts'], ['compile:tsc:server']);
})

1. react

可在 webpack 配置文件添加规则

{ 
    test: /\.tsx?$/, 
    enforce: 'pre',
    use: [
        {
            loader: "ts-loader"
        }
    ]
 },

3.遇到的问题
遇到的问题

• 动态地为global添加属性

由于js灵活的风格，我们经常动态地为某一对象添加属性，但是typeScript是编译型语言，基本原则是先定义再使用，所以当我们像下面这么引用

global.testName = '哈哈';

便会出现这样的错误

类型“Global”上不存在属性“testName”

解决方法

（1）将global强制转化为any类型

 (<any>global).testName = &#39;哈哈&#39;
    
(2)扩展原有的对象

  global.prototy.testName = &#39;哈哈哈&#39;

(3)使用.d.ts文件

declare namespace NodeJS {
 
  export interface Global {
    testName: string;
  }
}

网上很多方法是直接添加一个.d.ts文件即可，但是亲测无效，需要在引用文件引入该文件，如本项目在app.ts文件中引入了

/// <reference path="../types/custom.d.ts" />

Flow 与 TypeScript简单对比

总结

Flow或者TypeScript都是静态类型检查的优秀解决方案，能够给有类型检查需求的一定规模的项目带来实际收益。基于现有项目的情况，迁移 TypeScript 时间成本比较大，学习曲线相对陡峭，建议现有项目采用 Flow 方案，对于一些新的项目，可以采用 TypeScript

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

react 官网动画库（react-transition-group）的新写法

React-Reflux的基础介绍

위 내용은 반응 프로젝트의 정적 유형 검사 솔루션 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!