Skip to main content

title: 30-seconds-of-typescript tags: introduction, beginner

This repo is highly inspired by 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

TS Deno JS GitHub

It has multiple utility function like lodash can be used and anywhere with simply importing.

:::note I am refactoring code and fixing bug along with conversion. :::

How to use [Deno]

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)

<script type="module">
  // 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);
</script>

Install VS Code Extension

Search for 30-seconds-of-typescript Or Install here https://marketplace.visualstudio.com/items?itemName=imdeepak.30-seconds-of-typescript

Search for snippet- Sample

30_delay

assets/snippets.gif

How to test using Deno

deno test util.test.ts

Contribution

Create New utility function

export here util.ts

:::note How to bundle It will be auto using husky githook :::

Commands

1. Generate Snippets:

npm run code-gen

2. Generate Extension:

npm run extension

3. Install Extension Locally:

code --install-extension *.vsix

Note: Working website can be found https://deepakshrma.github.io/30-seconds-of-typescript/docs/

This website is build using docusaurus.