Skip to content

Latest commit

 

History

History
109 lines (78 loc) · 2.27 KB

typescript.md

File metadata and controls

109 lines (78 loc) · 2.27 KB
Raw

Typescript

Typescript with React

  1. Setup react using Webpacker react installer. Then run the typescript installer
bundle exec rails webpacker:install:typescript
  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 the 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 the generated babel.config.js from
["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }]

to

["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]

and now you can use <script lang="ts"> in your .vue component files. See the babel-preset-typescript-vue docs for more info.

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!