美文网首页
在ReactNative中使用Typescript

在ReactNative中使用Typescript

作者: HT_Jonson | 来源:发表于2021-12-24 15:03 被阅读0次

    1.全局安装create-react-native-app

    yarn global add create-react-native-app
    

    2.创建项目

    create-react-native-app projectname(你的项目名字)
    

    3.项目跟目录创建依赖

    yarn add typescript tslint -D
    yarn add @types/react @types/react-native @types/react-dom -D
    

    4.安装其他依赖

    yarn add concurrently rimraf -D
    yarn add ts-jest @types/jest @types/react-test-renderer -D
    

    5.在你的项目根目录下创建一个tsconfig.json文件,将以下代码复制进去即可

    {
        "compilerOptions": {
            "module":"es2015",
            "target": "es2015",
            "jsx": "react",
            "rootDir": "src",
            "outDir": "build",
            "allowSyntheticDefaultImports": true,
            "noImplicitAny": true,
            "sourceMap": true,
            "experimentalDecorators": true,
            "preserveConstEnums": true,
            "allowJs": true,
            "noUnusedLocals": true,
            "noUnusedParameters": true,
            "noImplicitReturns": true,
            "skipLibCheck": true,
            "moduleResolution":"Node"
        },
        "filesGlob": [
            "typings/index.d.ts",
            "src/**/*.ts",
            "src/**/*.tsx",
            "node_modules/typescript/lib/lib.es6.d.ts"
        ],
        "types": [
          "react",
          "react-dom",
          "react-native"
        ],
        "exclude":[
            "build", 
            "node_modules",
            "jest.config.js",
            "App.js"
            
        ],
        "compileOnSave": false
    }
    

    6.安装react-native-scripts

    yarn add react-native-scripts
    

    7.将package.json中的"scripts"配置清空,并将以下代码替换

    "scripts": {
        "start": "react-native-scripts start",
        "eject": "react-native-scripts eject",
        "android": "react-native-scripts android",
        "ios": "react-native-scripts ios",
        "test": "node node_modules/jest/bin/jest.js",
        "lint": "tslint src/**/*.ts",
        "tsc": "tsc",
        "clean": "rimraf build",
        "build": "yarn run clean && yarn run tsc --",
        "watch": "yarn run build -- -w",
        "watchAndRunAndroid": "concurrently \"yarn run watch\" \"yarn run android\"",
        "buildRunAndroid": "yarn run build && yarn run watchAndRunAndroid ",
        "watchAndRunIOS": "concurrently \"yarn run watch\" \"yarn run ios\"",
        "buildRunIOS": "yarn run build && yarn run watchAndRunIOS ",
        "watchAndStart": "concurrently \"yarn run watch\" \"yarn run start\"",
        "buildAndStart": "yarn run build && yarn run watchAndStart "
      }
    

    相关文章

      网友评论

          本文标题:在ReactNative中使用Typescript

          本文链接:https://www.haomeiwen.com/subject/ylmlqrtx.html