Permalink
Branch: master
Find file Copy path
124 lines (92 sloc) 2.3 KB

Typescript

Typescript with React

  1. Setup react using Webpacker react installer. Then run the typescript installer
bundle exec rails webpacker:install:typescript
yarn add @types/react @types/react-dom
  1. Rename the generated hello_react.js to hello_react.tsx. Make the file valid typescript and now you can use typescript, JSX with React.

Typescript with Vue components

  1. Setup vue using Webpacker vue installer. Then run the typescript installer
bundle exec rails webpacker:install:typescript
  1. Rename generated hello_vue.js to hello_vue.ts.
  2. Change generated config/webpack/loaders/typescript.js from
module.exports = {
  test: /\.(ts|tsx)?(\.erb)?$/,
  use: [{
    loader: 'ts-loader'
  }]
}

to

module.exports = {
  test: /\.(ts|tsx)?(\.erb)?$/,
  use: [{
    loader: 'ts-loader',
    options: {
      appendTsSuffixTo: [/\.vue$/]
    }
  }]
}

and now you can use <script lang="ts"> in your .vue component files.

HTML templates with Typescript and Angular

After you have installed Angular using bundle exec rails webpacker:install:angular you would need to follow these steps to add HTML templates support:

  1. Use yarn to add html-loader
yarn add html-loader
  1. Add html-loader to config/webpack/environment.js
environment.loaders.append('html', {
  test: /\.html$/,
  use: [{
    loader: 'html-loader',
    options: {
      minimize: true,
      removeAttributeQuotes: false,
      caseSensitive: true,
      customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
      customAttrAssign: [ /\)?\]?=/ ]
    }
  }]
})
  1. Add .html to config/webpacker.yml
  extensions:
    - .elm
    - .coffee
    - .html
  1. Setup a custom d.ts definition
// app/javascript/hello_angular/html.d.ts

declare module "*.html" {
  const content: string
  export default content
}
  1. Add a template.html file relative to app.component.ts
<h1>Hello {{name}}</h1>
  1. Import template into app.component.ts
import { Component } from '@angular/core'
import templateString from './template.html'

@Component({
  selector: 'hello-angular',
  template: templateString
})

export class AppComponent {
  name = 'Angular!'
}

That's all. Voila!