diff --git a/cli.js b/cli.js
index 97968aa..309bc62 100755
--- a/cli.js
+++ b/cli.js
@@ -12,7 +12,10 @@ const program = commander
.version(version)
.option("-f, --functional", "create a functional component")
.option("-s, --stateful", "create a stateful class component")
- .option("-t, --type-check [system]", "add @flow comment to script files")
+ .option(
+ "-t, --type-check [system]",
+ 'either "flow", "flowtype" or "typescript"'
+ )
.option(
"-c, --css-extension [extension]",
"changes the extension of generated css files"
diff --git a/config.js b/config.js
index 035dba5..0903be7 100644
--- a/config.js
+++ b/config.js
@@ -9,9 +9,21 @@ try {
pkg = require(path.resolve(process.cwd(), "package.json"))
} catch (err) {}
+const getTypeCheck = () => {
+ const hasFlow = fs.existsSync(path.join(process.cwd(), ".flowconfig"))
+ const hasTypescript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"))
+ if (hasFlow) {
+ return "flow"
+ } else if (hasTypescript) {
+ return "typescript"
+ }
+
+ return false
+}
+
const defaultOptions = {
directory: "components",
- typeCheck: fs.existsSync(path.join(process.cwd(), ".flowconfig")) && "flow",
+ typeCheck: getTypeCheck(),
cssExtension: "css",
semi: true,
type: "stateful",
@@ -34,7 +46,7 @@ module.exports = function(program) {
config.cssExtension = program.cssExtension
}
- if (program.typeCheck) {
+ if (program.typeCheck && typeof program.typeCheck === "string") {
config.typeCheck = program.typeCheck
}
diff --git a/src/__tests__/__snapshots__/generate.js.snap b/src/__tests__/__snapshots__/generate.js.snap
index 6e855c7..85d2de1 100644
--- a/src/__tests__/__snapshots__/generate.js.snap
+++ b/src/__tests__/__snapshots__/generate.js.snap
@@ -123,3 +123,34 @@ export default T;
",
]
`;
+
+exports[`generate should use typescript 1`] = `
+Array [
+ "export { default } from './T';
+",
+ "import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import T from './T';
+
+it('renders without crashing', () => {
+ const div = document.createElement('div');
+ ReactDOM.render(, div);
+});
+",
+ "import * as React from 'react';
+import './T.css';
+
+class T extends React.Component<{}, {}> {
+ public state = {};
+
+ public render() {
+ return (
+
+ );
+ }
+}
+
+export default T;
+",
+]
+`;
diff --git a/src/__tests__/generate.js b/src/__tests__/generate.js
index 168e561..ec21ddf 100644
--- a/src/__tests__/generate.js
+++ b/src/__tests__/generate.js
@@ -55,6 +55,15 @@ describe("generate", () => {
expect(scripts).toMatchSnapshot()
})
+ it("should use typescript", () => {
+ const data = generate("t", { typeCheck: "typescript" })
+
+ const scripts = data.files
+ .filter(({ fileName }) => fileName.includes(".ts", -1))
+ .map(({ content }) => content)
+ expect(scripts).toMatchSnapshot()
+ })
+
it("should use customized directory", () => {
const data = generate("t", { directory: "foo" })
expect(data.componentPath).toContain("/src/foo/T")
diff --git a/templates/index.js b/templates/index.js
index ceea063..f41313c 100644
--- a/templates/index.js
+++ b/templates/index.js
@@ -2,12 +2,15 @@
const flowtype = require("./template.flowtype")
const javascript = require("./template.javascript")
+const typescript = require("./template.typescript")
module.exports = fileType => {
switch (fileType.toLowerCase()) {
case "flow":
case "flowtype":
return flowtype
+ case "typescript":
+ return typescript
default:
return javascript
}
diff --git a/templates/template.typescript.js b/templates/template.typescript.js
new file mode 100644
index 0000000..7199aeb
--- /dev/null
+++ b/templates/template.typescript.js
@@ -0,0 +1,63 @@
+"use strict"
+const utils = require("./utils")
+
+module.exports = ({
+ componentPath,
+ componentName,
+ fileName,
+ semiColon,
+ cssExtension,
+ noTest,
+ isFunctional,
+}) =>
+ utils.createTemplate(componentPath, {
+ [`${fileName}.${cssExtension}`]: `
+.${componentName} {}
+ `,
+
+ "index.ts": `
+export { default } from './${fileName}'${semiColon}
+ `,
+
+ [`${fileName}.test.tsx`]: noTest
+ ? ""
+ : `
+import * as React from 'react'${semiColon}
+import * as ReactDOM from 'react-dom'${semiColon}
+import ${componentName} from './${fileName}'${semiColon}
+
+it('renders without crashing', () => {
+ const div = document.createElement('div')${semiColon}
+ ReactDOM.render(<${componentName} />, div)${semiColon}
+})${semiColon}
+ `,
+
+ [`${fileName}.tsx`]: isFunctional
+ ? `
+import * as React from 'react'${semiColon}
+import './${fileName}.${cssExtension}'${semiColon}
+
+const ${componentName}: React.SFC = ({}) => (
+
+)${semiColon}
+
+export default ${componentName}${semiColon}
+
+ `
+ : `
+import * as React from 'react'${semiColon}
+import './${fileName}.${cssExtension}'${semiColon}
+
+class ${componentName} extends React.Component<{}, {}> {
+ public state = {}${semiColon}
+
+ public render() {
+ return (
+
+ )${semiColon}
+ }
+}
+
+export default ${componentName}${semiColon}
+ `,
+ })