概要
Almin.js の Counterサンプルプログラム を、コンパイラを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> {
...