優雅地使用TypeScript開發React Native應用

時間  2019-11-21
標籤 優雅 使用 typescript 開發 react native 應用 欄目 React 简体版
原文   原文鏈接

從 React Native 0.57 版本開始，咱們終於能夠直接使用 TypeScript 開發，不須要任何額外的配置。本文主要介紹如何使用 TypeScript 優雅地開發 React Native 應用。javascript

1、初始化項目

初始化項目以前，請確保已經按照 React Native 中文網 的搭建開發環境文檔完成了環境搭建html

$ react-native init AwesomeProject
複製代碼

注意: 入口文件 index.js 須要保留，其餘文件均可以使用 .ts 或 .tsx 後綴。前端

2、TypeScript 編譯器

$ yarn global add typescript
$ yarn add -D typescript @types/react @types/react-native
複製代碼

3、配置 tsconfig.json

$ tsc --init --pretty --target esnext --allowJs --checkJs --jsx react-native --allowSyntheticDefaultImports --experimentalDecorators --emitDecoratorMetadata
複製代碼

注意：注意多餘的註釋可能會不兼容，須要移除，詳細文檔可查閱 編譯選項。vue

配置文件

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "allowJs": true,
    "checkJs": true,
    "jsx": "react-native",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": ["node_modules", "**/*.js"],
  "compileOnSave": false
}
複製代碼

解釋:java

  • target: 指定 ECMAScript 目標版本 "ES3"（默認），"ES5"，"ES6"/"ES2015"，"ES2016"，"ES2017"，"ES2018", "ES2019" 或 "ESNext"。
  • mode: 指定生成哪一個模塊系統代碼："None"，"CommonJS"，"AMD"，"System"，"UMD"，"ES6"， "ES2015" 或 "ESNext"。
  • allowJs: 容許編譯 javascript 文件。
  • checkJs: 在 .js 文件中報告錯誤。與 --allowJs 配合使用。
  • jsx: 在 .tsx 文件裏支持 JSX： "react"、"react-native"或 "preserve"。查看 JSX。
  • strict: 啓用全部嚴格類型檢查選項。啓用 --strict 至關於啓用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks 和 --strictFunctionTypes 和--strictPropertyInitialization。
  • allowSyntheticDefaultImports: 容許從沒有設置默認導出的模塊中默認導入。這並不影響代碼的輸出，僅爲了類型檢查。
  • esModuleInterop: TypeScript 與 Babel 採起了不一樣的方案，而且直到如今，還沒出現真正地固定標準。 簡單地說，若是你使用 Babel，Webpack 或 React Native，並指望與你以往使用地不一樣的導入行爲，TypeScript 提供了該編譯選項。
  • experimentalDecorators: 啓用實驗性的 ES 裝飾器。
  • 給源碼裏的裝飾器聲明加上設計類型元數據。: 給源碼裏的裝飾器聲明加上設計類型元數據。

4、EsLint 代碼檢測

Lint 工具用於檢查代碼的語法是否正確、風格是否符合要求。最新的工具 ESLint 不只容許你自定義語法規則，還容許用戶創造插件，改變默認的 JavaScript 語法，好比支持 ES6 和 JSX 的語法。node

VsCode 支持

安裝 ESLint Plugin

配置 ESLint Plugin

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true
}
複製代碼
  • eslint.validate：ESLint 插件默認只校驗 javascript 和 javascriptreact，因此須要手動開啓其餘語言的校驗支持
  • eslint.autoFixOnSave: 開啓保存時自動修復錯誤

項目配置

注意：配置以前請確保根目錄下存在 .eslintrc.js。若是要指定忽略某些文件，可使用 .eslintignore 文件（node_modules、bower_compnents 文件夾已經默認被忽略）react

$ yarn add -D eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-native @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript
複製代碼

配置文件

.eslintrc.js:git

因爲文件過長，這裏不作展現，具體配置請戳typescript

.eslintignore:編程

# /node_modules/* and /bower_components/* ignored by default
複製代碼

5、Prettier 代碼格式化

ESLint 可以檢測出代碼中的潛在問題，提升代碼質量，可是並不能徹底統一代碼風格。而 Prettier 在格式化代碼方面具備更大優點。Prettier 掃描文件中的樣式問題，並自動從新格式化代碼，以確保縮進、間距、分號、單引號和雙引號等遵循一致的規則。

VsCode 支持

若是你只是想要格式化你的 JS 或 TS 代碼，你能夠忽略這一部分

安裝 Prettier Plugin

配置 Prettier Plugin

注意：除了如下配置，建議你把其餘格式化插件，好比 beautify 直接卸載，並配置 prettier 爲默認格式化程序。

  • prettier.requireConfig: 須要項目中存在一個 prettierconfig 文件才能運行 prettier
  • editor.formatOnSave: 開啓保存時自動格式化
{
  "prettier.requireConfig": true,
  "editor.formatOnSave": true
}
複製代碼

配置規則:

Prettier 與 ESLint 配合使用

完成上一部分 VSCode 的支持，再配置一個 PrettierConfig 文件你就可使用 Prettier 的功能了。可是當樣式出問題時，編輯器並不會給你報錯。更糟糕的是，ESLint 和 Prettier 在格式化規則方面存在一些衝突。幸運的是，Prettier 被設計爲易於與 ESLint 集成，因此你能夠輕鬆在項目中使二者，而無需擔憂衝突。

$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
複製代碼

配置文件

.eslintrc.js:

module.exports = {
  extends: [
+ 'prettier',
+ 'plugin:prettier/recommended',
+ 'prettier/react',
+ 'prettier/@typescript-eslint',
  ],
}
複製代碼

.eslintignore:

# /node_modules/* and /bower_components/* ignored by default
複製代碼

.prettierrc.js

module.exports = {
  semi: false, // 行位是否使用分號，默認爲true
  trailingComma: 'es5', // 是否使用尾逗號，有三個可選值"<none|es5|all>"
  singleQuote: true, // 字符串是否使用單引號，默認爲false，使用雙引號
  printWidth: 120, // 一行的字符數，若是超過會進行換行，默認爲80
  tabWidth: 2, // 一個tab表明幾個空格數
  bracketSpacing: true, // 對象大括號直接是否有空格，默認爲true，效果：{ foo: bar }
}
複製代碼

.prettierinore

**/node_modules/*
複製代碼

6、EditorConfig 跨編輯器配置統一

當多人共同開發一個項目的時候，每每會出現你們用不一樣編輯器的狀況。就前端開發者來講，有人喜歡 Sublime，有人喜歡 Webstorm , 也有人喜歡 Atom，還有人喜歡 Vim，HBuilder 等等。各類不一樣編程語言的開發者喜歡各類不一樣的編輯器。EditorConfig 這個項目就是爲了解決跨編輯器開發項目的代碼風格統一問題的。

VSCode Plugin

安裝完後不須要配置，直接在項目中添加配置文件便可。

配置文件

.editorconfig:

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[*.gradle]
indent_size = 4

[BUCK]
indent_size = 4
複製代碼

7、Git pre-commit Hook

pre-commit鉤子在鍵入提交信息前運行。 它用於檢查即將提交的快照，例如，檢查是否有所遺漏，確保測試運行，以及覈查代碼。 若是該鉤子以非零值退出，Git 將放棄這次提交，不過你能夠用git commit --no-verify來繞過這個環節。 你能夠利用該鉤子，來檢查代碼風格是否一致（運行相似 lint 的程序）、尾隨空白字符是否存在（自帶的鉤子就是這麼作的），或新方法的文檔是否適當。

husky: 輕鬆使用 Git hooks

Husky 能阻止壞的 git commit, git push 和更多的 💩

$ yarn add -D husky
複製代碼

配置文件

.huskyrc.js:

module.exports = {
  hooks: {
    'pre-commit': 'node node_modules/eslint/bin/eslint.js --fix src/**/*.js',
  },
}
複製代碼

注意：測試發現直接運行 eslint --fix 使用的是全局的模塊。

只使用 husky 的問題

  • 性能問題：對整個項目運行一個 lint 進程很慢，並且 linting 結果可能可有可無。
  • 效率問題：遺留代碼倉庫上工做的同窗很快會遇到新的問題，開啓 Lint 初期，你可能會面臨成千上萬的 Lint Error 須要修復。部分同窗對下面這個圖可能並不陌生：只改了文件 A，可是文件 B、C、D 中也有大量錯誤。

lint-staged: husky 的好幫手

針對暫存的 git 文件運行 linters 而且不要讓 💩 滑入你的代碼庫！對暫存區概念不熟悉的同窗能夠看下git-簡明指南

$ yarn add -D husky lint-staged
複製代碼
  • husky: 被用來添加一些 git 鉤子，這裏咱們須要一個用 pre-commit 在每次 git commit 操做時執行 lint-staged 命令。
  • lint-staged: 能夠對 git 暫存區文件(也就是你想要 commit 的文件)執行一些操做，這樣作即提升了性能又提升了效率。

配置文件

.huskyrc.js:

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged',
    '**/*.{md,json}': ['prettier --write', 'git add'],
  },
}
複製代碼

lint-staged.config.js:

module.exports = {
  'src/**/*.{js,jsx,ts,tsx}': ['eslint --fix', 'git add'],
}
複製代碼

8、相對於根目錄引入組件

這部分不是必須的，配置也有些繁瑣。這裏我就只介紹下簡單的配置，詳細文檔請請查閱 babel-plugin-root-import。

$ yarn add -D babel-plugin-root-import eslint-import-resolver-babel-plugin-root-import
複製代碼

配置文件

babel.config.js:

module.exports = {
  ...
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathSuffix: 'src',
        rootPathPrefix: '~',
      },
    ],
  ],
  ...
}
複製代碼

.eslintrc.js

{
  settings: {
    'import/resolver': {
      'babel-plugin-root-import': {
        rootPathSuffix: 'src',
        rootPathPrefix: '~',
      },
    },
  },
}
複製代碼

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}
複製代碼

9、支持 .jsx

React Native 都已經內置支持 TypeScript 了，可是卻不支持 .jsx 文件後綴。若是你想要使用 .jsx 開發，能夠配置 metro.config.js:

module.exports = {
  resolver: {
    sourceExts: ['ts', 'tsx', 'js', 'jsx', 'json', 'mjs'],
  },
}
複製代碼

10、相關資料

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程