Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deepakshrma/30-seconds-of-typescript
https://github.com/deepakshrma/30-seconds-of-typescript
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/deepakshrma/30-seconds-of-typescript
- Owner: deepakshrma
- License: mit
- Created: 2020-06-23T15:22:39.000Z (over 4 years ago)
- Default Branch: next
- Last Pushed: 2024-03-31T09:46:09.000Z (6 months ago)
- Last Synced: 2024-07-31T10:19:25.711Z (about 2 months ago)
- Language: TypeScript
- Size: 31.3 MB
- Stars: 102
- Watchers: 2
- Forks: 12
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Support: docs/supportsTouchEvents.md
Awesome Lists containing this project
README
# 30-seconds-of-typescript
This repo is collection of multiple utility function `Like lodash`, that can be used and anywhere with simply importing.
All the documents can be found on [30-seconds-of-typescript](https://decipher.dev/30-seconds-of-typescript/docs/)
**How to access page:**
[how_to_access_page](/static/how_to_access_page.mp4)
**Note:** This repo is highly inspired by [30-seconds-of-code](https://github.com/30-seconds/30-seconds-of-code). I am converting all JS to Typescript so that it can be used for Typescript, Modern HTML|JS and Deno. [Github](https://github.com/deepakshrma/30-seconds-of-typescript/)
**_I am refactoring code and fixing bug along with conversion._**
## Install nodejs/npm
```bash
npm i @deepakvishwakarma/ts-util
```
### How to use Typescript
```ts
import { mask } from "@deepakvishwakarma/ts-util";
console.log(mask(1234567890)); // '******7890'
console.log(mask(1234567890, 3)); // '*******890'
console.log(mask(1234567890, -4, "$")); // '$$$$567890'
```
### How to use JS
```ts
const { mask } = require("@deepakvishwakarma/ts-util");
console.log(mask(1234567890)); // '******7890'
console.log(mask(1234567890, 3)); // '*******890'
console.log(mask(1234567890, -4, "$")); // '$$$$567890'
```
## Install Snippet Extension
You can find working plugin on `marketplace.visualstudio.com`. You can either search for `30-seconds-of-typescript` Or Install from here [imdeepak.30-seconds-of-typescript](https://marketplace.visualstudio.com/items?itemName=imdeepak.30-seconds-of-typescript)
### Search for snippet- Sample[typescript & typescriptreact]
```bash
30_delay
```
This repo has utility file, that can be imported to Deno and modern EcmaScript.
## How to use [Deno]
```ts
import { all } from "https://denopkg.com/deepakshrma/30-seconds-of-typescript/util.ts";
all([{ name: "D" }, { name: "D2" }], hasName); //true
```
## How to modern HTML|JS(Using Github CDN)
```html
// Use any Github CDN
import * as util from "https://cdn.jsdelivr.net/gh/deepakshrma/30-seconds-of-typescript/util.js";
const el = util.createElement(
`<div class="container"><p>Hello! This is created using createElement!! </p></div>`
);
document.body.appendChild(el);
```
### Contribution
- Docs: [/docs](/docs)
- Util: [/util.ts](/util.ts)
#### Create New utility function
`export here` [util.ts](https://github.com/deepakshrma/30-seconds-of-typescript/blob/master/util.ts)
**How to bundle:** It will be auto using husky githook
### How to test using Deno
```bash
deno test util.test.ts
```
#### Commands | Scripts
**1. Generate Snippets:**
```bash
npm run code-gen
```
**2. Generate Extension:**
```bash
npm run extension
```
**3. Install Extension Locally:**
```bash
code --install-extension *.vsix
```
Note: This website is build using docusaurus.