Help us understand the problem. What is going on with this article?

React NativeでTypeScriptを使う2019

More than 1 year has passed since last update.

前提

$ react-native -v
react-native-cli: 2.0.1

react-nativeは0.57.8

本題

前にReactNativeに触ったのは2017年の夏くらいだったので、ずいぶん方法が変わっていて驚きました。React NativeをTypeScriptで書きたいという話です。新規プロジェクトを作る時の話なので、既存プロジェクトに適用したいときはよしなにどうぞ(よくわかってない)

結論から述べると、react-native init MyProj --template typescriptとしてあげるとTypeScriptを使ったプロジェクトが作成されるようになったみたいです。

Using TypeScript with React Native · React Native

ここに書いてた。

ところがどっこい、型がぶっ壊れてても実行できてしまいます。例えばこんなコード。

const add = (x: number, y: number): number => x + y;

interface Props { }
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text>{add(1, "hoge")}</Text>
      </View>
    );
  }
}

Add関数は、number型を2つ取るはずが、第2引数が文字列でも実行されてしまい…

image.png

こうなる。そうじゃねぇ…。

VSCodeを使っているので、エディタの画面ではエラーを吐いてくれます。

image.png

どうしてこうなってしまうのか、調べたところ以下の記事に当たりました。

React Native v0.57がTypeScriptに対応したらしいので動かしてみた - Qiita

記事冒頭を引用させていただくと、

React NativeのTypeScript対応は、Babel 7のTypeScript対応に乗っかった形で実現されています。

ここで重要なのは、 Babelはtscを内部で実行するわけではない ということです。

今回導入された@babel/preset-typescriptは、FlowTypeの babel-plugin-flow-strip-types と同様に、TypeScript/FlowからTypeScript/Flow特有の文法を引き剥がせば、Babelでパース可能なJSになる という発想で作られています。

と書かれています。

なるほど。

Babelでは型チェックを行なっていないので、先ほど示したようなコードが実行できてしまったわけですね。(VSCodeは裏側でtscを実行してエラーを出しているので、ちゃんと型と合わないところでエラーが出ていたものと考えられます。)

というわけで、上記記事にも書いていますが、型チェックだけをtscでやってやるのが正しいみたいです。

上記記事では、tsconfig.jsonも自分で書かれていますが、--template typescriptで作成されたプロジェクトにはtsconfig.jsonがあらかじめ入っているので、それを使ってやればよさそうです。

mogamin3
fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした