• Setting up a new React Native project that uses TypeScript.
• Setting up linting and auto-completion of TypeScript code for Sublime Text.
• Refactoring the code of an existing project to use TypeScript.

    git clone https://github.com/anchetaWern/RNTypeScript.git
    cd RNTypeScript
    git checkout standard-rn

    react-native init RNTypeScript --template typescript && node RNTypeScript/setup.js

Installing the dependencies

• src
• App.js

    yarn add [email protected]

• Android – manual install instructions.
• iOS – mostly automatic install.

    yarn add prop-types

    yarn add --dev tslint-react

Upgrading to Gradle 3

• android/build.gradle
• android/gradle/wrapper/gradle-wrapper.properties

    react-native run-android
    react-native run-ios

Troubleshooting

    // file: android/app/build.gradle

    dependencies {
      // previously added dependencies here...

      compile (project(':react-native-camera')) {
        exclude group: "com.google.android.gms"
        compile 'com.android.support:exifinterface:25.+' // update 25.+ to 26.+
      }

      // other dependencies here...
    }

    "devDependencies": {
      "@types/jest": "^23.3.0",
      "@types/react": "^16.4.6",
      "@types/react-native": "^0.56.2",
      "@types/react-test-renderer": "^16.0.1"
    }

    "react-native-typescript-transformer": "^1.2.10",

    "ts-jest": "^23.0.0",

    "typescript": "^2.9.2"

    module.exports = {
      getTransformModulePath() {
        return require.resolve('react-native-typescript-transformer');
      },
      getSourceExts() {
        return ['ts', 'tsx'];
      },
    };

    {
      "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "jsx": "react-native",
        "lib": ["es6"],
        "module": "es6",
        "moduleResolution": "node",
        "noEmit": true,
        "noImplicitAny": true,
        "target": "es6"
      },
      "exclude": ["node_modules"]
    }

    {
      "extends": ["tslint:latest", "tslint-react"], // the default rules we want to extend
      "rules": {
        "ordered-imports": [true], // import statements should be alphabetically arranged
        "member-access": [false], // don't require explicit visibility declarations for class members
        "member-ordering": [false], // don't check for keeping related groups of classes together
        "trailing-comma": false,
        "no-empty": false, // allow empty blocks
        "no-submodule-imports": false, // allow importing of submodules
        "no-implicit-dependencies": false, // allow importing of modules that aren't listed under the package.jsons dependency list
        "no-constant-condition": false,
        "triple-equals": [true, "allow-undefined-check"], // always use triple equals when comparing values, except for checking undefined values
        "arrow-parens": [false], // disable checking of parenthesis for single argument arrow functions
        "semicolon": [true, "always", "ignore-bound-class-methods"], // disable checking of semi-colon for class bound methods
        "object-literal-sort-keys": false,
        "no-duplicate-imports": true, // disallow repeating of imports from the same module 
        // react specific rules (more info here: https://github.com/palantir/tslint-react#rules)
        "jsx-alignment": true, // enforces a consistent style for multiline JSX elements
        "jsx-no-bind": true, // disallow function binding in JSX attributes
        "jsx-no-lambda": true, // disallow creation of anonymous functions inside the render method
        "jsx-no-multiline-js": false, // disable checking of multi-line JavaScript inside JSX

        "max-classes-per-file": [false] // disable rule for limiting the number of classes per file
      }
    }

    https://palantir.github.io/tslint/rules/{rule-name}

    nvm install 8.3.0
    nvm alias default 8.3.0
    nvm use default

• TypeScript Syntax – for adding syntax highlighting for TypeScript code.
• SublimeLinter – main framework for working with linters.
• SublimeLinter-tslint – for linting TypeScript code.

    {
      // previously added settings here...

      // add this:
      "lint_mode": "load_save"
    }

Troubleshooting SublimeLinter

    {
      // previously added settings here...

      // add these:
      "debug": true, // enable debugging
      "linters": {
        "tslint": {
          "env": {"PATH": "/path/to/nodejs/executable_file"}
        }
      }
    }

    brew install imagemagick

    sudo apt-get install imagemagick

Setting up TypeScript for other text-editors

• Editing TypeScript on Visual Studio Code
• Equipping Vim for TypeScript: A Newcomer’s Guide
• TypeScript plugin for Atom
• TypeScript Editor Support

    // file: .sublime-project
    {
      "folders":
      [
        {
          "path": "."
        }
      ],
      "settings": {
        "SublimeLinter.linters.eslint.disable": true // disable eslint
      }
    }

    // type Props = {};
    interface Props {} // use this in place of the one on the top

• Interface name must start with a capitalized ‘”I”
• An empty interface is equivalent to “{}”

    "interface-name": false,

    // interface Props {} // remove this
    export default class App extends Component {
      // rest of the code here...
    }

    root = true

    [*]
    end_of_line = lf
    insert_final_newline = false
    charset = utf-8
    trim_trailing_whitespace = true
    quote_type = double

    [*.tsx]
    indent_style = space
    indent_size = 2

Refactoring PropTypes

    import PropTypes from "prop-types"; // remove from both files

    // remove from: src/components/Card.tsx
    Card.propTypes = {
      image: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired
    };

    // remove from: src/components/ActionButton.tsx
    ActionButton.propTypes = {
      label: PropTypes.string.isRequired,
      action: PropTypes.func.isRequired
    };

    // src/components/Card.tsx
    interface CardProps {
      image: string;
      label: string;
    }

    const Card: React.SFC<CardProps> = ({ image, label }) => {
      return (
        // previous return code here...
      );
    }

    // src/components/ActionButton.tsx
    interface ActionButtonProps {
      label: string;
      action: () => void; // can be any function which doesn't change anything
    }

    const ActionButton: React.SFC<ActionButtonProps> = ({ label, action }) => {
      return (
        // previous return code here...
      );
    }

• Using TypeScript with React Native
• React Native with TypeScript
• TypeScript Fundamentals