https://github.com/damassi/babel-7-typescript-example

Example TypeScript project built on top of new Babel 7 features. Includes Jest and Enzyme.
https://github.com/damassi/babel-7-typescript-example

babel babel-preset-typescript typescript

Last synced: about 2 months ago
JSON representation

Example TypeScript project built on top of new Babel 7 features. Includes Jest and Enzyme.

• Host: GitHub
• URL: https://github.com/damassi/babel-7-typescript-example
• Owner: damassi
• Created: 2017-11-23T21:46:42.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-08T06:19:16.000Z (about 6 years ago)
• Last Synced: 2024-07-02T15:40:38.756Z (3 months ago)
• Topics: babel, babel-preset-typescript, typescript
• Language: JavaScript
• Homepage: http://artsy.github.io/blog/2017/11/27/Babel-7-and-TypeScript/
• Size: 69.3 KB
• Stars: 161
• Watchers: 8
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - babel-7-typescript-example - Example TypeScript project built on top of new Babel 7 features. Includes Jest and Enzyme. (JavaScript)

README

        
[![Build Status](https://travis-ci.org/damassi/babel-7-typescript-example.svg?branch=master)](https://travis-ci.org/damassi/babel-7-typescript-example)

# TypeScript + Babel 7

Example TypeScript project built on top of new Babel 7 features. Includes React 16, Jest and Enzyme (for tests). Since the TypeScript compiler is no longer required to compile sources you can keep your existing Babel pipeline and instead rely on editor-based type-checking or `tsc`.

## Installation

```sh

git clone https://github.com/damassi/babel-7-typescript-example && cd babel-7-typescript-example

yarn install

yarn start

yarn test:watch

yarn typecheck

```

**For a more complete example that uses Webpack see [this fork](https://github.com/emakina-cee-oss/babel-7-typescript-example/tree/webpack-support) -- thanks @flobacher.**

If using VSCode, make sure to install the recommended extensions.

## Example

```jsx

// App.tsx

import React, { Component } from 'react'

interface Props {

  name: string

}

export const App extends Component {

  render () {

    return (

      


        Hi {this.props.name} from .tsx!

      

    )

  }

}


// index.ts

import ReactDOM from 'react-dom/server'

import { App } from './components/App'

console.log(ReactDOM.renderToString())

```

```sh

yarn build (or babel src --out-dir dist --extensions '.ts,.tsx')

```