React プロジェクトの静的型チェック ソリューションについて

この記事では、主に React プロジェクトの静的型チェック スキームを紹介します。これは、必要な友人に参考にしていただけるように共有します。柔軟性に優れていますが、その利点は欠点でもあります。コンパイル時や実行時にさえエラーが報告されないようですが、いくつかの不明瞭なロジック、構文エラー、データ型エラーが無視される可能性があります。そして解決困難なバグが発生します。

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)

など

これは単純な関数で、最初のパラメータのキーはデフォルト値を取得するために使用されます。 2 番目のパラメーターの強調は、特定のシナリオで大文字を強調するために使用されます。結果を自動的に大文字に変換するには、true を渡すだけです。

しかし、誤って age の値を数値リテラルとして書き込んだ場合、getDefaultValue('age', true) を呼び出すと、実行時にエラーが報告されます。これは、ビジネスがオンラインになった後に発生する可能性があり、ビジネスが利用できなくなる直接的な原因となります

さらに、仕事では、n 個のモジュール間で渡された後に未定義になるオブジェクトのプロパティに遭遇することがよくあります。上記はコードの堅牢性の問題です。もう 1 つの問題はコラボレーションの問題です。他人が提供するメソッドを使って、一目でわかりやすいドキュメントを作成するにはどうすればよいでしょうか。プロジェクトには常に複数の人々のコラボレーションが含まれるため、クラスメイト A は関数 a() を作成しましたが、クラスメイト B は関数 a() を呼び出すときに API ドキュメントを読んで、a() に必要なパラメーターとそれが返すパラメーターを知る必要がありました。

クラスメイトAはその後、関数a()を変更しましたが、ドキュメントを更新するのを忘れていました。このとき、プロジェクトを引き継いだばかりのクラスメイトCは、APIドキュメントと関数a()を見て困惑した様子でした。浮上: チームコラボレーション、提供されたインターフェイスはそれ自体をどのように説明しますか?

関連する問題は次のとおりです:

1. インターフェイスはパラメーターと戻り値をどのように記述しますか?

2. インターフェースのパラメーターと戻り値は、数え切れないほどの要件の反復で何度も変更されており、この API に対応するドキュメントはどのように更新されるべきですか?

4. データ形式はどのように記述するか?

上記の問題点の多くを解決するには、コードの実行に影響を与えることなく、コンパイル中にできるだけ早くバグ (型エラーによって引き起こされる) を見つける、いわゆる型チェック メカニズムを導入する必要があります。実行時に型を動的にチェックする必要がないため、JS の記述は Java などの厳密に型指定された言語を記述するのと同様のエクスペリエンスになります。

大規模なプロジェクトを保守可能にする

• エラーが発生します。コンパイル段階ではなく書き込み段階で報告

• コードを強化する コードの読みやすさをドキュメントとして実現できる

• デザインを強化する

• Flowを使用する
  によって作成されたJavaScript静的型チェックツールFacebookはプロジェクト全体を完全に再構築することなく部分的に導入できるため、すでにある程度の規模があるプロジェクトの場合、移行コストが小さく実現可能です

フローを利用する学習コストも比較的低いです

グローバルにフローコマンドラインツール

npm install -g flow-bin

1. プロジェクトのルートディレクトリに、.flowconfigファイルを作成します

1. babelプラグインをインストールします

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

2. .babelrcファイルにプラグインを追加します

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

1. インストール拡張子 (⇧⌘X): フロー言語サポート

1. VS コードの変更 はい JavaScript のデフォルト設定

2. コード -> ユーザー設定 (⌘,)

   検索: javascript.validate.enable

   次のように変更します: "javascript.validate.enable": false プロジェクト内の

1. を使用して、静的検査を必要とするファイル ヘッダーに次のようなフローを導入します。は 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 の評価結果は Components

3 である必要があります。上記のコンポーネントを明確に理解できます。コンポーネントがどのようなプロパティ、どのメソッドを持っているか、どのプロパティが必須でどのプロパティがオプションであるかを正確に把握できます。一目でわかるため、まさにコードはドキュメントです

• 关于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的基础介绍

  以上がReact プロジェクトの静的型チェック ソリューションについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。