TypeScript Basics For Beginners

Typescript can be explained as a superset of Javascript. It means that every Javascript (also ES6 & newer versions) code is valid Typescript code, but Typescript comes with some additional features: Strong-typed variables. Object-oriented programming.

In this article, we will learn some basics of typescript which helps you to develop javascript application in a better way. TypeScript Basics – The Definitive Guide

What is TypeScript and why we need it?

So, before diving into the concepts of typescript. we should know what is typescript and why it is needed.

Firstly, TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.

As a Javascript developer, there is one thing that we miss when compared with other languages such as Java,C#. that is, TypeCheck.

languages like java checks the type of defined variable in the compile time itself unlike javascript. it helps to solve lot of bugs in the compile time itself

To solve this problem in javascript. TypeScript is introduced.

Setting up TypeScript

TypeScript is only for development purpose. Since, browser/JS engine doesn’t understand anything except javascript.

So, we need to compile the typescript to javascript before running it the server/browser.

Here’s an article explaining the complete setup and production deployment of typescript in Node.js Application.

Understanding Types

Types are not a new in javascript. javascript already have dynamic types. they are,

• Undefined
• Null
• Boolean
• Number
• String
• Symbol
• Object
  But, these types in javascript are dynamic. javascript checks the type of variables in run time.

Instead of checking the type in runtime, Typescript check that on compile time. static type predicts the value of dynamic types.

Basic Static Types

String

it is a textual data surrounded by single or double quotes

const message: string = 'hello world';
console.log(message);

Boolean

this type represents the boolean value which is either true or false

const isType: boolean = false
console.log(isType);

Number

this type represents the integer value in the variable. there are four type of number literals supported in the number type

const age: number = 40;
console.log(age)

Array

there are two ways to type check an array in Typescript. first way is to add [] to the element type

let newArray: string[] = ["one", "two", "three"]
console.log(newArray)

second way is to use the keyword Array with the type,

let newArray: Array<string> = ["one", "two", "three"]
console.log(newArray)

Enum

enums allow us to declare a set of named constants i.e. a collection of related values that can be numeric or string values.

Mainly, there are three types of enum,

• Numeric Enum

• String Enum

• Heterogenous Enum

enum Status {
    Inactive = 0,
    active = 1
}

console.log(Status.active)

enum Status {
    Inactive = "INACTIVE",
    active = "ACTIVE"
}

console.log(Status.active)

Any

if the variable type is not known and we don’t want the type checker for the particular variable, then the type of any can be used.

let checkValue: any = true

checkValue = "Check";
checkValue = 14

void

void is used when there is no return value in the function. if there is no return data type for a function, void is used.

const LogIt = (): void => {
    console.log("log")
}

Type Inference

Mainly, TypeScript has a feature which identifies the type of variable from the value assigned to it. it is called Type Inference.

For example,

let userName = "String"

TypeScript identifies the variable userName as a string from it’s value. and throw error if you assign a type number to it.

This concept is called as Type Inference.

Interface

Firstly, interface in Typescript is a way to check the type of an object. if we want to check the type of values in group. Interface is the best choice.

For Example,

interface userData {
    name: string,
    age : number
}

let AddUserDetails = ({ name, age }: userData): void => {
    let arr = [];

    arr.push({
        name,
        age
    })
}

AddUserDetails({ name : "Ganesh",age : 25});

Here, we have a function called AddUserDetails which takes two arguments such as** name** and age.

To check the Type of Both arguments, we need interface. So, we created an interface userData and typecheck it.

if we pass first value as number, it will throw an error. Alternatively, we can define type of any to pass value.

Generics

In TypeScript, Generics enables you to create reusable code components that work with a number of types instead of a single type. For Example,

const createNewArray = (value: string): Array<string> => {
    let output : Array<string> = [];

    output.push(value);

    return output;
}

Here, function createNewArray takes an argument with type string and return an array with that value. but what if we want to create an array with type number.

const createNewArray = (value: string): Array<string> => {
    let output : Array<string> = [];

    output.push(value);

    return output;
}

let val = createNewArray("fdfsd");
let newVal = createNewArray(12)
console.log(val)

above implementation with throw an compilation error on that scenario. we can solve this problem using Generic.

const createNewArray = <T>(value: T): Array<T> => {
    let output : Array<T> = [];

    output.push(value);

    return output;
}

let val = createNewArray<string>("fdfsd");

console.log(val)

The above example has a generic type T that corresponds to the type of the argument that is passed to the createNewArrayfunction.

T is a naming convention that represents string here, because we are passing Type string while we call the function.

If we change the type to number while we call function/class. it will take the type dynamically. that’s the beauty of Generics

there are different way to implement the generics, we can implment it in Interface, Class and Type Generics.

Conclusion

Honestly, we barely scratched the surface of TypeScript. we will see this concepts in more depth in upcoming articles, until then you can refer some wonderful articles on typescript.

Thank you for taking the time to read the article !

#typescript #javascript

What is GEEK

Buddha Community

The Definitive Guide to TypeScript & Possibly The Best TypeScript Book

TypeScript Deep Dive

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.

• Filipino
• Italian
• Chinese
• Russian
• Portuguese
• Japanese
• Spanish
• Korean
• French
• Polish
• Thai

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 

Learn React TypeScript & Bootstrap with one Project | React TypeScript Tutorial for Beginners

Learn React TypeScript & Bootstrap with one Project | React TypeScript Tutorial for Beginners

This video is an easy and complete React + TypeScript + Bootstrap tutorial for Beginners. In this video we will build a Notes Application from scratch and understand everything about how we can use TypeScript with React.

 ⭐️GitHub link for Reference⭐️

https://github.com/dmalvia/React_TypeScript_Notes_App 

⭐️ Support my channel⭐️

https://www.buymeacoffee.com/dipeshmalvia 

🔥 Video contents... ENJOY 👇 

• 0:00:00 - Intro 
• 0:00:22 - Application Demo 
• 0:02:06 - How to Setup React TypeScript Project 
• 0:02:57 - Understand React TypeScript App Folder Structure 
• 0:05:16 - Installing Bootstrap to Project 
• 0:06:18 - Installing TypeScript React code snippets Extension 
• 0:07:00 - Create Application Folder Structure 
• 0:08:42 - Why we use TypeScript with React ? 
• 0:12:05 - Use TypeScript with State 
• 0:15:12 - Adding TypeScript Interface 
• 0:17:55 - Create Header Component 
• 0:21:55 - Create NotesList Component 
• 0:24:00 - Use TypeScript with Props 
• 0:30:12 - Create Notes Component 
• 0:33:55 - Use TypeScript with Functions 
• 0:39:27 - Create Note Component 
• 0:45:37 - Use TypeScript with Ref 
• 0:48:43 - Use TypeScript with Events 
• 0:50:00 - Form Validation 0:57:56 -Testing the Application 
• 0:59:30 - Outro 

***React Roadmap for Developers in 2021*** 

• How to Learn React JS ? - https://youtu.be/06yVj8pcO5c
• React in One Project - https://youtu.be/0riHps91AzE
• Learn React Redux with Project - https://youtu.be/0W6i5LYKCSI
• What is Redux ? - https://youtu.be/qNjNn9BCWCc
• Learn React Redux Thunk with Project - https://youtu.be/JDZRfLGNWdc
• Learn React Hooks - https://youtu.be/hJ5UEtdS8qE

🔗 Social Medias 🔗

• Twitter: https://twitter.com/IMDmalvia
• Facebook: https://www.facebook.com/programmingwithdipesh
• Instagram: https://www.instagram.com/dipeshmalvia
• LinkedIn: https://www.linkedin.com/in/dmalvia/

⭐️ Tags ⭐️ 

• React with TypeScript Crash Course 
• React TypeScript Notes Application - 
• React Typescript Projects For Beginners 
• Learn TypeScript with React js 
• TypeScript Tutorial 

⭐️ Hashtags ⭐️ 

#react #typescript #beginners #tutorial 

Disclaimer: It doesn't feel good to have a disclaimer in every video but this is how the world is right now. All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

https://youtu.be/HMP5e5utTwg

An interactive TypeScript Tutorial for Beginners

Quickstart

Take the course on Total TypeScript. There, you'll find:

• Video explanations for each problem and solution
• Transcripts
• Text explanations
• A built-in Stackblitz editor

Installation Instructions

Clone this repo or open in Gitpod.

# Installs all dependencies
npm install

# Starts the first exercise
npm run exercise 01

# Runs linting and tests on the solution
npm run solution 01

How to take the course

You'll notice that the course is split into exercises. Each exercise is split into a *.problem.ts and a *.solution.ts.

To take an exercise:

1. Go into *.problem.ts
2. Run npm run exercise 01, where 01 is the number of the exercise you're on.

The exercise script will run TypeScript typechecks and a test suite on the exercise.

This course encourages active, exploratory learning. In the video, I'll explain a problem, and you'll be asked to try to find a solution. To attempt a solution, you'll need to:

1. Check out TypeScript's docs
2. Try to find something that looks relevant.
3. Give it a go to see if it solves the problem.

You'll know if you've succeeded because the tests will pass.

If you succeed, or if you get stuck, unpause the video and check out the *.solution.ts. You can see if your solution is better or worse than mine!

You can run npm run solution 01 to run the tests and typechecking on the solution.

Acknowledgements

Say thanks to Matt on Twitter or by joining his Discord. Consider signing up to his Total TypeScript course.

Reference

npm run exercise 01

Alias: npm run e 01

Run the corresponding *.problem.ts file.

npm run solution 01

Alias: npm run s 01

Run the corresponding *.solution.ts file. If there are multiple, it runs only the first one.

Download Details:

Author: Total-typescript
Source Code: https://github.com/total-typescript/beginners-typescript-tutorial 

#typescript #beginners 

TypeScript Tutorial For Beginners: TypeScript Basics

Various aspects of TypeScript covered simply

According to https://www.typescriptlang.org/, TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.

Browsers, by default, do not understand TypeScript. After writing TypeScript code, we have to compile it into JavaScript in order for browsers to understand it.

TypeScript allows us to use types. If we declare a variable in TypeScript to be of certain type (say number), then we can’t change that number type later on to string, boolean etc. It makes our error checking process and debugging of our code a bit easier. In contrast of TypeScript, JavaScript uses dynamic data types, where variable can change types at any point, which can lead to more errors and can make our debugging process a bit cumbersome.

---

---

---

---

#programming #typescript #javascript #web-development

What’s New In Typescript 4.0?

Today I am going to talk about new features in Typescript 4.0.

TypeScript 4.0 comes with lots of new features to make JavaScript development easier.

Labeled Tuple Elements

You can label tuple elements.

You can write:

type Range = [start: number, end: number];

to restrict args to have a string and a number.

you can also write:

type Foo = [first: number, second?: string, ...rest: any[]];

to have rest entries in your tuple.

If your tuple has type Foo, then the tuple starts with a number and a string.

Then the rest of the entries can be anything.

Labels don’t require you to name your variables differently when destructuring.

For example, if you have:

function foo(x: [first: string, second: number]) {
  const [a, b] = x;
}

then you can name the destructured variables anything you want.

#software-development #typescript-with-react #typescript #typescript-4 #react native