mirror of
https://github.com/LeCoupa/awesome-cheatsheets.git
synced 2026-05-02 20:49:59 -07:00
Compare commits
2 Commits
master
..
e86431e82b
| Author | SHA1 | Date | |
|---|---|---|---|
 rparwaiz
|
e86431e82b | ||
|
rparwaiz
|
9cf24371bf |
@@ -1,29 +1,17 @@
|
|||||||
<div align="center">
|
|
||||||
|
|
||||||
[](https://lecoupa.github.io/awesome-cheatsheets/)
|
[](https://lecoupa.github.io/awesome-cheatsheets/)
|
||||||
|
|
||||||
<a href="https://trendshift.io/repositories/5584" target="_blank">
|
|
||||||
<img src="https://trendshift.io/api/badge/repositories/5584" alt="LeCoupa%2Fawesome-cheatsheets | Trendshift" width="250" height="55"/>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
[](https://awesome.re) [](https://github.com/LeCoupa/awesome-cheatsheets/blob/master/LICENSE)
|
[](https://awesome.re) [](https://github.com/LeCoupa/awesome-cheatsheets/blob/master/LICENSE)
|
||||||
|
|
||||||
**WEBSITE DIRECTORY**: [Available here](https://lecoupa.github.io/awesome-cheatsheets/)
|
**WEBSITE DIRECTORY**: [Available here](https://lecoupa.github.io/awesome-cheatsheets/).
|
||||||
|
|
||||||
> 📚 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
|
> 📚 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🤔 Why Awesome-Cheatsheets?
|
## 🤔 Why Awesome-Cheatsheets?
|
||||||
|
|
||||||
I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I re-organized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
|
I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I re-organized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
|
||||||
|
|
||||||
Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
|
Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📚 Table of Contents
|
## 📚 Table of Contents
|
||||||
|
|
||||||
### 📃 Languages
|
### 📃 Languages
|
||||||
@@ -32,48 +20,46 @@ Feel free to take a look. You might learn new things. They have been designed to
|
|||||||
<summary>View cheatsheets</summary>
|
<summary>View cheatsheets</summary>
|
||||||
|
|
||||||
#### Command line interface
|
#### Command line interface
|
||||||
|
|
||||||
- [Bash](languages/bash.sh)
|
- [Bash](languages/bash.sh)
|
||||||
|
|
||||||
#### Imperative
|
#### Imperative
|
||||||
|
|
||||||
- [C](languages/C.txt)
|
- [C](languages/C.txt)
|
||||||
- [C#](languages/C%23.txt)
|
- [C#](languages/C%23.txt)
|
||||||
- [Go](languages/golang.md)
|
- [Go](languages/golang.md)
|
||||||
- [Java](languages/java.md)
|
- [Java](languages/java.md)
|
||||||
- [PHP](languages/php.php)
|
- [PHP](languages/php.php)
|
||||||
- [Python](languages/python.md)
|
- [Python](languages/python.md)
|
||||||
- [XML](languages/XML.md)
|
|
||||||
|
|
||||||
#### Functional
|
#### Functional
|
||||||
|
|
||||||
- [JavaScript](languages/javascript.js)
|
- [JavaScript](languages/javascript.js)
|
||||||
- [Typescript](languages/typescript.md)
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 📦 Backend
|
### 📦 Backend
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
<summary>View cheatsheets</summary>
|
<summary>View cheatsheets</summary>
|
||||||
|
|
||||||
#### PHP
|
#### PHP
|
||||||
|
|
||||||
- [Laravel](backend/laravel.php)
|
- [Laravel](backend/laravel.php)
|
||||||
|
|
||||||
#### Python
|
#### Python
|
||||||
|
|
||||||
- [Django](backend/django.py)
|
- [Django](backend/django.py)
|
||||||
|
|
||||||
#### JavaScript
|
#### Javascript
|
||||||
|
|
||||||
- [Adonis.js](backend/adonis.js)
|
- [Adonis.js](backend/adonis.js)
|
||||||
- [Express.js](backend/express.js)
|
- [Express.js](backend/express.js)
|
||||||
- [Feathers.js](backend/feathers.js)
|
- [Feathers.js](backend/feathers.js)
|
||||||
- [Moleculer](backend/moleculer.js)
|
- [Moleculer](backend/moleculer.js)
|
||||||
- [Node.js](backend/node.js)
|
- [Node.js](backend/node.js)
|
||||||
- [Sails.js](backend/sails.js)
|
- [Sails.js](backend/sails.js)
|
||||||
|
</details>
|
||||||
</details>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
||||||
### 🌐 Frontend
|
### 🌐 Frontend
|
||||||
|
|
||||||
@@ -81,20 +67,19 @@ Feel free to take a look. You might learn new things. They have been designed to
|
|||||||
<summary>View cheatsheets</summary>
|
<summary>View cheatsheets</summary>
|
||||||
|
|
||||||
#### Basics
|
#### Basics
|
||||||
|
|
||||||
- [HTML5](frontend/html5.html)
|
- [HTML5](frontend/html5.html)
|
||||||
- [CSS3](frontend/css3.css)
|
- [CSS3](frontend/css3.css)
|
||||||
- [Typescript](frontend/typescript.ts)
|
|
||||||
|
|
||||||
#### Frameworks
|
#### Frameworks
|
||||||
|
|
||||||
- [React.js](frontend/react.js)
|
- [React.js](frontend/react.js)
|
||||||
- [Vue.js](frontend/vue.js)
|
- [Vue.js](frontend/vue.js)
|
||||||
- [Tailwind.css](frontend/tailwind.css)
|
- [Tailwind.css](frontend/tailwind.css)
|
||||||
- [Ember.js](frontend/ember.js)
|
- [Ember.js](frontend/ember.js)
|
||||||
- [Angular (2+)](frontend/angular.js)
|
- [Angular (2+)](frontend/angular.js)
|
||||||
- [AngularJS](frontend/angularjs.js)
|
- [AngularJS](frontend/angularjs.js)
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 🗃️ Databases
|
### 🗃️ Databases
|
||||||
|
|
||||||
@@ -102,15 +87,13 @@ Feel free to take a look. You might learn new things. They have been designed to
|
|||||||
<summary>View cheatsheets</summary>
|
<summary>View cheatsheets</summary>
|
||||||
|
|
||||||
#### SQL
|
#### SQL
|
||||||
|
|
||||||
- [MySQL](databases/mysql.sh)
|
- [MySQL](databases/mysql.sh)
|
||||||
|
|
||||||
#### NoSQL
|
#### NoSQL
|
||||||
- [MongoDB](databases/mongodb.sh)
|
|
||||||
- [Redis](databases/redis.sh)
|
- [Redis](databases/redis.sh)
|
||||||
|
</details>
|
||||||
</details>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 🔧 Tools
|
### 🔧 Tools
|
||||||
|
|
||||||
@@ -118,6 +101,7 @@ Feel free to take a look. You might learn new things. They have been designed to
|
|||||||
<summary>View cheatsheets</summary>
|
<summary>View cheatsheets</summary>
|
||||||
|
|
||||||
#### Development
|
#### Development
|
||||||
|
|
||||||
- [cURL](tools/curl.sh)
|
- [cURL](tools/curl.sh)
|
||||||
- [Drush](tools/drush.sh)
|
- [Drush](tools/drush.sh)
|
||||||
- [Elasticsearch](tools/elasticsearch.js)
|
- [Elasticsearch](tools/elasticsearch.js)
|
||||||
@@ -130,35 +114,25 @@ Feel free to take a look. You might learn new things. They have been designed to
|
|||||||
- [Xcode](tools/xcode.txt)
|
- [Xcode](tools/xcode.txt)
|
||||||
|
|
||||||
#### Infrastructure
|
#### Infrastructure
|
||||||
|
|
||||||
- [AWS CLI](tools/aws.sh)
|
- [AWS CLI](tools/aws.sh)
|
||||||
- [Docker](tools/docker.sh)
|
- [Docker](tools/docker.sh)
|
||||||
- [GCP CLI](tools/gcp.md)
|
|
||||||
- [Heroku CLI](tools/heroku.sh)
|
- [Heroku CLI](tools/heroku.sh)
|
||||||
- [Kubernetes](tools/kubernetes.md)
|
- [Kubernetes](tools/kubernetes.md)
|
||||||
- [macOS](tools/macos.sh)
|
|
||||||
- [Nanobox Boxfile](tools/nanobox_boxfile.yml)
|
- [Nanobox Boxfile](tools/nanobox_boxfile.yml)
|
||||||
- [Nanobox CLI](tools/nanobox_cli.sh)
|
- [Nanobox CLI](tools/nanobox_cli.sh)
|
||||||
- [Nginx](tools/nginx.sh)
|
- [Nginx](tools/nginx.sh)
|
||||||
- [PM2](tools/pm2.sh)
|
- [PM2](tools/pm2.sh)
|
||||||
- [Ubuntu](tools/ubuntu.sh)
|
- [Ubuntu](tools/ubuntu.sh)
|
||||||
- [Firebase CLI](tools/firebase_cli.md)
|
- [Firebase CLI](tools/firebase_cli.md)
|
||||||
|
</details>
|
||||||
</details>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🙌🏼 How to Contribute?
|
## 🙌🏼 How to Contribute?
|
||||||
|
|
||||||
You are more than welcome to contribute and build your own cheat sheet for your favorite programming language, framework or development tool. Just submit changes via pull request and I will review them before merging.
|
You are more than welcome to contribute and build your own cheat sheet for your favorite programming language, framework or development tool. Just submit changes via pull request and I will review them before merging.
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 👩💻👨💻 Our valuable Contributors
|
## 👩💻👨💻 Our valuable Contributors
|
||||||
|
|
||||||
<div align="center">
|
<p align="center"><a href="https://github.com/LeCoupa/awesome-cheatsheets/graphs/contributors">
|
||||||
|
|
||||||
<a href="https://github.com/LeCoupa/awesome-cheatsheets/graphs/contributors">
|
|
||||||
<img src="https://contributors-img.web.app/image?repo=LeCoupa/awesome-cheatsheets" />
|
<img src="https://contributors-img.web.app/image?repo=LeCoupa/awesome-cheatsheets" />
|
||||||
</a>
|
</a></p>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -82,33 +82,3 @@ SELECT User, Host FROM mysql.user; # List all current MySQL users
|
|||||||
|
|
||||||
SET GLOBAL general_log = 'ON'; # Enable query logging
|
SET GLOBAL general_log = 'ON'; # Enable query logging
|
||||||
SHOW FULL PROCESSLIST; # Show the last queries executed in MySQL
|
SHOW FULL PROCESSLIST; # Show the last queries executed in MySQL
|
||||||
|
|
||||||
# *****************************************************************************
|
|
||||||
# Altering Table Structure
|
|
||||||
# *****************************************************************************
|
|
||||||
|
|
||||||
ALTER TABLE table_name ADD COLUMN column_name datatype; # Add a new column to an existing table
|
|
||||||
ALTER TABLE table_name MODIFY COLUMN column_name datatype; # Change the data type of a column
|
|
||||||
ALTER TABLE table_name RENAME COLUMN old_name TO new_name; # Rename a column (MySQL 8.0+)
|
|
||||||
ALTER TABLE table_name DROP COLUMN column_name; # Remove a column from a table
|
|
||||||
ALTER TABLE old_table_name RENAME TO new_table_name; # Rename an entire table
|
|
||||||
|
|
||||||
# *****************************************************************************
|
|
||||||
# Indexes (Performance Tuning)
|
|
||||||
# *****************************************************************************
|
|
||||||
|
|
||||||
CREATE INDEX idx_name ON table_name (column_name); # Create a standard index to speed up queries
|
|
||||||
CREATE UNIQUE INDEX idx_name ON table_name (column_name); # Create a unique index (no duplicate values)
|
|
||||||
SHOW INDEX FROM table_name; # List all indexes on a specific table
|
|
||||||
DROP INDEX idx_name ON table_name; # Remove an index from a table
|
|
||||||
EXPLAIN SELECT * FROM table_name WHERE condition; # Analyze how MySQL executes a query (Check index usage)
|
|
||||||
|
|
||||||
# *****************************************************************************
|
|
||||||
# Transactions (Data Integrity)
|
|
||||||
# *****************************************************************************
|
|
||||||
|
|
||||||
START TRANSACTION; # Begin a new transaction
|
|
||||||
COMMIT; # Save all changes made during the transaction
|
|
||||||
ROLLBACK; # Undo all changes if an error occurs before commit
|
|
||||||
SET AUTOCOMMIT = 0; # Disable automatic commits for the current session
|
|
||||||
SET AUTOCOMMIT = 1; # Re-enable automatic commits after finishing manual transactions
|
|
||||||
|
|||||||
+47
-71
@@ -43,14 +43,11 @@
|
|||||||
|
|
||||||
.hidden /* display: none; */
|
.hidden /* display: none; */
|
||||||
.block /* display: block; */
|
.block /* display: block; */
|
||||||
.flow-root /* display: flow-root; */
|
|
||||||
.inline-block /* display: inline-block; */
|
.inline-block /* display: inline-block; */
|
||||||
.inline /* display: inline; */
|
.inline /* display: inline; */
|
||||||
.flex /* display: flex; */
|
.flex /* display: flex; */
|
||||||
.inline-flex /* display: inline-flex; */
|
.inline-flex /* display: inline-flex; */
|
||||||
.grid /* display: grid; */
|
.grid /* display: grid; */
|
||||||
.inline-grid /* display: inline-grid; */
|
|
||||||
.contents /* display: contents; */
|
|
||||||
.table /* display: table; */
|
.table /* display: table; */
|
||||||
.table-caption /* display: table-caption; */
|
.table-caption /* display: table-caption; */
|
||||||
.table-cell /* display: table-cell; */
|
.table-cell /* display: table-cell; */
|
||||||
@@ -71,6 +68,7 @@
|
|||||||
.float-right /* float: right; */
|
.float-right /* float: right; */
|
||||||
.float-left /* float: left; */
|
.float-left /* float: left; */
|
||||||
.float-none /* float: none; */
|
.float-none /* float: none; */
|
||||||
|
.clearfix /* &::after { content: ""; display: table; clear: both; } */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Clear
|
* Clear
|
||||||
@@ -132,6 +130,8 @@
|
|||||||
.overflow-y-visible /* overflow-y: visible; */
|
.overflow-y-visible /* overflow-y: visible; */
|
||||||
.overflow-x-scroll /* overflow-x: scroll; */
|
.overflow-x-scroll /* overflow-x: scroll; */
|
||||||
.overflow-y-scroll /* overflow-y: scroll; */
|
.overflow-y-scroll /* overflow-y: scroll; */
|
||||||
|
.scrolling-touch /* -webkit-overflow-scrolling: touch; */
|
||||||
|
.scrolling-auto /* -webkit-overflow-scrolling: auto; */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Position
|
* Position
|
||||||
@@ -219,7 +219,7 @@
|
|||||||
* By default, only responsive variants are generated for flex-wrap utilities.
|
* By default, only responsive variants are generated for flex-wrap utilities.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.flex-nowrap /* flex-wrap: nowrap; */
|
.flex-no-wrap /* flex-wrap: nowrap; */
|
||||||
.flex-wrap /* flex-wrap: wrap; */
|
.flex-wrap /* flex-wrap: wrap; */
|
||||||
.flex-wrap-reverse /* flex-wrap: wrap-reverse; */
|
.flex-wrap-reverse /* flex-wrap: wrap-reverse; */
|
||||||
|
|
||||||
@@ -478,44 +478,44 @@
|
|||||||
.gap-56 /* gap: 14rem; */
|
.gap-56 /* gap: 14rem; */
|
||||||
.gap-64 /* gap: 16rem; */
|
.gap-64 /* gap: 16rem; */
|
||||||
.gap-px /* gap: 1px; */
|
.gap-px /* gap: 1px; */
|
||||||
.gap-y-0 /* row-gap: 0; */
|
.row-gap-0 /* row-gap: 0; */
|
||||||
.gap-y-1 /* row-gap: 0.25rem; */
|
.row-gap-1 /* row-gap: 0.25rem; */
|
||||||
.gap-y-2 /* row-gap: 0.5rem; */
|
.row-gap-2 /* row-gap: 0.5rem; */
|
||||||
.gap-y-3 /* row-gap: 0.75rem; */
|
.row-gap-3 /* row-gap: 0.75rem; */
|
||||||
.gap-y-4 /* row-gap: 1rem; */
|
.row-gap-4 /* row-gap: 1rem; */
|
||||||
.gap-y-5 /* row-gap: 1.25rem; */
|
.row-gap-5 /* row-gap: 1.25rem; */
|
||||||
.gap-y-6 /* row-gap: 1.5rem; */
|
.row-gap-6 /* row-gap: 1.5rem; */
|
||||||
.gap-y-8 /* row-gap: 2rem; */
|
.row-gap-8 /* row-gap: 2rem; */
|
||||||
.gap-y-10 /* row-gap: 2.5rem; */
|
.row-gap-10 /* row-gap: 2.5rem; */
|
||||||
.gap-y-12 /* row-gap: 3rem; */
|
.row-gap-12 /* row-gap: 3rem; */
|
||||||
.gap-y-16 /* row-gap: 4rem; */
|
.row-gap-16 /* row-gap: 4rem; */
|
||||||
.gap-y-20 /* row-gap: 5rem; */
|
.row-gap-20 /* row-gap: 5rem; */
|
||||||
.gap-y-24 /* row-gap: 6rem; */
|
.row-gap-24 /* row-gap: 6rem; */
|
||||||
.gap-y-32 /* row-gap: 8rem; */
|
.row-gap-32 /* row-gap: 8rem; */
|
||||||
.gap-y-40 /* row-gap: 10rem; */
|
.row-gap-40 /* row-gap: 10rem; */
|
||||||
.gap-y-48 /* row-gap: 12rem; */
|
.row-gap-48 /* row-gap: 12rem; */
|
||||||
.gap-y-56 /* row-gap: 14rem; */
|
.row-gap-56 /* row-gap: 14rem; */
|
||||||
.gap-y-64 /* row-gap: 16rem; */
|
.row-gap-64 /* row-gap: 16rem; */
|
||||||
.gap-y-px /* row-gap: 1px; */
|
.row-gap-px /* row-gap: 1px; */
|
||||||
.gap-x-0 /* column-gap: 0; */
|
.col-gap-0 /* column-gap: 0; */
|
||||||
.gap-x-1 /* column-gap: 0.25rem; */
|
.col-gap-1 /* column-gap: 0.25rem; */
|
||||||
.gap-x-2 /* column-gap: 0.5rem; */
|
.col-gap-2 /* column-gap: 0.5rem; */
|
||||||
.gap-x-3 /* column-gap: 0.75rem; */
|
.col-gap-3 /* column-gap: 0.75rem; */
|
||||||
.gap-x-4 /* column-gap: 1rem; */
|
.col-gap-4 /* column-gap: 1rem; */
|
||||||
.gap-x-5 /* column-gap: 1.25rem; */
|
.col-gap-5 /* column-gap: 1.25rem; */
|
||||||
.gap-x-6 /* column-gap: 1.5rem; */
|
.col-gap-6 /* column-gap: 1.5rem; */
|
||||||
.gap-x-8 /* column-gap: 2rem; */
|
.col-gap-8 /* column-gap: 2rem; */
|
||||||
.gap-x-10 /* column-gap: 2.5rem; */
|
.col-gap-10 /* column-gap: 2.5rem; */
|
||||||
.gap-x-12 /* column-gap: 3rem; */
|
.col-gap-12 /* column-gap: 3rem; */
|
||||||
.gap-x-16 /* column-gap: 4rem; */
|
.col-gap-16 /* column-gap: 4rem; */
|
||||||
.gap-x-20 /* column-gap: 5rem; */
|
.col-gap-20 /* column-gap: 5rem; */
|
||||||
.gap-x-24 /* column-gap: 6rem; */
|
.col-gap-24 /* column-gap: 6rem; */
|
||||||
.gap-x-32 /* column-gap: 8rem; */
|
.col-gap-32 /* column-gap: 8rem; */
|
||||||
.gap-x-40 /* column-gap: 10rem; */
|
.col-gap-40 /* column-gap: 10rem; */
|
||||||
.gap-x-48 /* column-gap: 12rem; */
|
.col-gap-48 /* column-gap: 12rem; */
|
||||||
.gap-x-56 /* column-gap: 14rem; */
|
.col-gap-56 /* column-gap: 14rem; */
|
||||||
.gap-x-64 /* column-gap: 16rem; */
|
.col-gap-64 /* column-gap: 16rem; */
|
||||||
.gap-x-px /* column-gap: 1px; */
|
.col-gap-px /* column-gap: 1px; */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Grid Auto Flow
|
* Grid Auto Flow
|
||||||
@@ -1153,8 +1153,8 @@
|
|||||||
* By default, only responsive, hover and focus variants are generated for font weight utilities.
|
* By default, only responsive, hover and focus variants are generated for font weight utilities.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.font-thin /* font-weight: 100; */
|
.font-hairline /* font-weight: 100; */
|
||||||
.font-extralight /* font-weight: 200; */
|
.font-thin /* font-weight: 200; */
|
||||||
.font-light /* font-weight: 300; */
|
.font-light /* font-weight: 300; */
|
||||||
.font-normal /* font-weight: 400; */
|
.font-normal /* font-weight: 400; */
|
||||||
.font-medium /* font-weight: 500; */
|
.font-medium /* font-weight: 500; */
|
||||||
@@ -1479,7 +1479,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.whitespace-normal /* white-space: normal; */
|
.whitespace-normal /* white-space: normal; */
|
||||||
.whitespace-nowrap /* white-space: nowrap; */
|
.whitespace-no-wrap /* white-space: nowrap; */
|
||||||
.whitespace-pre /* white-space: pre; */
|
.whitespace-pre /* white-space: pre; */
|
||||||
.whitespace-pre-line /* white-space: pre-line; */
|
.whitespace-pre-line /* white-space: pre-line; */
|
||||||
.whitespace-pre-wrap /* white-space: pre-wrap; */
|
.whitespace-pre-wrap /* white-space: pre-wrap; */
|
||||||
@@ -1902,6 +1902,7 @@
|
|||||||
* By default, only responsive, hover and focus variants are generated for box shadow utilities.
|
* By default, only responsive, hover and focus variants are generated for box shadow utilities.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
.shadow-xs /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); */
|
||||||
.shadow-sm /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */
|
.shadow-sm /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */
|
||||||
.shadow /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
|
.shadow /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
|
||||||
.shadow-md /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
|
.shadow-md /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
|
||||||
@@ -1909,34 +1910,9 @@
|
|||||||
.shadow-xl /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
|
.shadow-xl /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
|
||||||
.shadow-2xl /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
|
.shadow-2xl /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
|
||||||
.shadow-inner /* box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); */
|
.shadow-inner /* box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); */
|
||||||
|
.shadow-outline /* box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); */
|
||||||
.shadow-none /* box-shadow: none; */
|
.shadow-none /* box-shadow: none; */
|
||||||
|
|
||||||
/*
|
|
||||||
* RING
|
|
||||||
* --------------------
|
|
||||||
* Utilities for creating outline rings with box-shadows.
|
|
||||||
* Replaced the old .shadow-outline utility.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.ring-0 /* box-shadow: 0 0 0 0px; */
|
|
||||||
.ring-1 /* box-shadow: 0 0 0 1px; */
|
|
||||||
.ring-2 /* box-shadow: 0 0 0 2px; */
|
|
||||||
.ring-4 /* box-shadow: 0 0 0 4px; */
|
|
||||||
.ring-8 /* box-shadow: 0 0 0 8px; */
|
|
||||||
.ring /* box-shadow: 0 0 0 3px; */
|
|
||||||
.ring-inset /* --ring-inset: inset; */
|
|
||||||
|
|
||||||
.ring-transparent /* --ring-color: transparent; */
|
|
||||||
.ring-black /* --ring-color: #000; */
|
|
||||||
.ring-white /* --ring-color: #fff; */
|
|
||||||
.ring-current /* --ring-color: currentColor; */
|
|
||||||
|
|
||||||
.ring-offset-0 /* --ring-offset-width: 0px; */
|
|
||||||
.ring-offset-1 /* --ring-offset-width: 1px; */
|
|
||||||
.ring-offset-2 /* --ring-offset-width: 2px; */
|
|
||||||
.ring-offset-4 /* --ring-offset-width: 4px; */
|
|
||||||
.ring-offset-8 /* --ring-offset-width: 8px; */
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* OPACITY
|
* OPACITY
|
||||||
* --------------------
|
* --------------------
|
||||||
|
|||||||
@@ -1,670 +0,0 @@
|
|||||||
/****************************
|
|
||||||
* TYPESCRIPT CHEATSHEET - Quick Reference
|
|
||||||
* Learn more: https://www.typescriptlang.org/docs/
|
|
||||||
* Playground: https://www.typescriptlang.org/play
|
|
||||||
* Handbook: https://www.typescriptlang.org/handbook/
|
|
||||||
*
|
|
||||||
* Table of contents
|
|
||||||
* -------------------
|
|
||||||
* 01 | Basic Types
|
|
||||||
* 02 | Variables & Arrays
|
|
||||||
* 03 | Functions
|
|
||||||
* 04 | Objects & Interfaces
|
|
||||||
* 05 | Classes
|
|
||||||
* 06 | Generics
|
|
||||||
* 07 | Union & Literal Types
|
|
||||||
* 08 | Type Guards & Assertions
|
|
||||||
* 09 | Utility Types
|
|
||||||
* 10 | Enums
|
|
||||||
* 11 | Modules
|
|
||||||
* 12 | Advanced Types
|
|
||||||
* 13 | Decorators
|
|
||||||
* 14 | Configuration
|
|
||||||
* 15 | Common Patterns
|
|
||||||
*****************************/
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 01: Basic Types -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Primitive Types
|
|
||||||
let str: string = "hello";
|
|
||||||
let num: number = 42;
|
|
||||||
let bool: boolean = true;
|
|
||||||
let undef: undefined = undefined;
|
|
||||||
let nul: null = null;
|
|
||||||
|
|
||||||
// Special Types
|
|
||||||
let anything: any = "can be anything";
|
|
||||||
let unknown: unknown = "type-safe any";
|
|
||||||
let nothing: void = undefined;
|
|
||||||
let never: never = (() => { throw new Error() })();
|
|
||||||
|
|
||||||
// Type Inference
|
|
||||||
let auto = "TypeScript infers string";
|
|
||||||
let nums = [1, 2, 3]; // number[]
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 02: Variables & Arrays -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Arrays
|
|
||||||
let numbers: number[] = [1, 2, 3];
|
|
||||||
let strings: Array<string> = ["a", "b"];
|
|
||||||
let mixed: (string | number)[] = [1, "two"];
|
|
||||||
|
|
||||||
// Tuples
|
|
||||||
let tuple: [string, number] = ["hello", 42];
|
|
||||||
let namedTuple: [name: string, age: number] = ["John", 30];
|
|
||||||
|
|
||||||
// Destructuring
|
|
||||||
let [first, second] = tuple;
|
|
||||||
let [x, y, ...rest] = [1, 2, 3, 4, 5];
|
|
||||||
|
|
||||||
// Object Destructuring
|
|
||||||
let {name, age} = {name: "John", age: 30};
|
|
||||||
let {a: newName, b = 10} = {a: "value"}; // rename & default
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 03: Functions -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Function Declaration
|
|
||||||
function add(x: number, y: number): number {
|
|
||||||
return x + y;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Arrow Functions
|
|
||||||
const multiply = (x: number, y: number): number => x * y;
|
|
||||||
const greet = (name: string): void => console.log(`Hello ${name}`);
|
|
||||||
|
|
||||||
// Optional & Default Parameters
|
|
||||||
function build(first: string, last?: string, age = 25): string {
|
|
||||||
return `${first} ${last || ""} (${age})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rest Parameters
|
|
||||||
function sum(...nums: number[]): number {
|
|
||||||
return nums.reduce((a, b) => a + b, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function Overloads
|
|
||||||
function format(x: string): string;
|
|
||||||
function format(x: number): string;
|
|
||||||
function format(x: string | number): string {
|
|
||||||
return x.toString();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function Types
|
|
||||||
type MathOp = (x: number, y: number) => number;
|
|
||||||
const divide: MathOp = (x, y) => x / y;
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 04: Objects & Interfaces -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Object Types
|
|
||||||
let person: {name: string, age: number} = {name: "John", age: 30};
|
|
||||||
|
|
||||||
// Interface
|
|
||||||
interface User {
|
|
||||||
readonly id: number;
|
|
||||||
name: string;
|
|
||||||
email?: string; // optional
|
|
||||||
[key: string]: any; // index signature
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extending Interfaces
|
|
||||||
interface Admin extends User {
|
|
||||||
permissions: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Multiple Inheritance
|
|
||||||
interface Timestamped {
|
|
||||||
createdAt: Date;
|
|
||||||
}
|
|
||||||
interface AdminUser extends User, Timestamped {
|
|
||||||
role: "admin";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function in Interface
|
|
||||||
interface Calculator {
|
|
||||||
add(x: number, y: number): number;
|
|
||||||
subtract: (x: number, y: number) => number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 05: Classes -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Basic Class
|
|
||||||
class Animal {
|
|
||||||
public name: string;
|
|
||||||
private age: number;
|
|
||||||
protected species: string;
|
|
||||||
readonly id: number;
|
|
||||||
|
|
||||||
constructor(name: string, age: number) {
|
|
||||||
this.name = name;
|
|
||||||
this.age = age;
|
|
||||||
this.species = "unknown";
|
|
||||||
this.id = Math.random();
|
|
||||||
}
|
|
||||||
|
|
||||||
speak(): void {
|
|
||||||
console.log(`${this.name} makes a sound`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inheritance
|
|
||||||
class Dog extends Animal {
|
|
||||||
breed: string;
|
|
||||||
|
|
||||||
constructor(name: string, age: number, breed: string) {
|
|
||||||
super(name, age);
|
|
||||||
this.breed = breed;
|
|
||||||
}
|
|
||||||
|
|
||||||
speak(): void {
|
|
||||||
console.log(`${this.name} barks`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Abstract Class
|
|
||||||
abstract class Shape {
|
|
||||||
abstract area(): number;
|
|
||||||
|
|
||||||
display(): void {
|
|
||||||
console.log(`Area: ${this.area()}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static Members
|
|
||||||
class MathUtils {
|
|
||||||
static PI = 3.14159;
|
|
||||||
static circle(radius: number): number {
|
|
||||||
return 2 * MathUtils.PI * radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters/Setters
|
|
||||||
class Person {
|
|
||||||
private _age: number = 0;
|
|
||||||
|
|
||||||
get age(): number {
|
|
||||||
return this._age;
|
|
||||||
}
|
|
||||||
|
|
||||||
set age(value: number) {
|
|
||||||
if (value >= 0) this._age = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 06: Generics -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Generic Functions
|
|
||||||
function identity<T>(arg: T): T { return arg; }
|
|
||||||
const result = identity<string>("hello");
|
|
||||||
const inferred = identity(42); // T inferred as number
|
|
||||||
|
|
||||||
// Multiple Type Parameters
|
|
||||||
function pair<T, U>(first: T, second: U): [T, U] {
|
|
||||||
return [first, second];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generic Interface
|
|
||||||
interface Container<T> {
|
|
||||||
value: T;
|
|
||||||
getValue(): T;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generic Class
|
|
||||||
class Box<T> {
|
|
||||||
contents: T;
|
|
||||||
constructor(value: T) {
|
|
||||||
this.contents = value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Constraints
|
|
||||||
interface HasLength {
|
|
||||||
length: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
function logLength<T extends HasLength>(arg: T): void {
|
|
||||||
console.log(arg.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Keyof Constraint
|
|
||||||
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
|
|
||||||
return obj[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 07: Union & Literal Types -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Union Types
|
|
||||||
type StringOrNumber = string | number;
|
|
||||||
type Status = "loading" | "success" | "error";
|
|
||||||
|
|
||||||
function process(id: string | number): void {
|
|
||||||
if (typeof id === "string") {
|
|
||||||
console.log(id.toUpperCase());
|
|
||||||
} else {
|
|
||||||
console.log(id.toFixed(2));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Intersection Types
|
|
||||||
type Person = {name: string};
|
|
||||||
type Employee = {company: string};
|
|
||||||
type Staff = Person & Employee; // has both properties
|
|
||||||
|
|
||||||
// Literal Types
|
|
||||||
type Theme = "light" | "dark";
|
|
||||||
type Port = 3000 | 8080 | 9000;
|
|
||||||
type Success = true;
|
|
||||||
|
|
||||||
// Discriminated Unions
|
|
||||||
interface Circle {
|
|
||||||
kind: "circle";
|
|
||||||
radius: number;
|
|
||||||
}
|
|
||||||
interface Square {
|
|
||||||
kind: "square";
|
|
||||||
sideLength: number;
|
|
||||||
}
|
|
||||||
type Shape = Circle | Square;
|
|
||||||
|
|
||||||
function area(shape: Shape): number {
|
|
||||||
switch (shape.kind) {
|
|
||||||
case "circle":
|
|
||||||
return Math.PI * shape.radius ** 2;
|
|
||||||
case "square":
|
|
||||||
return shape.sideLength ** 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 08: Type Guards & Assertions -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Type Guards
|
|
||||||
function isString(value: any): value is string {
|
|
||||||
return typeof value === "string";
|
|
||||||
}
|
|
||||||
|
|
||||||
function isNumber(value: any): value is number {
|
|
||||||
return typeof value === "number";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Using Type Guards
|
|
||||||
function process(value: string | number) {
|
|
||||||
if (isString(value)) {
|
|
||||||
console.log(value.toUpperCase()); // TypeScript knows it's string
|
|
||||||
} else {
|
|
||||||
console.log(value.toFixed(2)); // TypeScript knows it's number
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// in operator
|
|
||||||
type Fish = { swim: () => void };
|
|
||||||
type Bird = { fly: () => void };
|
|
||||||
|
|
||||||
function move(animal: Fish | Bird) {
|
|
||||||
if ("swim" in animal) {
|
|
||||||
animal.swim(); // Fish
|
|
||||||
} else {
|
|
||||||
animal.fly(); // Bird
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// instanceof
|
|
||||||
function handleError(error: Error | string) {
|
|
||||||
if (error instanceof Error) {
|
|
||||||
console.log(error.message);
|
|
||||||
} else {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Type Assertions
|
|
||||||
let someValue: any = "hello world";
|
|
||||||
let strLength = (someValue as string).length;
|
|
||||||
// or: let strLength = (<string>someValue).length;
|
|
||||||
|
|
||||||
// Non-null Assertion
|
|
||||||
let name: string | null = getName();
|
|
||||||
let nameLength = name!.length; // Assert name is not null
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 09: Utility Types -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
interface Todo {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
completed: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Partial<T> - All properties optional
|
|
||||||
type PartialTodo = Partial<Todo>;
|
|
||||||
// {title?: string, description?: string, completed?: boolean}
|
|
||||||
|
|
||||||
// Required<T> - All properties required
|
|
||||||
type RequiredTodo = Required<PartialTodo>;
|
|
||||||
|
|
||||||
// Readonly<T> - All properties readonly
|
|
||||||
type ReadonlyTodo = Readonly<Todo>;
|
|
||||||
|
|
||||||
// Pick<T, K> - Select specific properties
|
|
||||||
type TodoPreview = Pick<Todo, "title" | "completed">;
|
|
||||||
|
|
||||||
// Omit<T, K> - Exclude specific properties
|
|
||||||
type TodoInfo = Omit<Todo, "completed">;
|
|
||||||
|
|
||||||
// Record<K, T> - Create object type
|
|
||||||
type TodoStatus = Record<"pending" | "completed", Todo[]>;
|
|
||||||
|
|
||||||
// Exclude<T, U> - Remove types from union
|
|
||||||
type NonString = Exclude<string | number | boolean, string>;
|
|
||||||
// number | boolean
|
|
||||||
|
|
||||||
// Extract<T, U> - Extract types from union
|
|
||||||
type StringOnly = Extract<string | number | boolean, string>;
|
|
||||||
// string
|
|
||||||
|
|
||||||
// NonNullable<T> - Remove null/undefined
|
|
||||||
type NonNullString = NonNullable<string | null | undefined>;
|
|
||||||
// string
|
|
||||||
|
|
||||||
// ReturnType<T> - Get function return type
|
|
||||||
function getName(): string { return "John"; }
|
|
||||||
type NameType = ReturnType<typeof getName>; // string
|
|
||||||
|
|
||||||
// Parameters<T> - Get function parameters as tuple
|
|
||||||
type GetNameParams = Parameters<typeof getName>; // []
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 10: Enums -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Numeric Enum
|
|
||||||
enum Direction {
|
|
||||||
Up, // 0
|
|
||||||
Down, // 1
|
|
||||||
Left, // 2
|
|
||||||
Right // 3
|
|
||||||
}
|
|
||||||
|
|
||||||
// String Enum
|
|
||||||
enum Color {
|
|
||||||
Red = "red",
|
|
||||||
Green = "green",
|
|
||||||
Blue = "blue"
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mixed Enum
|
|
||||||
enum Mixed {
|
|
||||||
No = 0,
|
|
||||||
Yes = "yes"
|
|
||||||
}
|
|
||||||
|
|
||||||
// Const Enum (inlined at compile time)
|
|
||||||
const enum StatusCode {
|
|
||||||
OK = 200,
|
|
||||||
NotFound = 404,
|
|
||||||
Error = 500
|
|
||||||
}
|
|
||||||
|
|
||||||
// Usage
|
|
||||||
let currentDirection = Direction.Up;
|
|
||||||
let favoriteColor = Color.Blue;
|
|
||||||
let status = StatusCode.OK;
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 11: Modules -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Named Exports
|
|
||||||
export const PI = 3.14159;
|
|
||||||
export function calculate(r: number): number {
|
|
||||||
return PI * r * r;
|
|
||||||
}
|
|
||||||
export class Calculator {
|
|
||||||
add(x: number, y: number): number { return x + y; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Default Export
|
|
||||||
export default class Logger {
|
|
||||||
log(message: string): void {
|
|
||||||
console.log(message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Re-exports
|
|
||||||
export { Calculator as Calc } from "./calculator";
|
|
||||||
export * from "./utilities";
|
|
||||||
|
|
||||||
// Import
|
|
||||||
import Logger from "./logger"; // default import
|
|
||||||
import { PI, calculate } from "./math"; // named imports
|
|
||||||
import * as MathUtils from "./math"; // namespace import
|
|
||||||
import { Calculator as Calc } from "./calculator"; // alias
|
|
||||||
|
|
||||||
// Dynamic Imports
|
|
||||||
const module = await import("./dynamic-module");
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 12: Advanced Types -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Mapped Types
|
|
||||||
type Nullable<T> = {
|
|
||||||
[P in keyof T]: T[P] | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
type OptionalId<T> = {
|
|
||||||
[P in keyof T]: P extends "id" ? T[P] | undefined : T[P];
|
|
||||||
};
|
|
||||||
|
|
||||||
// Conditional Types
|
|
||||||
type IsString<T> = T extends string ? true : false;
|
|
||||||
type StringCheck = IsString<"hello">; // true
|
|
||||||
|
|
||||||
// Template Literal Types
|
|
||||||
type EventName<T extends string> = `on${Capitalize<T>}`;
|
|
||||||
type ClickEvent = EventName<"click">; // "onClick"
|
|
||||||
|
|
||||||
// Indexed Access Types
|
|
||||||
type Person = { name: string; age: number; location: string };
|
|
||||||
type PersonName = Person["name"]; // string
|
|
||||||
type PersonKeys = keyof Person; // "name" | "age" | "location"
|
|
||||||
|
|
||||||
// Recursive Types
|
|
||||||
type Json = string | number | boolean | null | Json[] | {[key: string]: Json};
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 13: Decorators -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// Class Decorator
|
|
||||||
function Component(name: string) {
|
|
||||||
return function<T extends {new(...args: any[]): {}}>(constructor: T) {
|
|
||||||
return class extends constructor {
|
|
||||||
componentName = name;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component("MyComponent")
|
|
||||||
class MyClass {}
|
|
||||||
|
|
||||||
// Method Decorator
|
|
||||||
function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
|
|
||||||
const method = descriptor.value;
|
|
||||||
descriptor.value = function(...args: any[]) {
|
|
||||||
console.log(`Calling ${propertyName} with`, args);
|
|
||||||
return method.apply(this, args);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
class Service {
|
|
||||||
@Log
|
|
||||||
getData(): string {
|
|
||||||
return "data";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Property Decorator
|
|
||||||
function MinLength(length: number) {
|
|
||||||
return function(target: any, propertyName: string) {
|
|
||||||
let value: string;
|
|
||||||
|
|
||||||
const getter = () => value;
|
|
||||||
const setter = (newVal: string) => {
|
|
||||||
if (newVal.length < length) {
|
|
||||||
throw new Error(`${propertyName} must be at least ${length} chars`);
|
|
||||||
}
|
|
||||||
value = newVal;
|
|
||||||
};
|
|
||||||
|
|
||||||
Object.defineProperty(target, propertyName, {
|
|
||||||
get: getter,
|
|
||||||
set: setter
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
class User {
|
|
||||||
@MinLength(3)
|
|
||||||
username: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 14: Configuration -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// tsconfig.json
|
|
||||||
/*
|
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"module": "commonjs",
|
|
||||||
"lib": ["ES2020", "DOM"],
|
|
||||||
"outDir": "./dist",
|
|
||||||
"rootDir": "./src",
|
|
||||||
"strict": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"experimentalDecorators": true,
|
|
||||||
"emitDecoratorMetadata": true,
|
|
||||||
"sourceMap": true,
|
|
||||||
"declaration": true,
|
|
||||||
"removeComments": true,
|
|
||||||
"noImplicitAny": true,
|
|
||||||
"noImplicitReturns": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true
|
|
||||||
},
|
|
||||||
"include": ["src/**/*"],
|
|
||||||
"exclude": ["node_modules", "dist"]
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Compiler Options Quick Reference
|
|
||||||
// --target: ES5, ES6, ES2017, ES2018, ES2019, ES2020, ESNext
|
|
||||||
// --module: commonjs, amd, es2015, es2020, esnext, system, umd
|
|
||||||
// --lib: ES5, ES6, ES2017, DOM, WebWorker, ScriptHost
|
|
||||||
// --strict: Enable all strict type checking options
|
|
||||||
|
|
||||||
/***************************
|
|
||||||
------------ 15: Common Patterns -----------
|
|
||||||
*******************************/
|
|
||||||
|
|
||||||
// API Response Type
|
|
||||||
interface ApiResponse<T> {
|
|
||||||
data: T;
|
|
||||||
status: number;
|
|
||||||
message: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event Handler Pattern
|
|
||||||
type EventHandler<T = Event> = (event: T) => void;
|
|
||||||
const onClick: EventHandler<MouseEvent> = (e) => console.log(e.clientX);
|
|
||||||
|
|
||||||
// Builder Pattern
|
|
||||||
class QueryBuilder {
|
|
||||||
private query = "";
|
|
||||||
|
|
||||||
select(fields: string): this {
|
|
||||||
this.query += `SELECT ${fields} `;
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
from(table: string): this {
|
|
||||||
this.query += `FROM ${table} `;
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
build(): string {
|
|
||||||
return this.query.trim();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Factory Pattern
|
|
||||||
interface Shape { area(): number; }
|
|
||||||
class Circle implements Shape {
|
|
||||||
constructor(private radius: number) {}
|
|
||||||
area(): number { return Math.PI * this.radius ** 2; }
|
|
||||||
}
|
|
||||||
|
|
||||||
class ShapeFactory {
|
|
||||||
static createCircle(radius: number): Shape {
|
|
||||||
return new Circle(radius);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Promise/Async Patterns
|
|
||||||
type AsyncResult<T> = Promise<T | Error>;
|
|
||||||
|
|
||||||
async function fetchUser(id: number): Promise<User | null> {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/users/${id}`);
|
|
||||||
return await response.json();
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Type-safe Environment Variables
|
|
||||||
interface Env {
|
|
||||||
NODE_ENV: "development" | "production" | "test";
|
|
||||||
PORT: number;
|
|
||||||
DATABASE_URL: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
namespace NodeJS {
|
|
||||||
interface ProcessEnv extends Env {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* QUICK TIPS
|
|
||||||
* ----------
|
|
||||||
* • Use 'unknown' instead of 'any' when possible
|
|
||||||
* • Prefer 'interface' for object shapes, 'type' for unions/computed types
|
|
||||||
* • Enable strict mode in tsconfig.json
|
|
||||||
* • Use const assertions: const colors = ['red', 'blue'] as const
|
|
||||||
* • Prefer type guards over type assertions
|
|
||||||
* • Use utility types instead of manual type manipulation
|
|
||||||
* • Enable noImplicitAny for better type safety
|
|
||||||
* • Use discriminated unions for complex state management
|
|
||||||
*/
|
|
||||||
@@ -0,0 +1,133 @@
|
|||||||
|
|
||||||
|
Command alias Cmdlet name Description of command
|
||||||
|
% ForEach-Object Performs an operation against each item in a collection of input objects.
|
||||||
|
? Where-Object Selects objects from a collection based on their property values.
|
||||||
|
ac Add-Content Appends content, such as words or data, to a file.
|
||||||
|
asnp Add-PSSnapIn Adds one or more Windows PowerShell snap-ins to the current session.
|
||||||
|
cat Get-Content Gets the contents of a file.
|
||||||
|
cd Set-Location Sets the current working location to a specified location.
|
||||||
|
chdir Set-Location Sets the current working location to a specified location.
|
||||||
|
clc Clear-Content Deletes the contents of an item, but does not delete the item.
|
||||||
|
clear Clear-Host Clears the display in the host program.
|
||||||
|
clhy Clear-History Deletes entries from the command history.
|
||||||
|
cli Clear-Item Deletes the contents of an item, but does not delete the item.
|
||||||
|
clp Clear-ItemProperty Deletes the value of a property but does not delete the property.
|
||||||
|
cls Clear-Host Clears the display in the host program.
|
||||||
|
clv Clear-Variable Deletes the value of a variable.
|
||||||
|
cnsn Connect-PSSession Reconnects to disconnected sessions
|
||||||
|
compare Compare-Object Compares two sets of objects.
|
||||||
|
copy Copy-Item Copies an item from one location to another.
|
||||||
|
cp Copy-Item Copies an item from one location to another.
|
||||||
|
cpi Copy-Item Copies an item from one location to another.
|
||||||
|
cpp Copy-ItemProperty Copies a property and value from a specified location to another location.
|
||||||
|
curl Invoke-WebRequest Gets content from a webpage on the Internet.
|
||||||
|
cvpa Convert-Path Converts a path from a Windows PowerShell path to a Windows PowerShell provider path.
|
||||||
|
dbp Disable-PSBreakpoint Disables the breakpoints in the current console.
|
||||||
|
del Remove-Item Deletes files and folders.
|
||||||
|
diff Compare-Object Compares two sets of objects.
|
||||||
|
dir Get-ChildItem Gets the files and folders in a file system drive.
|
||||||
|
dnsn Disconnect-PSSession Disconnects from a session.
|
||||||
|
ebp Enable-PSBreakpoint Enables the breakpoints in the current console.
|
||||||
|
echo Write-Output Sends the specified objects to the next command in the pipeline. If the command is the last command in the pipeline, the objects are displayed in the console.
|
||||||
|
epal Export-Alias Exports information about currently defined aliases to a file.
|
||||||
|
epcsv Export-Csv Converts objects into a series of comma-separated (CSV) strings and saves the strings in a CSV file.
|
||||||
|
epsn Export-PSSession Imports commands from another session and saves them in a Windows PowerShell module.
|
||||||
|
erase Remove-Item Deletes files and folders.
|
||||||
|
etsn Enter-PSSession Starts an interactive session with a remote computer.
|
||||||
|
exsn Exit-PSSession Ends an interactive session with a remote computer.
|
||||||
|
fc Format-Custom Uses a customized view to format the output.
|
||||||
|
fl Format-List Formats the output as a list of properties in which each property appears on a new line.
|
||||||
|
foreach ForEach-Object Performs an operation against each item in a collection of input objects.
|
||||||
|
ft Format-Table Formats the output as a table.
|
||||||
|
fw Format-Wide Formats objects as a wide table that displays only one property of each object.
|
||||||
|
gal Get-Alias Gets the aliases for the current session.
|
||||||
|
gbp Get-PSBreakpoint Gets the breakpoints that are set in the current session.
|
||||||
|
gc Get-Content Gets the contents of a file.
|
||||||
|
gci Get-ChildItem Gets the files and folders in a file system drive.
|
||||||
|
gcm Get-Command Gets all commands.
|
||||||
|
gcs Get-PSCallStack Displays the current call stack.
|
||||||
|
gdr Get-PSDrive Gets drives in the current session.
|
||||||
|
ghy Get-History Gets a list of the commands entered during the current session.
|
||||||
|
gi Get-Item Gets files and folders.
|
||||||
|
gjb Get-Job Gets Windows PowerShell background jobs that are running in the current session.
|
||||||
|
gl Get-Location Gets information about the current working location or a location stack.
|
||||||
|
gm Get-Member Gets the properties and methods of objects.
|
||||||
|
gmo Get-Module Gets the modules that have been imported or that can be imported into the current session.
|
||||||
|
gp Get-ItemProperty Gets the properties of a specified item.
|
||||||
|
gps Get-Process Gets the processes that are running on the local computer or a remote computer.
|
||||||
|
group Group-Object Groups objects that contain the same value for specified properties.
|
||||||
|
gsn Get-PSSession Gets the Windows PowerShell sessions on local and remote computers.
|
||||||
|
gsnp Get-PSSnapIn Gets the Windows PowerShell snap-ins on the computer.
|
||||||
|
gsv Get-Service Gets the services on a local or remote computer.
|
||||||
|
gu Get-Unique Returns unique items from a sorted list.
|
||||||
|
gv Get-Variable Gets the variables in the current console.
|
||||||
|
gwmi Get-WmiObject Gets instances of Windows Management Instrumentation (WMI) classes or information about the available classes.
|
||||||
|
h Get-History Gets a list of the commands entered during the current session.
|
||||||
|
history Get-History Gets a list of the commands entered during the current session.
|
||||||
|
icm Invoke-Command Runs commands on local and remote computers.
|
||||||
|
iex Invoke-Expression Runs commands or expressions on the local computer.
|
||||||
|
ihy Invoke-History Runs commands from the session history.
|
||||||
|
ii Invoke-Item Performs the default action on the specified item.
|
||||||
|
ipal Import-Alias Imports an alias list from a file.
|
||||||
|
ipcsv Import-Csv Creates table-like custom objects from the items in a CSV file.
|
||||||
|
ipmo Import-Module Adds modules to the current session.
|
||||||
|
ipsn Import-PSSes sion Imports commands from another session into the current session.
|
||||||
|
irm Invoke-RestMethod Sends an HTTP or HTTPS request to a RESTful web service.
|
||||||
|
ise powershell_ise.exe Explains how to use the PowerShell_ISE.exe command-line tool.
|
||||||
|
iwmi Invoke-WMIMethod Calls Windows Management Instrumentation (WMI) methods.
|
||||||
|
iwr Invoke-WebRequest Gets content from a web page on the Internet.
|
||||||
|
kill Stop-Process Stops one or more running processes.
|
||||||
|
lp Out-Printer Sends output to a printer.
|
||||||
|
ls Get-ChildItem Gets the files and folders in a file system drive.
|
||||||
|
man help Displays information about Windows PowerShell commands and concepts.
|
||||||
|
md mkdir Creates a new item.
|
||||||
|
measure Measure-Object Calculates the numeric properties of objects, and the characters, words, and lines in string objects, such as files of text.
|
||||||
|
mi Move-Item Moves an item from one location to another.
|
||||||
|
mount New-PSDrive Creates temporary and persistent mapped network drives.
|
||||||
|
move Move-Item Moves an item from one location to another.
|
||||||
|
mp Move-ItemProperty Moves a property from one location to another.
|
||||||
|
mv Move-Item Moves an item from one location to another.
|
||||||
|
nal New-Alias Creates a new alias.
|
||||||
|
ndr New-PSDrive Creates temporary and persistent mapped network drives.
|
||||||
|
ni New-Item Creates a new item.
|
||||||
|
nmo New-Module Creates a new dynamic module that exists only in memory.
|
||||||
|
npssc New-PSSessionConfigurationFile Creates a file that defines a session configuration.
|
||||||
|
nsn New-PSSession Creates a persistent connection to a local or remote computer.
|
||||||
|
nv New-Variable Creates a new variable.
|
||||||
|
ogv Out-GridView Sends output to an interactive table in a separate window.
|
||||||
|
oh Out-Host Sends output to the command line.
|
||||||
|
popd Pop-Location Changes the current location to the location most recently pushed to the stack. You can pop the location from the default stack or from a stack that you create by using the Push-Location cmdlet.
|
||||||
|
ps Get-Process Gets the processes that are running on the local computer or a remote computer.
|
||||||
|
pushd Push-Location Adds the current location to the top of a location stack.
|
||||||
|
pwd Get-Location Gets information about the current working location or a location stack.
|
||||||
|
r Invoke-History Runs commands from the session history.
|
||||||
|
rbp Remove-PSBreakpoint Deletes breakpoints from the current console.
|
||||||
|
rcjb Receive-Job Gets the results of the Windows PowerShell background jobs in the current session.
|
||||||
|
rcsn Receive-PSSession Gets results of commands in disconnected sessions.
|
||||||
|
rd Remove-Item Deletes files and folders.
|
||||||
|
rdr Remove-PSDrive Deletes temporary Windows PowerShell drives and disconnects mapped network drives.
|
||||||
|
ren Rename-Item Renames an item in a Windows PowerShell provider namespace.
|
||||||
|
ri Remove-Item Deletes files and folders.
|
||||||
|
rjb Remove-Job Deletes a Windows PowerShell background job.
|
||||||
|
rm Remove-Item Deletes files and folders.
|
||||||
|
rmdir Remove-Item Deletes files and folders.
|
||||||
|
rmo Remove-Module Removes modules from the current session.
|
||||||
|
rni Rename-Item Renames an item in a Windows PowerShell provider namespace.
|
||||||
|
rnp Rename-ItemProperty Renames a property of an item.
|
||||||
|
rp Remove-ItemProperty Deletes the property and its value from an item.
|
||||||
|
rsn Remove-PSSession Closes one or more Windows PowerShell sessions (PSSessions).
|
||||||
|
rsnp Remove-PSSnapin Removes Windows PowerShell snap-ins from the current session.
|
||||||
|
rujb Resume-Job Restarts a suspended job
|
||||||
|
rv Remove-Variable Deletes a variable and its value.
|
||||||
|
rvpa Resolve-Path Resolves the wildcard characters in a path, and displays the path contents.
|
||||||
|
rwmi Remove-WMIObject Deletes an instance of an existing Windows Management Instrumentation (WMI) class.
|
||||||
|
sajb Start-Job Starts a Windows PowerShell background job.
|
||||||
|
sal Set-Alias Creates or changes an alias (alternate name) for a cmdlet or other command element in the current Windows PowerShell session.
|
||||||
|
saps Start-Process Starts one or more processes on the local computer.
|
||||||
|
sasv Start-Service Starts one or more stopped services.
|
||||||
|
sbp Set-PSBreakpoint Sets a breakpoint on a line, command, or variable.
|
||||||
|
sc Set-Content Replaces the contents of a file with contents that you specify.
|
||||||
|
select Select-Object Selects objects or object properties.
|
||||||
|
set Set-Variable Sets the value of a variable. Creates the variable if one with the requested name does not exist.
|
||||||
|
shcm Show-Command Creates Windows PowerShell commands in a graphical command window.
|
||||||
|
si Set-Item Changes the value of an item to the valu
|
||||||
@@ -95,9 +95,3 @@ arr.reduce(callback[, initialValue]) // Apply a function against
|
|||||||
arr.reduceRight(callback[, initialValue]) // Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
|
arr.reduceRight(callback[, initialValue]) // Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
|
||||||
arr.some(callback[, initialValue]) // Returns true if at least one element in this array satisfies the provided testing function.
|
arr.some(callback[, initialValue]) // Returns true if at least one element in this array satisfies the provided testing function.
|
||||||
arr.values() // Returns a new Array Iterator object that contains the values for each index in the array.
|
arr.values() // Returns a new Array Iterator object that contains the values for each index in the array.
|
||||||
|
|
||||||
// String methods
|
|
||||||
String.charAt(index) // Returns the character at the specified index in a string.
|
|
||||||
String.indexOf(character) // Returns the index of the first occurrence of a specified value in a string.
|
|
||||||
String.substring(starting_index, ending_index) // Returns a new string that is a subset of the original string.
|
|
||||||
String.substring(starting_index) // Returns a substring from starting index to last index of string.
|
|
||||||
@@ -1,815 +0,0 @@
|
|||||||
# TypeScript
|
|
||||||
|
|
||||||
* TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript
|
|
||||||
|
|
||||||
* It adds optional static type definitions to JavaScript, enabling better tooling and error detection
|
|
||||||
|
|
||||||
* In TypeScript, types are checked at compile-time, not runtime
|
|
||||||
|
|
||||||
* A TypeScript file has an extension of .ts (or .tsx for React components)
|
|
||||||
|
|
||||||
* TypeScript follows JavaScript syntax but adds type annotations and advanced features
|
|
||||||
|
|
||||||
* We can compile and run a TypeScript file by the following commands:
|
|
||||||
|
|
||||||
`$ tsc filename.ts` (compile to JavaScript)
|
|
||||||
`$ node filename.js` (run the compiled JavaScript)
|
|
||||||
|
|
||||||
Or directly: `$ ts-node filename.ts`
|
|
||||||
|
|
||||||
#### TypeScript requires compilation to JavaScript before execution.
|
|
||||||
|
|
||||||
## Create and execute a program
|
|
||||||
|
|
||||||
1. Install TypeScript globally: `npm install -g typescript`
|
|
||||||
1. Create the program: `touch program.ts`
|
|
||||||
1. Write the TypeScript code and save it
|
|
||||||
1. Compile: `tsc program.ts`
|
|
||||||
1. Run: `node program.js`
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
### Basic Data Types
|
|
||||||
|
|
||||||
| Data Type | Description | Example |
|
|
||||||
| --------- | ----------- | ------- |
|
|
||||||
| number | Integer and floating point values | `42`, `3.14`, `-7` |
|
|
||||||
| string | Text values | `"hello"`, `'world'`, `` `template` `` |
|
|
||||||
| boolean | True/false values | `true`, `false` |
|
|
||||||
| undefined | Undefined value | `undefined` |
|
|
||||||
| null | Null value | `null` |
|
|
||||||
| any | Any type (disables type checking) | Can be anything |
|
|
||||||
| unknown | Type-safe counterpart of any | Requires type checking |
|
|
||||||
| void | Absence of any type | Function return type |
|
|
||||||
| never | Type that never occurs | Functions that throw errors |
|
|
||||||
| object | Non-primitive types | `{}`, `[]`, functions |
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
## Keywords and Reserved Words
|
|
||||||
<br>
|
|
||||||
|
|
||||||
- TypeScript includes all JavaScript keywords plus additional TypeScript-specific ones
|
|
||||||
|
|
||||||
| Keyword | Description | Category |
|
|
||||||
|---------- | ---------- | --------- |
|
|
||||||
| let | Declares a block-scoped variable | Variable Declaration |
|
|
||||||
| const | Declares a block-scoped constant | Variable Declaration |
|
|
||||||
| var | Declares a function-scoped variable | Variable Declaration |
|
|
||||||
| function | Declares a function | Function |
|
|
||||||
| class | Declares a class | Class |
|
|
||||||
| interface | Declares an interface | Type Definition |
|
|
||||||
| type | Declares a type alias | Type Definition |
|
|
||||||
| enum | Declares an enumeration | Type Definition |
|
|
||||||
| namespace | Declares a namespace | Module System |
|
|
||||||
| module | Declares a module | Module System |
|
|
||||||
| import | Imports from another module | Module System |
|
|
||||||
| export | Exports from current module | Module System |
|
|
||||||
| extends | Class/interface inheritance | Inheritance |
|
|
||||||
| implements | Class implements interface | Inheritance |
|
|
||||||
| public | Public access modifier | Access Modifier |
|
|
||||||
| private | Private access modifier | Access Modifier |
|
|
||||||
| protected | Protected access modifier | Access Modifier |
|
|
||||||
| readonly | Read-only property | Access Modifier |
|
|
||||||
| static | Static class member | Class Member |
|
|
||||||
| abstract | Abstract class/method | Class |
|
|
||||||
| async | Asynchronous function | Async Programming |
|
|
||||||
| await | Awaits a promise | Async Programming |
|
|
||||||
| new | Creates new instance | Object Creation |
|
|
||||||
| this | Current object reference | Object Reference |
|
|
||||||
| super | Parent class reference | Inheritance |
|
|
||||||
| typeof | Gets type of variable | Type Operation |
|
|
||||||
| keyof | Gets keys of type | Type Operation |
|
|
||||||
| in | Property existence check | Type Guard |
|
|
||||||
| instanceof | Instance type check | Type Guard |
|
|
||||||
| as | Type assertion | Type Assertion |
|
|
||||||
| is | Type predicate | Type Guard |
|
|
||||||
| infer | Infers type in conditional types | Advanced Types |
|
|
||||||
| declare | Ambient declarations | Declaration |
|
|
||||||
| get | Property getter | Accessor |
|
|
||||||
| set | Property setter | Accessor |
|
|
||||||
| yield | Generator yield | Generator |
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
## Operators
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
| Operator | Description |
|
|
||||||
|-|-|
|
|
||||||
| ( ) | Grouping, function call, type assertion |
|
|
||||||
| [ ] | Array indexing, array/tuple types |
|
|
||||||
| . | Property access |
|
|
||||||
| ?. | Optional chaining |
|
|
||||||
| ! | Non-null assertion, logical not |
|
|
||||||
| ~ | Bitwise not |
|
|
||||||
| \- | Unary minus, arithmetic subtraction |
|
|
||||||
| \+ | Unary plus, arithmetic addition |
|
|
||||||
| \* | Multiplication |
|
|
||||||
| / | Division |
|
|
||||||
| % | Modulo |
|
|
||||||
| \*\* | Exponentiation |
|
|
||||||
| << | Left shift |
|
|
||||||
| \>> | Right shift |
|
|
||||||
| \>>> | Unsigned right shift |
|
|
||||||
| < | Less than |
|
|
||||||
| <= | Less than or equal |
|
|
||||||
| \> | Greater than |
|
|
||||||
| \>= | Greater than or equal |
|
|
||||||
| == | Equality (with coercion) |
|
|
||||||
| === | Strict equality |
|
|
||||||
| != | Inequality (with coercion) |
|
|
||||||
| !== | Strict inequality |
|
|
||||||
| & | Bitwise AND |
|
|
||||||
| ^ | Bitwise XOR |
|
|
||||||
| \| | Bitwise OR, Union types |
|
|
||||||
| && | Logical AND |
|
|
||||||
| \|\| | Logical OR |
|
|
||||||
| ?? | Nullish coalescing |
|
|
||||||
| ? : | Ternary conditional |
|
|
||||||
| = | Assignment |
|
|
||||||
| += | Add and assign |
|
|
||||||
| -= | Subtract and assign |
|
|
||||||
| *= | Multiply and assign |
|
|
||||||
| /= | Divide and assign |
|
|
||||||
| %= | Modulo and assign |
|
|
||||||
| **= | Exponentiate and assign |
|
|
||||||
| <<= | Left shift and assign |
|
|
||||||
| \>>= | Right shift and assign |
|
|
||||||
| &= | Bitwise AND and assign |
|
|
||||||
| ^= | Bitwise XOR and assign |
|
|
||||||
| \|= | Bitwise OR and assign |
|
|
||||||
| , | Comma operator |
|
|
||||||
| => | Arrow function |
|
|
||||||
| ... | Spread/rest operator |
|
|
||||||
|
|
||||||
### Basic Data Structures
|
|
||||||
|
|
||||||
### Array
|
|
||||||
|
|
||||||
- Array is an ordered collection of elements of the same or different types.
|
|
||||||
|
|
||||||
- Arrays are created using square brackets or Array constructor:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
let numbers: number[] = [1, 2, 3, 4];
|
|
||||||
let fruits: Array<string> = ["apple", "banana", "cherry"];
|
|
||||||
let mixed: (string | number)[] = [1, "two", 3];
|
|
||||||
```
|
|
||||||
|
|
||||||
- Array elements are indexed starting from 0.
|
|
||||||
|
|
||||||
- Arrays are mutable - you can change, add, and remove elements.
|
|
||||||
|
|
||||||
- Common array methods:
|
|
||||||
```typescript
|
|
||||||
let arr = [1, 2, 3];
|
|
||||||
arr.push(4); // Add to end: [1, 2, 3, 4]
|
|
||||||
arr.pop(); // Remove from end: [1, 2, 3]
|
|
||||||
arr.unshift(0); // Add to start: [0, 1, 2, 3]
|
|
||||||
arr.shift(); // Remove from start: [1, 2, 3]
|
|
||||||
arr.length; // Get length: 3
|
|
||||||
```
|
|
||||||
|
|
||||||
### Tuple
|
|
||||||
|
|
||||||
- Tuple is an array with a fixed number of elements of specific types.
|
|
||||||
|
|
||||||
- Tuples are created using square brackets with type annotations:
|
|
||||||
```typescript
|
|
||||||
let person: [string, number] = ["John", 30];
|
|
||||||
let coordinate: [number, number] = [10, 20];
|
|
||||||
```
|
|
||||||
|
|
||||||
- Tuple elements are ordered and have specific types at each position.
|
|
||||||
|
|
||||||
- You can access elements by index, but type checking ensures correctness:
|
|
||||||
```typescript
|
|
||||||
let point: [number, number] = [10, 20];
|
|
||||||
console.log(point[0]); // 10 (number)
|
|
||||||
console.log(point[1]); // 20 (number)
|
|
||||||
```
|
|
||||||
|
|
||||||
- Named tuples provide better readability:
|
|
||||||
```typescript
|
|
||||||
let user: [name: string, age: number] = ["Alice", 25];
|
|
||||||
```
|
|
||||||
|
|
||||||
- Optional and rest elements in tuples:
|
|
||||||
```typescript
|
|
||||||
let optional: [string, number?] = ["hello"];
|
|
||||||
let rest: [string, ...number[]] = ["coords", 1, 2, 3];
|
|
||||||
```
|
|
||||||
|
|
||||||
### Set
|
|
||||||
|
|
||||||
- Set is a collection of unique values of any type.
|
|
||||||
|
|
||||||
- Sets are created using the Set constructor:
|
|
||||||
```typescript
|
|
||||||
let uniqueNumbers = new Set<number>([1, 2, 3, 2]); // {1, 2, 3}
|
|
||||||
let stringSet = new Set<string>();
|
|
||||||
```
|
|
||||||
|
|
||||||
- Set operations:
|
|
||||||
```typescript
|
|
||||||
let mySet = new Set<string>();
|
|
||||||
mySet.add("apple"); // Add element
|
|
||||||
mySet.has("apple"); // Check existence: true
|
|
||||||
mySet.delete("apple"); // Remove element
|
|
||||||
mySet.clear(); // Remove all elements
|
|
||||||
mySet.size; // Get size
|
|
||||||
```
|
|
||||||
|
|
||||||
- Iterating over Set:
|
|
||||||
```typescript
|
|
||||||
let fruits = new Set(["apple", "banana", "cherry"]);
|
|
||||||
for (let fruit of fruits) {
|
|
||||||
console.log(fruit);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Map
|
|
||||||
|
|
||||||
- Map is a collection of key-value pairs where keys can be any type.
|
|
||||||
|
|
||||||
- Maps are created using the Map constructor:
|
|
||||||
```typescript
|
|
||||||
let userMap = new Map<string, number>();
|
|
||||||
let mixedMap = new Map<string | number, any>();
|
|
||||||
```
|
|
||||||
|
|
||||||
- Map operations:
|
|
||||||
```typescript
|
|
||||||
let map = new Map<string, number>();
|
|
||||||
map.set("age", 30); // Add key-value pair
|
|
||||||
map.get("age"); // Get value: 30
|
|
||||||
map.has("age"); // Check key exists: true
|
|
||||||
map.delete("age"); // Remove key-value pair
|
|
||||||
map.clear(); // Remove all entries
|
|
||||||
map.size; // Get size
|
|
||||||
```
|
|
||||||
|
|
||||||
- Object vs Map:
|
|
||||||
```typescript
|
|
||||||
// Object - string/symbol keys only
|
|
||||||
let obj: { [key: string]: number } = { "age": 30 };
|
|
||||||
|
|
||||||
// Map - any type keys
|
|
||||||
let map = new Map<any, number>();
|
|
||||||
map.set("age", 30);
|
|
||||||
map.set(42, 100);
|
|
||||||
map.set(true, 1);
|
|
||||||
```
|
|
||||||
|
|
||||||
### Object Types and Interfaces
|
|
||||||
|
|
||||||
- Objects store key-value pairs and are fundamental to TypeScript.
|
|
||||||
|
|
||||||
- Object type annotation:
|
|
||||||
```typescript
|
|
||||||
let person: { name: string; age: number } = {
|
|
||||||
name: "John",
|
|
||||||
age: 30
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
- Interface definition for better reusability:
|
|
||||||
```typescript
|
|
||||||
interface User {
|
|
||||||
readonly id: number; // Read-only property
|
|
||||||
name: string;
|
|
||||||
age?: number; // Optional property
|
|
||||||
[key: string]: any; // Index signature
|
|
||||||
}
|
|
||||||
|
|
||||||
let user: User = {
|
|
||||||
id: 1,
|
|
||||||
name: "Alice"
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
- Nested objects and complex types:
|
|
||||||
```typescript
|
|
||||||
interface Address {
|
|
||||||
street: string;
|
|
||||||
city: string;
|
|
||||||
country: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Person {
|
|
||||||
name: string;
|
|
||||||
address: Address;
|
|
||||||
hobbies: string[];
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Conditional branching
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// If-else statements
|
|
||||||
if (condition) {
|
|
||||||
// code block
|
|
||||||
} else if (anotherCondition) {
|
|
||||||
// code block
|
|
||||||
} else {
|
|
||||||
// code block
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ternary operator
|
|
||||||
let result = condition ? valueIfTrue : valueIfFalse;
|
|
||||||
|
|
||||||
// Switch statement
|
|
||||||
switch (variable) {
|
|
||||||
case value1:
|
|
||||||
// code
|
|
||||||
break;
|
|
||||||
case value2:
|
|
||||||
// code
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// code
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Loops
|
|
||||||
|
|
||||||
TypeScript supports all JavaScript loop constructs:
|
|
||||||
|
|
||||||
#### For loop
|
|
||||||
```typescript
|
|
||||||
// Traditional for loop
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
console.log(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
// For-of loop (iterates over values)
|
|
||||||
let fruits = ["apple", "banana", "cherry"];
|
|
||||||
for (let fruit of fruits) {
|
|
||||||
console.log(fruit);
|
|
||||||
}
|
|
||||||
|
|
||||||
// For-in loop (iterates over keys/indices)
|
|
||||||
for (let index in fruits) {
|
|
||||||
console.log(index, fruits[index]);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### While loop
|
|
||||||
```typescript
|
|
||||||
let i = 0;
|
|
||||||
while (i < 5) {
|
|
||||||
console.log(i);
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Do-while loop
|
|
||||||
let j = 0;
|
|
||||||
do {
|
|
||||||
console.log(j);
|
|
||||||
j++;
|
|
||||||
} while (j < 5);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Loop control
|
|
||||||
```typescript
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
if (i === 3) continue; // Skip iteration
|
|
||||||
if (i === 7) break; // Exit loop
|
|
||||||
console.log(i);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Function definition
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Function declaration
|
|
||||||
function functionName(param1: type, param2: type): returnType {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function expression
|
|
||||||
const functionName = function(param: type): returnType {
|
|
||||||
return value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Arrow function
|
|
||||||
const functionName = (param: type): returnType => {
|
|
||||||
return value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Arrow function (concise)
|
|
||||||
const functionName = (param: type): returnType => value;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Function variations
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// Optional parameters
|
|
||||||
function greet(name: string, age?: number): string {
|
|
||||||
return age ? `Hello ${name}, you are ${age}` : `Hello ${name}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Default parameters
|
|
||||||
function multiply(a: number, b: number = 1): number {
|
|
||||||
return a * b;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rest parameters
|
|
||||||
function sum(...numbers: number[]): number {
|
|
||||||
return numbers.reduce((total, num) => total + num, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function overloads
|
|
||||||
function process(input: string): string;
|
|
||||||
function process(input: number): number;
|
|
||||||
function process(input: string | number): string | number {
|
|
||||||
if (typeof input === 'string') {
|
|
||||||
return input.toUpperCase();
|
|
||||||
}
|
|
||||||
return input * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generic functions
|
|
||||||
function identity<T>(arg: T): T {
|
|
||||||
return arg;
|
|
||||||
}
|
|
||||||
|
|
||||||
let result = identity<string>("hello"); // Type is string
|
|
||||||
let result2 = identity(42); // Type inferred as number
|
|
||||||
```
|
|
||||||
|
|
||||||
### Function call
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
functionName(argument1, argument2);
|
|
||||||
|
|
||||||
// With optional parameters
|
|
||||||
greet("John"); // "Hello John"
|
|
||||||
greet("John", 25); // "Hello John, you are 25"
|
|
||||||
|
|
||||||
// With rest parameters
|
|
||||||
sum(1, 2, 3, 4); // 10
|
|
||||||
|
|
||||||
// Generic function call
|
|
||||||
identity<string>("hello");
|
|
||||||
identity(42); // Type inferred
|
|
||||||
```
|
|
||||||
|
|
||||||
### Classes
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
class ClassName {
|
|
||||||
// Properties
|
|
||||||
public publicProperty: type;
|
|
||||||
private privateProperty: type;
|
|
||||||
protected protectedProperty: type;
|
|
||||||
readonly readonlyProperty: type;
|
|
||||||
static staticProperty: type;
|
|
||||||
|
|
||||||
// Constructor
|
|
||||||
constructor(param: type) {
|
|
||||||
this.publicProperty = param;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Methods
|
|
||||||
public method(): returnType {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters and setters
|
|
||||||
get property(): type {
|
|
||||||
return this.privateProperty;
|
|
||||||
}
|
|
||||||
|
|
||||||
set property(value: type) {
|
|
||||||
this.privateProperty = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Static method
|
|
||||||
static staticMethod(): returnType {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inheritance
|
|
||||||
class ChildClass extends ParentClass {
|
|
||||||
constructor(param: type) {
|
|
||||||
super(param); // Call parent constructor
|
|
||||||
}
|
|
||||||
|
|
||||||
// Override method
|
|
||||||
method(): returnType {
|
|
||||||
return super.method(); // Call parent method
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Abstract class
|
|
||||||
abstract class AbstractClass {
|
|
||||||
abstract abstractMethod(): void;
|
|
||||||
|
|
||||||
concreteMethod(): void {
|
|
||||||
console.log("This is implemented");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Key TypeScript Features
|
|
||||||
|
|
||||||
* **Static Typing**: Types are checked at compile-time
|
|
||||||
* **Type Inference**: TypeScript can often infer types automatically
|
|
||||||
* **Optional Typing**: You can gradually add types to existing JavaScript
|
|
||||||
* **Generics**: Create reusable components that work with multiple types
|
|
||||||
* **Interfaces**: Define contracts for objects and classes
|
|
||||||
* **Enums**: Create named constants
|
|
||||||
* **Union Types**: Variables can be one of several types
|
|
||||||
* **Intersection Types**: Combine multiple types
|
|
||||||
* **Type Guards**: Runtime type checking
|
|
||||||
* **Decorators**: Add metadata to classes and methods
|
|
||||||
|
|
||||||
### Compilation
|
|
||||||
|
|
||||||
* TypeScript code must be compiled to JavaScript before execution
|
|
||||||
* The TypeScript compiler (`tsc`) performs type checking and transpilation
|
|
||||||
* Configuration is managed through `tsconfig.json`
|
|
||||||
* TypeScript can target different JavaScript versions (ES5, ES6, etc.)
|
|
||||||
* Source maps can be generated for debugging compiled code
|
|
||||||
|
|
||||||
#### Sample TypeScript Code
|
|
||||||
|
|
||||||
**hello.ts**
|
|
||||||
```typescript
|
|
||||||
// TypeScript source code
|
|
||||||
interface User {
|
|
||||||
name: string;
|
|
||||||
age: number;
|
|
||||||
isActive?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
class UserManager {
|
|
||||||
private users: User[] = [];
|
|
||||||
|
|
||||||
addUser(user: User): void {
|
|
||||||
this.users.push(user);
|
|
||||||
console.log(`Added user: ${user.name}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
getActiveUsers(): User[] {
|
|
||||||
return this.users.filter(user => user.isActive ?? true);
|
|
||||||
}
|
|
||||||
|
|
||||||
getUserCount(): number {
|
|
||||||
return this.users.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generic function
|
|
||||||
function processData<T>(data: T[], processor: (item: T) => T): T[] {
|
|
||||||
return data.map(processor);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Usage
|
|
||||||
const userManager = new UserManager();
|
|
||||||
|
|
||||||
const newUser: User = {
|
|
||||||
name: "John Doe",
|
|
||||||
age: 30,
|
|
||||||
isActive: true
|
|
||||||
};
|
|
||||||
|
|
||||||
userManager.addUser(newUser);
|
|
||||||
|
|
||||||
// Arrow functions with types
|
|
||||||
const formatUser = (user: User): string =>
|
|
||||||
`${user.name} (${user.age} years old)`;
|
|
||||||
|
|
||||||
// Union types and type guards
|
|
||||||
function displayInfo(value: string | number | boolean): string {
|
|
||||||
if (typeof value === "string") {
|
|
||||||
return `Text: ${value.toUpperCase()}`;
|
|
||||||
} else if (typeof value === "number") {
|
|
||||||
return `Number: ${value.toFixed(2)}`;
|
|
||||||
} else {
|
|
||||||
return `Boolean: ${value ? "Yes" : "No"}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(displayInfo("hello"));
|
|
||||||
console.log(displayInfo(42.567));
|
|
||||||
console.log(displayInfo(true));
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Compilation Commands
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Compile single file
|
|
||||||
tsc hello.ts
|
|
||||||
|
|
||||||
# Compile with specific target
|
|
||||||
tsc hello.ts --target ES2020
|
|
||||||
|
|
||||||
# Compile with source maps
|
|
||||||
tsc hello.ts --sourceMap
|
|
||||||
|
|
||||||
# Watch mode (recompile on changes)
|
|
||||||
tsc hello.ts --watch
|
|
||||||
|
|
||||||
# Compile all files in project
|
|
||||||
tsc
|
|
||||||
|
|
||||||
# Check for errors without generating files
|
|
||||||
tsc --noEmit
|
|
||||||
|
|
||||||
# Compile with strict mode
|
|
||||||
tsc hello.ts --strict
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Compiled JavaScript Output
|
|
||||||
|
|
||||||
**hello.js** (compiled from above TypeScript)
|
|
||||||
```javascript
|
|
||||||
"use strict";
|
|
||||||
// JavaScript output (target ES2017)
|
|
||||||
class UserManager {
|
|
||||||
constructor() {
|
|
||||||
this.users = [];
|
|
||||||
}
|
|
||||||
addUser(user) {
|
|
||||||
this.users.push(user);
|
|
||||||
console.log(`Added user: ${user.name}`);
|
|
||||||
}
|
|
||||||
getActiveUsers() {
|
|
||||||
return this.users.filter(user => user.isActive ?? true);
|
|
||||||
}
|
|
||||||
getUserCount() {
|
|
||||||
return this.users.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Generic function (types removed)
|
|
||||||
function processData(data, processor) {
|
|
||||||
return data.map(processor);
|
|
||||||
}
|
|
||||||
// Usage
|
|
||||||
const userManager = new UserManager();
|
|
||||||
const newUser = {
|
|
||||||
name: "John Doe",
|
|
||||||
age: 30,
|
|
||||||
isActive: true
|
|
||||||
};
|
|
||||||
userManager.addUser(newUser);
|
|
||||||
// Arrow functions
|
|
||||||
const formatUser = (user) => `${user.name} (${user.age} years old)`;
|
|
||||||
// Type guards remain as runtime checks
|
|
||||||
function displayInfo(value) {
|
|
||||||
if (typeof value === "string") {
|
|
||||||
return `Text: ${value.toUpperCase()}`;
|
|
||||||
}
|
|
||||||
else if (typeof value === "number") {
|
|
||||||
return `Number: ${value.toFixed(2)}`;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return `Boolean: ${value ? "Yes" : "No"}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log(displayInfo("hello"));
|
|
||||||
console.log(displayInfo(42.567));
|
|
||||||
console.log(displayInfo(true));
|
|
||||||
```
|
|
||||||
|
|
||||||
#### tsconfig.json Configuration
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
// Basic Options
|
|
||||||
"target": "ES2020", // Target JavaScript version
|
|
||||||
"module": "commonjs", // Module system
|
|
||||||
"lib": ["ES2020", "DOM"], // Include library files
|
|
||||||
"outDir": "./dist", // Output directory
|
|
||||||
"rootDir": "./src", // Input directory
|
|
||||||
"strict": true, // Enable strict type checking
|
|
||||||
|
|
||||||
// Additional Checks
|
|
||||||
"noUnusedLocals": true, // Error on unused variables
|
|
||||||
"noUnusedParameters": true, // Error on unused parameters
|
|
||||||
"noImplicitReturns": true, // Error on missing return statements
|
|
||||||
"noFallthroughCasesInSwitch": true, // Error on fallthrough cases
|
|
||||||
|
|
||||||
// Module Resolution
|
|
||||||
"moduleResolution": "node", // Module resolution strategy
|
|
||||||
"baseUrl": "./", // Base directory
|
|
||||||
"paths": { // Path mapping
|
|
||||||
"@/*": ["src/*"],
|
|
||||||
"@utils/*": ["src/utils/*"]
|
|
||||||
},
|
|
||||||
|
|
||||||
// Source Maps & Debugging
|
|
||||||
"sourceMap": true, // Generate source maps
|
|
||||||
"inlineSourceMap": false, // Don't inline source maps
|
|
||||||
"declaration": true, // Generate .d.ts files
|
|
||||||
"declarationMap": true, // Generate .d.ts.map files
|
|
||||||
|
|
||||||
// Experimental
|
|
||||||
"experimentalDecorators": true, // Enable decorators
|
|
||||||
"emitDecoratorMetadata": true, // Emit decorator metadata
|
|
||||||
|
|
||||||
// JavaScript Support
|
|
||||||
"allowJs": true, // Allow JavaScript files
|
|
||||||
"checkJs": false, // Type check JavaScript files
|
|
||||||
|
|
||||||
// Other Options
|
|
||||||
"esModuleInterop": true, // CommonJS/ES6 interop
|
|
||||||
"skipLibCheck": true, // Skip lib.d.ts type checking
|
|
||||||
"forceConsistentCasingInFileNames": true, // Consistent file names
|
|
||||||
"removeComments": true, // Remove comments from output
|
|
||||||
"noEmitOnError": true // Don't emit if there are errors
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src/**/*", // Include all files in src
|
|
||||||
"tests/**/*" // Include test files
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules", // Exclude node_modules
|
|
||||||
"dist", // Exclude output directory
|
|
||||||
"**/*.test.ts", // Exclude test files from compilation
|
|
||||||
"**/*.spec.ts"
|
|
||||||
],
|
|
||||||
"files": [
|
|
||||||
// Explicitly include specific files (optional)
|
|
||||||
"src/main.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Package.json Scripts
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "typescript-project",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"build": "tsc",
|
|
||||||
"start": "node dist/main.js",
|
|
||||||
"dev": "ts-node src/main.ts",
|
|
||||||
"watch": "tsc --watch",
|
|
||||||
"clean": "rm -rf dist",
|
|
||||||
"type-check": "tsc --noEmit"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"typescript": "^4.9.0",
|
|
||||||
"ts-node": "^10.9.0",
|
|
||||||
"@types/node": "^18.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Compilation Examples with Different Targets
|
|
||||||
|
|
||||||
**Original TypeScript:**
|
|
||||||
```typescript
|
|
||||||
const greet = (name: string = "World"): string => `Hello, ${name}!`;
|
|
||||||
const user = { name: "Alice", age: 30 };
|
|
||||||
const { name, age } = user;
|
|
||||||
```
|
|
||||||
|
|
||||||
**Compiled to ES5:**
|
|
||||||
```javascript
|
|
||||||
var greet = function (name) {
|
|
||||||
if (name === void 0) { name = "World"; }
|
|
||||||
return "Hello, " + name + "!";
|
|
||||||
};
|
|
||||||
var user = { name: "Alice", age: 30 };
|
|
||||||
var name = user.name, age = user.age;
|
|
||||||
```
|
|
||||||
|
|
||||||
**Compiled to ES2020:**
|
|
||||||
```javascript
|
|
||||||
const greet = (name = "World") => `Hello, ${name}!`;
|
|
||||||
const user = { name: "Alice", age: 30 };
|
|
||||||
const { name, age } = user;
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Error Examples
|
|
||||||
|
|
||||||
**TypeScript with errors:**
|
|
||||||
```typescript
|
|
||||||
// Type errors that prevent compilation
|
|
||||||
let message: string = 42; // Error: Type 'number' is not assignable to type 'string'
|
|
||||||
let numbers: number[] = ["a", "b"]; // Error: Type 'string' is not assignable to type 'number'
|
|
||||||
|
|
||||||
function add(a: number, b: number): number {
|
|
||||||
return a + b;
|
|
||||||
}
|
|
||||||
|
|
||||||
add("hello", "world"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'
|
|
||||||
```
|
|
||||||
|
|
||||||
**Compiler output:**
|
|
||||||
```bash
|
|
||||||
$ tsc error-example.ts
|
|
||||||
error-example.ts(2,5): error TS2322: Type 'number' is not assignable to type 'string'.
|
|
||||||
error-example.ts(3,5): error TS2322: Type 'string[]' is not assignable to type 'number[]'.
|
|
||||||
error-example.ts(8,5): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
|
|
||||||
```
|
|
||||||
@@ -21,7 +21,6 @@ cat /proc/<process_id>/maps # Show the current virtual memory usage of a Linux
|
|||||||
ip r # Display ip of the server
|
ip r # Display ip of the server
|
||||||
|
|
||||||
lsof -i :9000 # List process running on port 9000
|
lsof -i :9000 # List process running on port 9000
|
||||||
kill -9 $(lsof -t -i:PORT) # Kill the process running on whichever port specified
|
|
||||||
|
|
||||||
journalctl -u minio.service -n 100 --no-pager # List last 100 logs for specific service
|
journalctl -u minio.service -n 100 --no-pager # List last 100 logs for specific service
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user