如何配置Expo TypeScript项目,以便可以控制TypeScript棉绒?

时间:2019-08-04 20:54:27

标签: typescript react-native webstorm eslint eslintrc

我已经使用带有expo init的Expo CLI创建了一个基本的JavaScript Expo项目,选择了工作流程简单的TypeScript项目,并且希望使用WebStorm IDE的支持功能来施加严格的类型检查规则。但是,我是JavaScript的新手(它是广泛的选项和工具生态系统),也不清楚如何实现此目标。

例如,虽然我没有做任何进一步的配置来配置linting,但是我被警告这里的返回类型不兼容

enter image description here

我仍然看不到将项目配置为要求声明返回类型的方法,因此即使Expo documentation表示此配置应该是我所需要的,使用“ TypeScript与Expo。

documentation for my IDE建议添加

"@typescript-eslint/parser": "^1.13.0",
"@typescript-eslint/eslint-plugin": "^1.13.0"

到我的project.json,然后根据需要在.eslintrcperhaps better.eslintrc.js中进行配置,例如

module.exports =  {
  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
  extends:  [
    'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  parserOptions:  {
  ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
  sourceType:  'module',  // Allows for the use of imports
  ecmaFeatures:  {
    jsx:  true,  // Allows for the parsing of JSX
  },
  },
  rules:  {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
  settings:  {
    react:  {
      version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
};

但这不会产生任何效果。

如何配置Expo TypeScript项目,以便可以配置TypeScript棉绒?


Expo CLI创建以下可能相关的文件。 (我对这些功能的不了解以及它们是否对棉绒和TypeScript有任何影响可能是问题的一部分。)

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"]
}

.babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  }
}

package.json

{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native-web": "^0.11.4",
    "react-native": "0.59.8",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-unimodules": "~0.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@types/react": "^16.8.23",
    "@types/react-native": "^0.57.65",
    "babel-preset-expo": "^6.0.0",
    "jest-expo": "^34.0.0",
    "typescript": "^3.4.5"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

0 个答案:

没有答案