Skip to content

Instantly share code, notes, and snippets.

@croaky croaky/App.tsx
Last active Jan 5, 2020

Embed
What would you like to do?
Parcel + TypeScript + React

Directory tree:

.
├── package.json
├── src
│   ├── entrypoint.tsx
│   ├── index.html
│   └── ui
│       ├── App.tsx
│       └── shared
│           └── Reset.ts
├── start.sh
└── tsconfig.json

TypeScript's tsconfig.json sets paths to Parcel's ~ module resultion convention and baseUrl to src directory.

Parcel is given src/index.html as its input, which references src/entrypoint.tsx.

All TypeScript files in src may use the ~ non-relative import paths.

import * as React from 'react'
// routing, etc.
import { Reset } from '~/ui/shared/Reset'
export class App extends React.Component {
public render() {
return (
<div>
<title>Dashboard</title>
<Reset />
</div>
)
}
}
import * as React from 'react'
import { render } from 'react-dom'
// App wrapped with redux Provider, store, etc.
import { App } from '~/ui/App'
render(
<App />,
document.getElementById('root')
)
<!doctype html>
<html>
<body>
<div id='root'></div>
<script src='./entrypoint.tsx'></script>
</body>
</html>
{
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.4.2",
},
"devDependencies": {
"@types/node": "^10.7.0",
"@types/react": "^16.7.17",
"@types/react-dom": "^16.0.7",
"parcel-bundler": "1.10.0",
"typescript": "^3.0.1"
},
"scripts": {
"build": "$(npm bin)/parcel build ./src/index.html",
"start": "./start.sh"
}
}
#!/bin/bash
set -e
"$(npm bin)/tsc" --noEmit --watch &
"$(npm bin)/parcel" ./src/index.html
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"~*": ["./*"]
},
"typeRoots": ["node_modules/@types"]
},
"include": ["src/**/*"]
}
@Inori-Lover

This comment has been minimized.

Copy link

Inori-Lover commented Jan 5, 2020

it should be "~/*": ["./*"] but not "~*": ["./*"]

if writing "~*": ["./*"], vscode does not aware of this is a path and will not hint the right file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.