diff --git a/examples/classic-typescript/package.json b/examples/classic-typescript/package.json index 0b6516338c..a45a016c3d 100644 --- a/examples/classic-typescript/package.json +++ b/examples/classic-typescript/package.json @@ -12,6 +12,7 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", + "typecheck": "tsc", "dev": "docusaurus start" }, "dependencies": { @@ -26,6 +27,11 @@ "react-dom": "^17.0.1", "url-loader": "^4.1.1" }, + "devDependencies": { + "@docusaurus/module-type-aliases": "2.0.0-beta.7", + "@tsconfig/docusaurus": "^1.0.4", + "typescript": "^4.3.5" + }, "browserslist": { "production": [ ">0.5%", diff --git a/examples/classic-typescript/src/components/HomepageFeatures.js b/examples/classic-typescript/src/components/HomepageFeatures.tsx similarity index 66% rename from examples/classic-typescript/src/components/HomepageFeatures.js rename to examples/classic-typescript/src/components/HomepageFeatures.tsx index 16f820b103..3897078da1 100644 --- a/examples/classic-typescript/src/components/HomepageFeatures.js +++ b/examples/classic-typescript/src/components/HomepageFeatures.tsx @@ -1,11 +1,23 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ import React from 'react'; import clsx from 'clsx'; import styles from './HomepageFeatures.module.css'; -const FeatureList = [ +type FeatureItem = { + title: string; + image: string; + description: JSX.Element; +}; + +const FeatureList: FeatureItem[] = [ { title: 'Easy to Use', - Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default, + image: '/img/undraw_docusaurus_mountain.svg', description: ( <> Docusaurus was designed from the ground up to be easily installed and @@ -15,7 +27,7 @@ const FeatureList = [ }, { title: 'Focus on What Matters', - Svg: require('../../static/img/undraw_docusaurus_tree.svg').default, + image: '/img/undraw_docusaurus_tree.svg', description: ( <> Docusaurus lets you focus on your docs, and we'll do the chores. Go @@ -25,7 +37,7 @@ const FeatureList = [ }, { title: 'Powered by React', - Svg: require('../../static/img/undraw_docusaurus_react.svg').default, + image: '/img/undraw_docusaurus_react.svg', description: ( <> Extend or customize your website layout by reusing React. Docusaurus can @@ -35,11 +47,11 @@ const FeatureList = [ }, ]; -function Feature({Svg, title, description}) { +function Feature({title, image, description}: FeatureItem) { return (
- + {title}

{title}

@@ -49,7 +61,7 @@ function Feature({Svg, title, description}) { ); } -export default function HomepageFeatures() { +export default function HomepageFeatures(): JSX.Element { return (
diff --git a/examples/classic-typescript/src/pages/index.js b/examples/classic-typescript/src/pages/index.tsx similarity index 96% rename from examples/classic-typescript/src/pages/index.js rename to examples/classic-typescript/src/pages/index.tsx index 27c21e8f99..cc4f721127 100644 --- a/examples/classic-typescript/src/pages/index.js +++ b/examples/classic-typescript/src/pages/index.tsx @@ -25,7 +25,7 @@ function HomepageHeader() { ); } -export default function Home() { +export default function Home(): JSX.Element { const {siteConfig} = useDocusaurusContext(); return (