Setting up Typescript

Highlighted
Excursionist
35 3 1

Hi, does anyone have a config they can show that uses Typescript in their shopify app project? I used the Shopify CLI to scaffold an embedded app. The app itself is working but config matters are tough for me and I don't know how to get Typescript working with it.

 

I've tried using this config but it creates an Internal Server Error in the embedded app. It also produces lots of red errors in the webpack CLI:

 

// webpack.config.js
const path = require('path');

module.exports = {
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'awesome-typescript-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.ts', '.tsx', '.js' ],
  },
  output: {
    filename: '_app.js',
    path: path.resolve(__dirname, 'pages'),
  }
  , watch : true
  , watchOptions: {
    aggregateTimeout: 300
  }
  , devtool : 'source-map'
  , mode : 'development'
};

// .tsconfig
{
  "compilerOptions" : {
    "allowJs" : true,
    "module" : "commonjs",
    "target" : "es6",
    "sourceMap" : true,
    "noEmitOnError" : false,
    "jsx" : "react",
    "rootDir" : "src",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": false,
    "noImplicitReturns": false,
    "noImplicitThis": false,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": false,
    "noUnusedLocals": false
  },
  "exclude" : [
    "node_modules", "productionFiles"
  ]
  , "lib" : ["dom", "es2015", "es2017"]
  , "baseUrl" : "./"
  , "paths" : {
    "components/*" : "src/components/*"
  }
}
0 Likes