Denny Chang
Contact

  • Theme Mode：

  • Language：

From Javascript To Typescript
2022-10-17
From Javascript To Typescriptthe image is from unsplash

from Javascript to typescript

This project was built in javascript then, I thought, It's time to add something new Actually, I have already used typescript before in another project. But It started as typescript And this time, it's a transforming

So, that's start First Change file name from .js to .ts and .jsx to .tsx then jsconfig.json to tsconfig.json It's all done 🎉 because Gatsby natively supports Javascript and Typescript so, it's easy to change this

and go on, changing all your .js(.jsx) file to .ts(.tsx) gastby-config.js => gastby-config.ts;

gastby-config.ts 
  import { GatsbyConfig } from "gatsby";
  import * as dotenv from "dotenv";

  dotenv.config({ path: __dirname + "/.env" });

  export default {
    siteMetadata: {
    title: // name your site,
    siteUrl: // your site's url,
    },
    plugins: [
      ...all plugins you needed
    ],
  } as GatsbyConfig;

gastby-node.js => gastby-node.ts;

gastby-node.ts 
import { GatsbyNode } from "gatsby";
import * as path from "path";

export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
  actions,
}) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@components": path.resolve(__dirname, "src/components"),
        "@pages": path.resolve(__dirname, "src/pages"),
        "@layouts": path.resolve(__dirname, "src/layouts"),
        "@mock": path.resolve(__dirname, "src/mock"),
        "@images": path.resolve(__dirname, "src/images"),
        "@tool": path.resolve(__dirname, "src/tool"),
        "@static": path.resolve(__dirname, "static"),
      },
    },
  });
};

this setting let me to use alias sometimes you need to import another component from somewhere you may use in this way: import "../../compoents/some-components" so alias make it easier to import like : import "@components/some-components" way easier to read, and not messy

gastby-browser.jsx => gastby-browser.tsx;

gastby-browser.tsx 
import * as React from "react";
import type { GatsbyBrowser } from "gatsby";
import Layout from "@components/layout"; // 你可以加入自己設計的Layout Container

export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
  element,
}) => {
  return (
    <Layout>
      <h1>Hello World</h1>
      {element}
    </Layout>
  );
};

So far, It just doing fine, Layout Components will auto cover every pages but, later time, We will change this file because of some issue I met with i18n that's it for now 👋

And then We can go to change components though that typescript in react.js have several way to write a type, like generic type but, I'm not really get that far, still learning it so I just use some propTypes way to make Type maybe whan I get more knowing about typescript I will put it on here.

So most of my typescript is learing by their official website It's pretty clear and useful I will keep learing about tyepscript

this is today's sharing 👋