LoginSignup
0

More than 5 years have passed since last update.

メモ: Almin.jsのCounterサンプルプログラムをTypeScriptに変更したときにやったこと

Last updated at Posted at 2017-07-09

概要

Almin.jsCounterサンプルプログラム を、コンパイラをtypescript に変更したときにやったことです。

修正後

修正後のソース https://github.com/kmdsbng/almin_counter_example
差分 https://github.com/kmdsbng/almin_counter_example/commit/fefd48ca89c1aadc44466963ec36b87375bbb3da

ビルド方法

  • webpack dev server起動 : yarn start
  • テスト実行 : yarn test

修正後の構成

  • タスクランナー : webpack
  • コンパイラ : typescript
  • テストフレームワーク : mocha

バージョン

  • "almin": "^0.12.1",
  • "typescript": "^2.4.1",

修正点

  • ライブラリを追加

    • yarn add typescript ts-node awesome-typescript-loader source-map-loader --dev
    • yarn add @types/mocha @types/node @types/react @types/react-dom
  • tsconfig.json を追加

    • "noImplicitAny": false
    • "allowJs": true
  • ビルド時にエラーを起こすライブラリを削除

    • "babel-preset-jsdoc-to-assert"削除
    • "babel-preset-power-assert"削除
    • "babel-preset-react"削除
    • "babel-register"削除
  • webpack.config.js修正

+    devtool: "source-map",
+    resolve: {
+        // Add '.ts' and '.tsx' as resolvable extensions.
+        extensions: [".ts", ".tsx", ".js", ".json"]
+    },

+            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
+            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
+
+            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
  • react のimport行でエラーが起こったので修正

    • 修正前
import React from "react";
import ReactDom from "react-dom";
  • 修正後
import * as React from "react";
import * as ReactDom from "react-dom";
  • propTypesを使わず、interfaceを使うように修正
    • Alminの内部で使われてるStateMapというinterface定義をコピーしてくる必要があった。
// copy from almin/UILayer/StoreGroupTypes"
declare type StateMap<T> = {
    [P in keyof T]: T[P];
};

export interface CounterComponentProps {
  appContext: Context<StateMap<{ "counter": any; }>>;
  counterState: CounterState;
};

export default class CounterComponent extends React.Component<CounterComponentProps, undefined> {
  ...

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0