Up and Running with Typescript

[scottoasis]

Environment

• antd-mobile v0.8.2
• OSX El Capitan 10.11.6
• Safari 9.1.2
• Node.js 6.0.0

---

My team were trying to integrate Ant Design Mobile into our new project. TypeScript is our preferred choice of programming language for this project.

You can find a primitive draft of development environment setup at weflex/booking-web:bbbecf5.

THE PROBLEM

• As we were trying out the Web Example from README (in TypeScript), we ran into React Runtime Error says:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

• So the TypeScript source file looks like:

// login.tsx
import * as React from "react";
import 'antd-mobile/lib/button/style';
import Button from 'antd-mobile/lib/button';

class Login extends React.Component<any, any> {
    render() {
        return (
            <div>
                <h1>Login</h1>
                <Button>Button</Button>
            </div>
        );
    }
}

export default Login;

• And after debugging it for a while, I noticed (with the help of Safari/Chrome debugger) that in the transpiled Javascript file:

/* ... */
    var button_1 = __webpack_require__(20);
/* ... */
        Login.prototype.render = function () {
            return (React.createElement("div", null, React.createElement("h1", null, "Login"), React.createElement(button_1.default, null, "Button")));
/* ... */

the button_1 above was a React Component and button_1.default was undefined.

• And after digging into the node_modules files, I found at the very end of file node_modules/antd-mobile/lib/button/index.web.js:

/* ... */
exports["default"] = (0, _touchableFeedback2["default"])(Button);
module.exports = exports['default'];

So this is my theory as I'm neither too familiar with Module System in Node.js (particularly ES6), or how ts-loader works (I am going to), that

In login.tsx when ts-loader reads import Button from "antd-mobile/lib/button", it was looking for a default field in module.exports from that module, while module.exports was assigned to exports.defaults (for the convenience of people using require in ES5).

Correct me if I'm making mistakes.

THE SOLUTION??

I don't know ya :<

---

Also, as we were reading through the documentation, we found that Ant Design Mobile doesn't have any official documentation about how to get it up and running in TypeScript projects. We DO think this is also an opportunity to write up something about using Ant Design Mobile in such scenarios.

[scottoasis]

cc @yorkie

[yorkie]

@scottoasis what's the typings config of the project that used ant-design-mobile?

[yorkie]

Like this: https://github.com/ant-design/ant-design-mobile/blob/master/typings.json

[scottoasis]

@yorkie Ant-Design-Mobile is a TypeScript project by itself.

Here is the typings.json file

{
  "globalDependencies": {
    "react": "registry:dt/react#0.14.0+20160829191040",
    "react-dom": "registry:dt/react-dom#0.14.0+20160412154040",
    "react-router": "registry:dt/react-router#2.0.0+20160828232736",
    "react-router/history": "registry:dt/react-router/history#2.0.0+20160830150755"
  }
}

And you find in the repo so feel free to check it out (and other stuffs).

[yorkie]

Yup, because the project booking-web doesn't include the ant-design-mobile's typings.json, trying with typings install ant-design-mobile --global

[scottoasis]

But the antd-mobile package already includes *.web.d.ts files and they should serve as a declaration for themselves.

[scottoasis]

Some reading from Stackoverflow about importing ES5/ES6 modules in TypeScript.