ReactNativeでTypescriptを使い始める

typescriptのインストール

Using TypeScript with React Native · React Native

インストールと設定

# typescriptをインストール
yarn add --dev typescript
# typescriptのコードをReactNative用に変換するライブラリをインストール
yarn add --dev react-native-typescript-transformer
# 設定ファイル（tsconfig.json）を作成
yarn tsc --init --pretty --jsx react
# react-native-cliの設定ファイルを作成
touch rn-cli.config.js
# ReactとReactNativeの型定義をインストール
yarn add --dev @types/react @types/react-native

tsconfig.json のこの行のコメントを外す。

"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,

rn-cli.config.js を開いて、↓これを書く

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

既存のソースコードを修正

jsファイルの拡張子を変更する

エントリポイントになる index.js 以外はjsxの場合 tsx 、jsx以外は tsに変更する。

default export と named export を同じ行でimportしてるところを別の行に変更する

-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';

Typescriptを始める

TypeScript in 5 minutes · TypeScript

関数の引数に型指定できる

// string型の値しか受け付けない
function greeting(person: string) {

}

• 使える型（基本） Basic Types · TypeScript

interfaceでオブジェクトのメンバーと型が定義できる

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

Constructorの引数に public キーワードを使うことで、メンバー定義も一緒にできる

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

const student = new Student('Yujiro', 'A', 'Arai');
console.log(student.firstName) //=> yujiro