https://github.com/500tech/react-course-ts
https://github.com/500tech/react-course-ts
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/500tech/react-course-ts
- Owner: 500tech
- Created: 2018-05-02T07:33:00.000Z (about 8 years ago)
- Default Branch: jpm/ts
- Last Pushed: 2022-12-02T02:45:50.000Z (over 3 years ago)
- Last Synced: 2025-04-30T10:33:29.428Z (about 1 year ago)
- Language: TypeScript
- Size: 2.31 MB
- Stars: 2
- Watchers: 13
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Setting up
```sh
npm init -y # Setup a new project with NPM using the defaults
npm install --save-dev typescript # install typescript as a dev dependency
npx -c "tsc --init" # Create a basic configuration for our compiler
```
## Create first typescript file
```ts
// index.ts
const x: number = 5;
console.log('#######', x);
```
Compile & Run:
```sh
npx -c "tsc -p ." && node .
```
# Getting serious
- Set `outDir` to `"./dist"`, and `rootDir` to `"./src"` in `tsconfig.json`
- Remove the generated `index.js`
- Move `index.ts` into `src` directory
## Watch mode (TS)
- Add a new script inside your `package.json`, called: `"watch-ts": "tsc -p . -w"`
- Run `npm run watch-ts`
- Run `node dist`
- Change your `index.ts` to print something else
- Re-run `node dist`
- Profit!
## Watch mode
- Run `npm install --save-dev nodemon concurrently`
- Add new scripts:
```json
{
...
"run-js": "nodemon dist/index.js",
"start": "concurrently 'npm:watch-ts' 'npm:run-js'"
}
```
- Run `npm start`, and change files for fun and profit :)