https://github.com/fadilxcoder/typescript
Typescript Basics & Mini PoC
https://github.com/fadilxcoder/typescript
axios courses jquery jsondb-api poc typescript udemy
Last synced: about 1 year ago
JSON representation
Typescript Basics & Mini PoC
- Host: GitHub
- URL: https://github.com/fadilxcoder/typescript
- Owner: fadilxcoder
- Created: 2022-08-21T11:41:11.000Z (over 3 years ago)
- Default Branch: poc
- Last Pushed: 2022-08-24T18:32:18.000Z (over 3 years ago)
- Last Synced: 2025-01-04T19:23:26.546Z (over 1 year ago)
- Topics: axios, courses, jquery, jsondb-api, poc, typescript, udemy
- Language: JavaScript
- Homepage: https://fadilxcoder.github.io/typescript/
- Size: 575 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notes
- https://github.com/fadilxcoder/typescript/tree/master (Udemy branch)
---
- Install typescript
```
npm i typescript
```
- Init the tsconfig and configure it
```
tsc --init
```
- tsconfig.json
```
{
"outDir": "./dist",
"rootDir": "./src",
}
```
- Configure Webpack
- RUN : `npm i -D webpack webpack-cli typescript ts-loader`
- NOTE : **("npm i -D X" is the shorthand for "npm install --save-dev X")**
- Configure `webpack.config.js` according to project
```js
const path = require('path');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
main: "./src/app.ts",
},
output: {
path: path.resolve(__dirname, './dist'),
filename: "app-bundle.js" // <--- Will be compiled to this single file
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
}
};
```
- Launch app with `http-server`
- Compile everything with `npx webpack` / `npx webpack --watch`
## Run typescript without compiling to JS
- Install `npm i @digitak/esrun -g`
- RUN `esrun ./src/app.ts `
```
$ esrun ./src/app.ts
-------------------------------
{
id: 1,
full_name: 'full_name',
email: 'email',
phone_number: 'phone_number',
address: 'address',
job: 'job',
company: 'company',
card_type: 'card_type',
account_number: 'account_number'
}
```
## Axios / JQuery - Api
- `npm install -D axios`
- `npm install --save-dev @types/jquery`
- `npm install jquery`
- Axios promise - fetch data
### Reference
- https://dev.to/silvenleaf/simplest-way-to-compile-all-typescript-into-one-single-js-file-19bj (HTML / Typescript / Webpack)
- https://webpack.js.org/configuration/ (webpack.config.js configuration)
- https://bobbyhadz.com/blog/typescript-http-request-axios (Axios)
### Preview
