I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to ★ on GitHub 🌹

Reviews

Thanks for the wonderful book. Learned a lot from it. (link)
Its probably the Best TypeScript book out there. Good Job (link)
Love how precise and clear the examples and explanations are! (link)
For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
Just a big thank you! Best TypeScript 2 detailed explanation! (link)
This gitbook got my project going pronto. Fluent easy read 5 stars. (link)
I recommend the online #typescript book by @basarat you'll love it.(link)
I've always found this by @basarat really helpful. (link)
We must highlight TypeScript Deep Dive, an open source book.(link)
Great online resource for learning. (link)
Thank you for putting this book together, and for all your hard work within the TypeScript community. (link)
TypeScript Deep Dive is one of the best technical texts I've read in a while. (link)
Thanks @basarat for the TypeScript Deep Dive Book. Help me a lot with my first TypeScript project. (link)
Thanks to @basarat for this great #typescript learning resource. (link)
Guyz excellent book on Typescript(@typescriptlang) by @basarat (link)
Leaning on the legendary @basarat's "TypeScript Deep Dive" book heavily at the moment (link)
numTimesPointedPeopleToBasaratsTypeScriptBook++; (link)
A book not only for typescript, a good one for deeper JavaScript knowledge as well. link
In my new job, we're using @typescriptlang, which I am new to. This is insanely helpful huge thanks, @basarat! link
Thank you for writing TypeScript Deep Dive. I have learned so much. link
Loving @basarat's @typescriptlang online book basarat.gitbooks.io/typescript/# loaded with great recipes! link
Microsoft doc is great already, but if want to "dig deeper" into TypeScript I find this book of great value link
Thanks, this is a great book 🤓🤓 link
Deep dive to typescript is awesome in so many levels. i find it very insightful. Thanks link
@basarat's intro to @typescriptlang is still one of the best going (if not THE best) link
This is sweet! So many #typescript goodies! link

Get Started

If you are here to read the book online get started.

Translations

Book is completely free so you can copy paste whatever you want without requiring permission. If you have a translation you want me to link here. Send a PR.

Other Options

You can also download one of the Epub, Mobi, or PDF formats from the actions tab by clicking on the latest build run. You will find the files in the artifacts section.

Special Thanks

All the amazing contributors 🌹

Share

Share URL: https://basarat.gitbook.io/typescript/

Author: Basarat
Source Code: https://github.com/basarat/typescript-book/
License: View license

#typescript #opensource

Deshaun Olson

1603496280

How to Build a Todo List App with React Hooks and TypeScript

The best way to learn something is by doing. This tutorial will help you learn how to build your own todo list app with React hooks and TypeScript. Try this easy tutorial, build your own todo list app, and get better in JavaScript, React and TypeScript.

You can find the code on my GitHub.

Briefing

The goal for this tutorial is to build your own todo list app. About the app in general. This todo list app will have very simple interface and it will focus on the most important features, i.e. create, check off and delete todos. About code. You will use React and React hooks, mostly useState hook.

There will be one occasion where you will also use useRef hook. Since this todo list app will utilize React hooks for managing state there is no need to use class components. So, you will build this app only with functional components. When it comes to styling your todo list app, you will use external CSS stylesheets.

One last things. First every todo item will have a unique id. These ids will be generated when the todo item is created. You will use this id to mark the todo as complete or to remove it. To make this easier, while following good practices and avoiding using indexes, you will use shortid package.

Project setup

As the first thing let’s create the basic app for your todo list app. We can do this very fast with the help of create-react-app. You can use this package with npm init react-app react-hooks-todo-list-app-ts --typescript, npx create-react-app react-hooks-todo-list-app-ts --typescript or yarn create react-app react-hooks-todo-list-app-ts --typescript. If you don’t want to use TypeScript, omit the --typescript flag at the end of the command.

These commands will create starting template for your todo list app, with workflow setup and almost all necessary dependencies. There is one dependency you will need to install manually, the shortid and types for this package. So, use npm i shortid and npm i -D @types/shortid, yarn add shortid and yarn add -D @types/shortid or pnpm i shortid and pnpm i -D @types/shortid.

There are some assets, such as React logo, that came with the app template. You can remove it because you will not need it. A very simple version of your package.json should look similar to this:

{
  "name": "react-todo-list-hooks-ts",
  "version": "1.0.0",
  "description": "Simple Todo list app built with React hooks and TypeScript.",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "main": "src/index.tsx",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "shortid": "2.2.15"
  },
  "devDependencies": {
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "@types/shortid": "^0.0.29",
    "react-scripts": "3.2.0",
    "typescript": "3.7.2"
  }
}

If you decide to use TypeScript, your tsconfig should look similar to this:

{
    "include": [
        "./src/*"
    ],
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015"
        ],
        "jsx": "react",
        "target": "es5",
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true
    }
}

As the last thing, below is the final structure of this todo list app project. You can use this as you work on this tutorial to orient yourself. With that, you are ready to start working on your todo list app.

react-hooks-todo-list-app-ts/
├─node_modules
├─public
│ ├─favicon.ico
│ ├─index.html
│ ├─manifest.json
│ └─robots.txt
├─src
│ ├─components
│ │ ├─todo-form.tsx
│ │ ├─todo-item.tsx
│ │ └─todo-list.tsx
│ ├─styles
│ │ └─styles.css
│ ├─index.tsx
│ ├─interfaces.ts
│ └─react-app-env.d.ts
├─ package.json
└─ tsconfig.json

#typescript #reactjs #typescript #react hooks #todo list app

HI Python

1640973720

Beyonic API Python Example Using Flask, Django, FastAPI

Beyonic API Python Examples.

The beyonic APIs Docs Reference: https://apidocs.beyonic.com/

Discuss Beyonic API on slack

The Beyonic API is a representational state transfer, REST based application programming interface that lets you extend the Beyonic dashboard features into your application and systems, allowing you to build amazing payment experiences.

With the Beyonic API you can:

Receive and send money and prepaid airtime.
List currencies and networks supported by the Beyonic API.
Check whether a bank is supported by the Beyonic API.
View your account transactions history.
Add, retrieve, list, and update contacts to your Beyonic account.
Use webhooks to send notifications to URLs on your server that when specific events occur in your Beyonic account (e.g. payments).

Getting Help

For usage, general questions, and discussions the best place to go to is Beyhive Slack Community, also feel free to clone and edit this repository to meet your project, application or system requirements.

To start using the Beyonic Python API, you need to start by downloading the Beyonic API official Python client library and setting your secret key.

Install the Beyonic API Python Official client library

>>> pip install beyonic

Setting your secrete key.

To set the secrete key install the python-dotenv modeule, Python-dotenv is a Python module that allows you to specify environment variables in traditional UNIX-like “.env” (dot-env) file within your Python project directory, it helps us work with SECRETS and KEYS without exposing them to the outside world, and keep them safe during development too.

Installing python-dotenv modeule

>>> pip install python-dotenv

Creating a .env file to keep our secrete keys.

>>> touch .env

Inside your .env file specify the Beyonic API Token .

.env file

BEYONIC_ACCESS_KEY = "enter your API "

You will get your API Token by clicking your user name on the bottom left of the left sidebar menu in the Beyonic web portal and selecting ‘Manage my account’ from the dropdown menu. The API Token is shown at the very bottom of the page.

getExamples.py

import os 
import beyonic
from dotenv import load_dotenv 

load_dotenv()

myapi = os.environ['BEYONIC_ACCESS_KEY']

beyonic.api_key = myapi 

# Listing account: Working. 
accounts = beyonic.Account.list() 
print(accounts)


#Listing currencies: Not working yet.
'''
supported_currencies = beyonic.Currency.list()
print(supported_currencies)

Supported currencies are: USD, UGX, KES, BXC, GHS, TZS, RWF, ZMW, MWK, BIF, EUR, XAF, GNF, XOF, XOF
'''

#Listing networks: Not working yet.
"""
networks = beyonic.Network.list()
print(networks)
"""

#Listing transactions: Working. 
transactions = beyonic.Transaction.list()
print(transactions) 

#Listing contact: Working. 
mycontacts = beyonic.Contact.list() 
print(mycontacts) 


#Listing events: Not working yet.
'''
events = beyonic.Event.list()
print(events)

Error: AttributeError: module 'beyonic' has no attribute 'Event'
'''

Docker file

FROM python:3.8-slim-buster

COPY . .

COPY ./requirements.txt ./requirements.txt

WORKDIR .

RUN pip install -r requirements.txt

CMD [ "python3", "getExamples.py" ]

Build docker image called demo

>>> docker build -t bey .

Run docker image called demo

>>>docker run -t -i bey

Now, I’ll create a Docker compose file to run a Docker container using the Docker image we just created.


version: "3.6"
services:
  app:
    build: .
    command: python getExamples.py
    volumes:
      - .:/pythonBeyonicExamples

Now we are going to run the following command from the same directory where the docker-compose.yml file is located. The docker compose up command will start and run the entire app.


docker compose up

Output

NB: The screenshot below might differ according to your account deatils and your transcations in deatils.

docker compose up preview

To stop the container running on daemon mode use the below command.

docker compose stop

Output

docker compose preview

Contributing to this repository. All contributions, bug reports, bug fixes, enhancements, and ideas are welcome, You can get in touch with me on twitter @HarunMbaabu.

Download Details:
Author: HarunMbaabu
Source Code: https://github.com/HarunMbaabu/BeyonicAPI-Python-Examples
License:

#api #python #flask #django #fastapi

Jade Bird

1645499052

Vue Vben Admin: A Modern Vue Admin with Vue3, vite and TypeScript

Vue vben admin

Introduction

Vue Vben Admin is a free and open source middle and back-end template. Using the latest vue3, vite2, TypeScript and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.

Feature

State of The Art Development：Use front-end front-end technology development such as Vue3/vite2
TypeScript: Application-level JavaScript language
Theming: Configurable themes
International：Built-in complete internationalization program
Mock Server Built-in mock data scheme
Authority Built-in complete dynamic routing permission generation scheme.
Component Multiple commonly used components are encapsulated twice

预览

vue-vben-admin - Full version Chinese site
vue-vben-admin-gh-pages - Full version of the github site
vben-admin-thin-next - Simplified Chinese site
vben-admin-thin-gh-pages -Simplified github site

Test account: vben/123456

VbenAdmin Logo

Use Gitpod

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.

Documentation

Document

Preparation

node and git - Project development environment
Vite - Familiar with vite features
Vue3 - Familiar with Vue basic syntax
TypeScript - Familiar with the basic syntax of TypeScript
Es6+ - Familiar with es6 basic syntax
Vue-Router-Next - Familiar with the basic use of vue-router
Ant-Design-Vue - ui basic use
Mock.js - mockjs basic syntax

Install and use

Get the project code

git clone https://github.com/anncwb/vue-vben-admin.git

Installation dependencies

cd vue-vben-admin

pnpm install

run

pnpm serve

build

pnpm build

Change Log

CHANGELOG

Project

vue-vben-admin - full version
vue-vben-admin-thin-next - Simplified version

How to contribute

You are very welcome to join！Raise an issue Or submit a Pull Request。

Pull Request:

Fork code!
Create your own branch: git checkout -b feat/xxxx
Submit your changes: git commit -am 'feat(function): add xxxxx'
Push your branch: git push origin feat/xxxx
submitpull request

Git Contribution submission specification

reference vue specification (Angular)

feat Add new features
fix Fix the problem/BUG
style The code style is related and does not affect the running result
perf Optimization/performance improvement
refactor Refactor
revert Undo edit
test Test related
docs Documentation/notes
chore Dependency update/scaffolding configuration modification etc.
workflow Workflow improvements
ci Continuous integration
types Type definition file changes
wip In development

Related warehouse

If these plugins are helpful to you, you can give a star support

vite-plugin-mock - Used for local and development environment data mock
vite-plugin-html - Used for html template conversion and compression
vite-plugin-style-import - Used for component library style introduction on demand
vite-plugin-theme - Used for online switching of theme colors and other color-related configurations
vite-plugin-imagemin - Used to pack compressed image resources
vite-plugin-compression - Used to pack input .gz|.brotil files
vite-plugin-svg-icons - Used to quickly generate svg sprite

English | 中文

Download Details:
Author: vbenjs
Source Code: https://github.com/vbenjs/vue-vben-admin
License: MIT
#vue #vue3 #vite #typescript