DEV Community: Adam Alex

TypeScript Tutorial(Part2)

Adam Alex — Tue, 08 Nov 2022 17:05:52 +0000

This article is a continued version of my previous article on getting started with typescript. If you are a newbie or still getting started with typescript, I will advise you to check my previous article because it introduces you to the typescript programming language. After going through it, you can now visit this article and continue.
Click on the link to check the previous article out
[https://dev.to/bralexsvg/getting-started-with-typescript-5a9k]

In the previous article, I ended by going through setting up typescript on one's computer. In this article, we will complete the setup process and write some code.

Now let's begin action

Navigate into any directorate on your computer and create a new folder. In the nearly created folder, create a new file and add .ts. The extension name .ts means the file is a typescript file.

I am going to name my file as app.ts. You can name it anyhow you want.
This how mine looks like👇

After installing the typescript compiler globally on your computer, very to see if the installation is succesfully by executing the below command.
tsc -v
The next step is to compile typescript. So now we are going to compile our newly created file called app.ts
But first, lets write some javaScript code inside the app.ts file

Now open your command prompt and navigate into the directorate you have the app.ts file. Execute the below command
tsc app. After compiling, check back on your text editor and you will see another file by the name app.js added. Suprise to see that? Remember typescript compiles down to javascript so browser engines can understand the code. Click on the app.js file and you will realize the codes you have in the app.ts file are the same as in the app.js file.

If you want TSC to compile your code automatically, whenever you make a change, add the "watch" flag:
tsc index.ts -w
An interesting thing about TypeScript is that it reports errors in your text editor whilst you are coding, but it will always compile your code – whether there are errors or not.
For example, the following causes TypeScript to immediately report an error:

var sport = 'football';
var id = 5;

id = '5'; // Error: Type 'string' is not assignable to 
type 'number'.

But if we try to compile this code with tsc app, the code will still compile, despite the error.
This is an important property of TypeScript: it assumes that the developer knows more. Even though there's a TypeScript error, it doesn't get in your way of compiling the code. It tells you there's an error, but it's up to you whether you do anything about it.

Congratulations for getting here. 🎉
Now lets delve into working with typescript properly.

Basic types in typescript

Type Annotation
String
Number
Boolean
Array
Any type
Object type
Type inference
Union type
Void type

and many more...

Now we going to learn more about each of the types mentioned above. But not everything in this particular article.

Type Annotation

TypeScript uses type annotations to explicitly specify types for identifiers such variables, functions, objects, etc.
TypeScript uses the syntax : type after an identifier as the type annotation, where type can be any valid type.
Once an identifier is annotated with a type, it can be used as that type only. If the identifier is used as a different type, the TypeScript compiler will issue an error.
Lets take a look at how we can use type annotation in variables and constants.

let variableName: type; //declares the variable
let variableName: type = value; // declares and initialise the variable with a value
const constantName: type = value;

In this syntax, the type annotation comes after the variable or constant name and is preceded by a colon (:).
The below code uses number annotation for a variable.

let age: number;

After this, you can only assign a number to the age variable:

 age = 23;

If you assign a string or any type to the age variable, you’ll get an error:

let age: number;
age = 'Thousand'; // compile error

Type '"Thousand"' is not assignable to type 'number'.

The following shows other examples of primitive type annotations:

let name: string = 'Alex';
let age: number = 25;
let active: boolean = true;

In this example, the name variable gets the string type, the age variable gets the number type, and the active variable gets the boolean type.

Arrays

To annotate an array type you use use a specific type followed by a square bracket : type[] :

For example, the following declares an array of strings:

let names: string[] = ['Alex', 'Adam', 'Christy', 'Mercy', 'Sumaya'];

Objects

To specify a type for an object, you use the object type annotation. For example:

let person: {
   name: string;
   age: number
};

person = {
   name: 'Alex',
   age: 23
}; // valid

In this example, the person object only accepts an object that has two properties: name with the string type and age with the number type.

Function arguments & return types

The following shows a function annotation with parameter type annotation and return type annotation:

let greeting : (name: string) => string;

In this example, you can assign any function that accepts a string and returns a string to the greeting variable:

greeting = function (name: string) {
    return `Hi ${name}`;
};

The following causes an error because the function that is assigned to the greeting variable doesn’t match with its function type.

greeting = function () {
    console.log('Hello');
};

*ERROR:
*

Type '() => void' is not assignable to type '(name: string) => string'. Type 'void' is not assignable to type 'string'.

There will be a part three of this article which will feature the rest of the types.

Getting Started With TypeScript

Adam Alex — Fri, 28 Oct 2022 15:21:53 +0000

Hello there, I believe you landed on this article because you are probably a javascript fan and looking forward to upskilling yourself by learning the popular programming language called Typescript. Whatever your reason is, I promise to deliver an interesting and informative explanation of typescript and how you can adopt it in your next or existing project.

What Is Typescript

Typescript is a programming language that builds on the javaScript programming language. But what makes typescript a language to be trusted for use in project(s). Typescript is a strongly typed superset of javaScript which compiles to plain javaScript. Typescript can be used with any browser or operating system since at the end of the day, the code that gets generated and sent to the browser is javaScript. It contains all the elements of the javaScript programming language and additional features. It is a language designed for large-scale javascript applications developement.
TypeScript cannot run directly on the browser like javaScript. Many latest browsers do not have typescript support. It needs a compiler to compile the file and generate it in JavaScript file, which can run directly on the browser. The TypeScript source file is in ".ts" extension. We can use any valid ".js" file by renaming it to ".ts" file. TypeScript uses TSC (TypeScript Compiler) compiler, which convert Typescript code (.ts file) to JavaScript (.js file).

As I mentioned earlier, typescript is a stongly typed langauage. Whcih means it approves the high usage of types in it. Now lets get to learn the tradeoff between Static and Dynamic typing.

Static vs. Dynamic Typing

The difference between static and dynamic typing has to do with when the types of the written program are checked. In statically-typed languages (TypeScript), types are checked at compile-time. In dynamically-typed languages (JavaScript), types are checked at run-time. Now lets get to the point you have been waiting for.

How to get started.

The first step needed in order to use Typescript is to install it globally on your computer by using NPM (Node Package Manager). In case you are new to NPM, to use it you need to have Node.js installed on your computer (for help with Node.js installation click here). To check what version of Node.js and NPM you have just enter the following commands on your terminal:

After ensuring that you Node.js installed in your computer, enter the below command on your terminal:

The above comman executed will install TypeScript globally in your computer allowing you to use it within any project that you have on your computer.

Congratulations to you for getting this far in this article.

One of the ways I have found that has helped me learn stuffs easier and faster in the software developement space is, knowing the reason why I should learn a particular programming langauage, framework or library. After i am satisfied with that, it boost my morale to learn it.

Why use TypeScript?

Typescript is mostly used because of the following reasons:

TypeScript supports Static typing, Strongly type, Modules, Optional Parameters, etc.
TypeScript supports object-oriented programming features such as classes, interfaces, inheritance, generics, etc.
TypeScript is fast, simple, and most importantly, easy to learn.
TypeScript provides the error-checking feature at compilation time. It will compile the code, and if any error found, then it highlighted the mistakes before the script is run.
TypeScript supports all JavaScript libraries because it is the superset of JavaScript.
TypeScript make app development quick and easy as possible, and the tooling support of TypeScript gives us autocompletion, type checking, and source documentation.
Developers can save a lot of time with TypeScript.
TypeScript make app development quick and easy as possible, and the tooling support of TypeScript gives us autocompletion, type checking, and source documentation.

Now I hope the above points have given you the reason why Typescript is one of the best programming languages out there to learn.
I shall release part two of this article whcih will feature the technical aspects of typescript. Basically, we will learn how to write codes using the typescript programming language.

End Of Year With Python Programming Language🍕🥂

Adam Alex — Fri, 31 Dec 2021 14:15:07 +0000

This end-of-year python programming language article will teach you the python language from scratch. The tutorial will take you through the understanding of the Python programming language, help you deeply learn the concepts, and show you how to apply practical programming techniques to your specific challenges.

What you'll learn:

A little theory on the python programming language
How to set up Python on your machine
What variables are in the python language

This particular article does not cover all the features of python. The article is intended to get you started with python programming. I will be writing more articles on other topics in the year 2022 hopefully. You can kindly grab a cup of coffee and journey with me.

WHAT IS PYTHON?

High-level
Python is a high-level programming language that makes it easy to learn. Python doesn’t require you to understand the details of the computer to develop programs efficiently.
General-purpose
Python is a general-purpose language. It means that you can use Python in various domains including:
Web applications
Big data applications
Testing
Automation
Data science, machine learning, and AI
Desktop software
Mobile apps
The targeted language like SQL can be used for querying data from relational databases.
Interpreted
Python is an interpreted language. To develop a Python program, you write Python code into a file called source code.
To execute the source code, you need to convert it to the machine language that the computer can understand. And the Python interpreter turns the source code, line by line, once at a time, into the machine code when the Python program executes.
Compiled languages like Java and C# use a compiler that compiles the whole source code before the program executes.

Next up ,
Setting up python on your machine

In this section, you will learn how to install python on your computer.
first of all, download the latest version of python from the official page. Python is available for windows, mac, and Linux operating systems. At this time of writing the article, the latest version of python is 3.10.1. Yours might differ depending on the time you are reading the article.

Second, double-click the installer file to launch the setup wizard.

*In progress
*

*Set up is done
*

Verify the installation
To verify the installation, you open the Run window and type cmd and press Enter:
Now type python in cmd and you should see the output like mine

If you see the output like the above screenshot, you’ve successfully installed Python on your computer. You can sip more coffee at this stage😍

You can also set up python on your favorite text editor such as vs code, sublime text and the likes. You can read this article to learn how to set up python on vs code

Now let is print something like hello world to the screen in python.
In cmd, type the following command and see fireworks

print("hello world")

The print() is a built-in function that displays a message on the screen. In this example, it’ll show the message 'Hello, Word!'. hey wait, I just mentioned built-in function which might sound new to you right? Do not worry, functions are beyond the scope of this article and I will explain what functions are in python in future articles.

WHAT IS A VARIABLE IN PYTHON?
A variable is a named location used to store data in the memory. It is helpful to think of variables as a container that holds data that can be changed later in the program.
When you develop a program, you need to manage values, a lot of them. To store values, you use variables.

For example:

name = "Alex"
print(name)

output:

Alex

Here, we have created a variable called name and we have assigned a *value Alex * to the variable.
You can think of variables as a bag to store books in it and that book can be replaced at any time.
Now let is see how we can mutate or change the values

name = "Alex"
print(name)
name = "Dawood iddris"
print(name)

expected output:

Alex
Dawood iddris

In the above program, we have assigned Alex to the name variable initially. Then, the value is changed to Dawood iddris. Awesome right?

Variable Names
A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume).

Rules for Python variables:

A variable name must start with a letter or the underscore character

A variable name cannot start with a number
A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )
Variable names are case-sensitive (age, Age and AGE are three different variables)

In conclusion, we learned a little theory about python language, setting up python on the computer, printing hello world text to the screen and we concluded with variables.

Thank you for reading and do not forget to like and comment below and let me know what you think about the article.
Happy new year to you all. Meet you in 2022 for more articles from me.

What is props and how to use props in react js.

Adam Alex — Mon, 13 Dec 2021 15:49:33 +0000

I believe you landed on this article because you have probably started learning React Js or you want to hone your skills in it. Whatever the case, let us get started. React js has a different approach compared to the other JavaScript frameworks when transferring data from one component to the other. Props come in handy to provide a gateway to send data from one component to another. To get a better understanding of how props work in react, you need a good grasp of how components work in general first. I suggest you watch my tutorial on getting with react js on my YouTube channel. Link below.

(https://www.youtube.com/watch?v=8sZGbdE7IZc&t=370s)

What is/are props.

Props stand for properties. They are arguments passed to react components via HTML attributes.
React Props are like function arguments in JavaScript and attributes in HTML.
Let's use a link tag in HTML for instance
<a href = "/home" />
href is the attribute, the value is the data wrapped in by the quotation marks.
So basically, a prop is a special keyword in React that is being used to send data from one component to another.
One important thing to note is, data passed via props is uni-directional only. (from parent component to child component)
Also, the data received by the child component from the parent component is read-only. The data should never be changed inside the child component.
How to use props

Firstly, define an attribute and its value(data)
Then pass it to child component(s) by using Props

3 .Finally, render the Props Data
Create two components and name them by ParentComp.js and ChildComp.js
Below is my Parent Component and a nested child component

`import ChildComp from "./ChildComp"

function ParentComp( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp />
    </div>
)

}

export default ParentComp`

Below is our child component

function ChildComp() { return ( <div> <h2>I will receive data from my parent soon</h2> </div> ) }

That was a very good affirmation from our child component though😂
Now that is rendered. Lets open our browser and see fireworks.

We can render our child component multiple times by just duplicating the codes a couple of times.
`function ParentComp( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp />
  <ChildComp />
  <ChildComp />

    </div>
)

This is what we will see displayed on the screen

The problem now is what if we want to have dynamic outputs?
This is because, each of the child components may have different data. This issue can be solved by our good friend props. Lets see how🙌
With regards to the html link example i stated earlier on which is
<a href="www.twitter.com">Click and start tweeting</a>
In the case of React js. We can also do the same by wrapping the values with interpolation{}
<ChildComp attribute = {value} />
We can have many attributes and assign them to their respective values in the tag.
So now let us see a typical example.
In our parent component, lets us serve some dynamic data to our child component because remember our child component gave an affirmation that it will be receiving data from the parent component soon🤣😂 So lets make that happened.

`function ParentComp( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp passion =  {'I love Coding to the fullest'} />

    </div>
)

}
Lets see how we can receive such data in our child componentfunction ChildComp( props ) { return ( <div> <h2>{props.passion}</h2> </div> ) }
Make sure you state the props keyward in the function parameter.
.
Alternatively, we could also send the data by wrapping our values in a quotation mark.
`
function ParentComp( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp name = "Alex" proffession = "Software Enginner" />
    </div>
)

}
`
Lets us now see how we can receive the data in our child component

Recap:

Props stand for properties and is a special keyword in React
Props are being passed to components like function arguments
Props can only be passed to components in one way (parent to child)
Props data is immutable (read-only)

Getting a good grasp on props is a very crucial when using react js to build applications.

I hope you enjoyed this content?😘😍
Please kindly leave a comment below and let me know what's on your mind about the content. 🤷‍♂️ Thank you

WEB DEVELOPMENT TRAINING.

Adam Alex — Wed, 04 Nov 2020 13:09:28 +0000

Recently, I was approached by a couple of close friends of mine to help tech them programming and web development. I was like wow! Never tried that though but will give it a shot. So I created a new channel on YouTube and also created a WhatsApp group where I included a few others that wanted to also learn basic coding. I recorded a tutorial on how the web works as a start. Then took them through the roadmap to becoming a full stack web developer. I now started with the building blocks by recording a tutorial on html 5 which I made as a crash course. After recording the tutorials, I upload them on my YouTube channel and share the link to them on the WhatsApp platform. I also give them more insights about the tutorials on the WhatsApp platform. reviews are taken then I give them a few days to practice on their own then we move forward. Apparently, we are on CSS3. I made the CSS as a playlist since I want to take my time and really explain most of the important concepts to them. I just uploaded another video on CSS position and display properties on my channel and they have started practicing. Super excited about that though.