Gecko [ fernandoquevedodop.com ]

Name	Size	Permission
README.md.gz	7.38 KB	-rw-r--r--
assets.md	3.09 KB	-rw-r--r--
changelog.Debian.gz	643 B	-rw-r--r--
cloud9.md.gz	4.06 KB	-rw-r--r--
copyright	1.44 KB	-rw-r--r--
css.md.gz	2.4 KB	-rw-r--r--
deployment.md.gz	2.2 KB	-rw-r--r--
docker.md	1.56 KB	-rw-r--r--
engines.md.gz	2.19 KB	-rw-r--r--
env.md	1.93 KB	-rw-r--r--
es6.md	2.8 KB	-rw-r--r--
folder-structure.md	1.26 KB	-rw-r--r--
misc.md	470 B	-rw-r--r--
props.md.gz	1.73 KB	-rw-r--r--
testing.md.gz	1.84 KB	-rw-r--r--
troubleshooting.md.gz	2.69 KB	-rw-r--r--
typescript.md	2.64 KB	-rw-r--r--
v4-upgrade.md.gz	2.82 KB	-rw-r--r--
webpack-dev-server.md	2.85 KB	-rw-r--r--
webpack.md.gz	3.75 KB	-rw-r--r--
yarn.md	789 B	-rw-r--r--

Code Editor : typescript.md

# Typescript

## Typescript with React

1. Setup react using Webpacker [react installer](../README.md#react). Then run the typescript installer

```bash
bundle exec rails webpacker:install:typescript
yarn add @types/react @types/react-dom
```

2. 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](../README.md#vue). Then run the TypeScript installer

```bash
bundle exec rails webpacker:install:typescript
```

2. Rename generated `hello_vue.js` to `hello_vue.ts`.
3. Add the webpack plug-n-play plugin to your yarn packages with `yarn add pnp-webpack-plugin`.
4. Change the generated `config/webpack/loaders/typescript.js` from

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

```js
const PnpWebpackPlugin = require('pnp-webpack-plugin');

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

and now you can use `<script lang="ts">` in your `.vue` component files. See [the pnp-webpack-plugin docs for the `ts-loader` integration](https://github.com/arcanis/pnp-webpack-plugin#ts-loader-integration) 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

```bash
yarn add html-loader
```

2. Add html-loader to `config/webpack/environment.js`

```js
environment.loaders.append('html', {
  test: /\.html$/,
  use: [{
    loader: 'html-loader',
    options: {
      minimize: true,
      removeAttributeQuotes: false,
      caseSensitive: true,
      customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?$?/, /(?:)/] ],
      customAttrAssign: [ /$?\]?=/ ]
    }
  }]
})
```

3. Add `.html` to `config/webpacker.yml`

```yml
  extensions:
    - .elm
    - .coffee
    - .html
```

4. Setup a custom `d.ts` definition

```ts
// app/javascript/hello_angular/html.d.ts

declare module "*.html" {
  const content: string
  export default content
}
```

5. Add a template.html file relative to `app.component.ts`

```html
<h1>Hello {{name}}</h1>
```

6. Import template into `app.component.ts`

```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!

${this.title}

Code Editor : typescript.md