(FRONT) FRONT (2022)

Typescript Learning StartPoint

This is my start point for learning Typescript (without Angular) https://github.com/AAlex-11/TypescriptLearningStartPoint/tree/main.

1. What is Typescript at all?

Globally TS is no more than package of JS extension, main future of this extension is adding Types to type absent JavaScript. To understand this look to this 5 files https://github.com/Alex-1347/TsTypesSelfTest

2. Install Typescript compiler and runtime.

1. Install Node.JS and check version.

# node -v

2. Install typescript locally to project.

# npm i typescript --save-dev

Two files will appears after installation

 + package.json
 + package-lock.json

3. Create ini typescript compiler file

# npx tsc --init

File with compiler options appear.

 + tsconfig.json

4. Install ts-node compiler.

# npm i ts-node --save-dev

5. There are alternative compiler, this is comparison https://github.com/privatenumber/ts-runtime-comparison, between https://github.com/TypeStrong/ts-node and https://github.com/esbuild-kit/tsx.

The main difference is that tsx transpile all the file according to your tsconfig. Instead, ts-node will start from the entry file and transpile the file step by step through the tree based on the import/export.

6. Also for 99% program need more packages, for example.

# npm i @types/node --save-dev

3. Install debugger and developer services.

https://marketplace.visualstudio.com/items?itemName=kakumei.ts-debug or other, after installation file .vscode\launch.json appear. After that we can use VS Code debugger as Run Debug -> Ts-Node.

Also there are so called AstViewer for TypeScript, there are extension for VS Code https://marketplace.visualstudio.com/items?itemName=saber2pr.ts-ast-viewer, and the same service there is online https://ts-ast-viewer.com/, https://astexplorer.net/. How to Read JavaScript Source Code, Using an AST

4. Run Typescript code in various mode.

After installation we can try to start TypeScript code, there are two node - simple command line and on server code. For simple command line code we can start with debugger (Run Debug -> Ts-Node) or with simple command line

For Linux debugging debug commands look as

# /home/admin/Downloads/node-v16.19.0-linux-x64/bin/node -r ts-node/register HelloWorld.ts

For Windows:

# D:\nodejs\node.exe -r ts-node/register HelloWorld.ts

Pay attention that console output and commands appears on "VS Code debug console" windows. Alternatively we can start TS application as console aplication.

# npx ts-node HelloWorld

Alternative way is install Express package and run, this is way to start Typescript code as server code.

We can start ONE Ts file as server Node.JS code with npx ts-node or start all project according tsconfig.json npx tsc, or start ONE TS file as server code npx tsc HelloWorld.

# npx tsc HelloWorld

Alternatively we can start TS code on browser by various way, first way is create bundle with WebPack OR compile TS to JS and start JS on Browser with Require.JS, see example on may page My RxJs learning conspectus

Alternatively we can use Vite local web server with HMR

prepare this package.json

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"

And call Typescript code as

#npm run dev
#npm run build
#npm run preview

5. TypeScriptlang.org playground

6. How to start WebDevelopment on Typescript with Lite-server and Webpack server

7. Max Typescript Lecture

8. Typescript brief on Angular lecture

9. Typescript Colt lecture

10. Typescript Matt Pocock lecture

11. DigitalOcean.com

  1. Benefits of Using TypeScript(January 14, 2019)
  2. Getting Started With Angular Using the Angular CLI(May 6, 2022)
  3. How To Build a Bookstore Landing Page with Gatsby and TypeScript(July 22, 2021)
  4. How To Build a REST API with Prisma and PostgreSQL(November 8, 2022)
  5. How To Build a Type-Safe URL Shortener in NodeJS with NestJS(August 23, 2022)
  6. How To Create Custom Types in TypeScript(March 25, 2021)
  7. How To Deploy Load-Balanced Web Applications on DigitalOcean with CDK for Terraform and TypeScript(July 5, 2022)
  8. How To Run End-to-End Tests Using Playwright and Docker(August 19, 2022)
  9. How To Run TypeScript Scripts with ts-node(March 23, 2022)
  10. How To Set Up a Gatsby Project with TypeScript(July 14, 2021)
  11. How To Set Up a New TypeScript Project(May 9, 2022)
  12. How To Use Basic Types in TypeScript(March 16, 2021)
  13. How To Use Classes in TypeScript(July 9, 2021)
  14. How To Use Decorators in TypeScript(September 17, 2021)
  15. How To Use Enums in TypeScript(June 14, 2021)
  16. How To Use Functions in TypeScript(April 13, 2021)
  17. How To Use Generics in TypeScript(November 16, 2021)
  18. How To Use Generics in TypeScript(November 23, 2020)
  19. How To Use Interfaces in TypeScript(October 1, 2021)
  20. How To Use Modules in TypeScript(February 7, 2022)
  21. How To Use Namespaces in TypeScript(February 1, 2022)
  22. How To Use Type Aliases in TypeScript(December 17, 2020)
  23. How To Use Typescript with Create React App(April 2, 2021)
  24. Interface Declaration Merging in TypeScript(August 23, 2019)
  25. Introduction to Enums in TypeScript(February 3, 2017)
  26. Introduction to Interfaces in TypeScript(January 17, 2017)
  27. Module Augmentation in TypeScript(September 5, 2019)
  28. Object Rest and Spread in TypeScript(December 9, 2016)
  29. Polymorphic this Type in TypeScript(August 20, 2019)
  30. String Literal Types in TypeScript(December 5, 2016)
  31. TypeScript Enum Declaration and Merging(September 4, 2019)
  32. TypeScript Mixins(September 1, 2021)
  33. TypeScript Tuples(August 12, 2019)
  34. Union Types in TypeScript(November 28, 2016)

12. Egghead.io

  1. Up and Running with TypeScriptJohn Lindquist
  2. Refactor a React Application to TypeScriptChance Strickland
  3. TypeScript: Tips and TricksKamran Ahmed
  4. Modern Redux with Redux Toolkit (RTK) and TypeScriptJamund Ferguson
  5. Deploy a Serverless API React Application with TypeScriptJason Lengstorf
  6. Confidently Testing Redux Applications with Jest & TypeScriptJamund Ferguson
  7. Build Full Stack Web Applications with Angular and FirebaseJorge Vergara
  8. Build a Realtime Chat App with Remix and SupabaseJon Meyers
  9. Build a News App with React Native, GraphQL and TypeScriptKadi Kraman
  10. Full Stack with React and AppwriteColby Fayock
  11. Build a Realtime Chat App with Remix and SupabaseJon Meyers
  12. Up and Running with TypeScriptJohn Lindquist
  13. Build a Twitter Clone with the Next.js App Router and SupabaseJon Meyers
  14. Maintainable CSS using TypeStyleBasarat Ali Syed
  15. Confidently Testing Redux Applications with Jest & TypeScriptJamund Ferguson
  16. Build a Modern User Interface with Chakra UILazar Nikolov
  17. Modern Redux with Redux Toolkit (RTK) and TypeScriptJamund Ferguson

13. Related pages

Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: http://www.vb-net.com/TypescriptLearningStartPoint/Index.htm