Chiko Nakamura

1571714010

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

TypeScript Basics For Beginners
Dipesh Malvia

Dipesh Malvia

1636630573

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*** 

🔗 Social Medias 🔗

⭐️ 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

Jose Grady

Jose Grady

1612238052

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

Cayla  Erdman

Cayla Erdman

1601549700

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

Basics of React and TypeScript

In web development, there are plenty of options regarding the programming language, library, and/or framework you want to use. Let’s discuss using TypeScript!

In web development, there are plenty of options regarding the programming language, library, and/or framework you want to use. Choosing one over another will, of course, have its positive and negative aspects.

I am pretty familiar with ReactJS, this being the framework for front-end development where I am currently working. To give you a bit of context, we’re developing a flipbook-making tool used by millions of people worldwide. The pressure is high to deliver the best bug-free code.

Lately, we started working on some really awesome upgrades in our app and decided to try something different. After some research, we found that TypeScript in combination with React was the missing puzzle piece.

“TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions”, as mentioned on the official site.

What do types mean? Let me show you a short example:

const myConstant: string = “Hello world!”

This sets the type of myConstant to string. It’s extremely useful if we ever want to use it as a value where we would need a string. TypeScript will first check the type we need and then will check the type of our constant. If it is not a string as it would require, then it will throw us an error.

There are multiple types that can be used, the most common of which are string, number, and boolean. But we should also mention that arrays, functions, or objects are among other declarable types. You can even go as far as declaring custom types, depending on what you need.

Typings are a huge help for developers because it makes code much easier to read and understand. As a developer, if you have to debug or extend on a component or function, having those types also gives you a better understanding of what is happening or what is needed.

React is at its best when combined with Typescript and in order to do so, you have to create a TSX file (which will enable the use of JSX). Now it’s time to build a component. As an example, I will create a button component that receives URL, label, and color as props.

Before we start, we know what our props will be, so it’s time we create an interface for our component, which is an object structure that defines the contracts within the code. The interface contains information about properties and their respective types.

#developer #react #typescript #react for beginners

Hayden Slater

1575384068

TypeScript Tutorial for Beginners | Introduction to TypeScript Basics

In this TypeScript tutorial video will provides in-depth knowledge about typescript and its basics and fundamentals. it also talks about the different advantages and features of Typescript and explains each concept with an example. Below are the topics covered in this TypeScript Basics Video:
1:28 Introduction to TypeScript
6:54 Types of TypeScript
7:31 Variables
9:50 Operators
21:47 Loops
33:17 Functions
36:52 Strings
42:38 Arrays
46:36 Interfaces
47:42 Classes
50:27 Objects
51:28 TypeScript use case

#TypeScript