what is typescript ?

It is an open-source programming language from Microsoft. It's announced on October 2012. It comes with powerful type checking abilities and object-oriented features.All of the proposed features of ES 2015 and ES 2016 are implemented by TypeScript, or are in the process of being implemented.These features are converted into their ES5 equivalent when the TypeScript files are transpiled, making it possible to use the latest features of JavaScript even when the browsers have not implemented them natively. Angular 2 uses TypeScript as its primary language for application development.

wantcode typescript


Important points of typescript:
  • TypeScript is a typed superset of JavaScript and compiles to plain JavaScript.
  • TypeScript files have the extension .ts.
  • Since TypeScript supports types, it looks very familiar to any other typed OOP's languages like C# and Java.
  • TypeScript is not executed on the browser. Instead, the transpiled code gets executed in the browser.


Example of typescript:


class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

that gets transpiled into plain JavaScript.


var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

You can also use the online transpiler here .In which you can convert your .ts code to .js.

How the TypeScript defines the type of member variables and class method parameters.  This is removed when translating to JavaScript, but used by the IDE and compiler to spot errors, like passing a numeric type to the constructor.

Typescript introduction :

Boolean : The most basic datatype is the simple true/false value, which JavaScript and TypeScript call a boolean value.


let isDone: boolean = false;

Number : As in JavaScript, all numbers in TypeScript are floating point values. These floating point numbers get the type number. In addition to hexadecimal and decimal literals, TypeScript also supports binary and octal literals introduced in ECMAScript 2015.


let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String : we use the type string to refer to these textual datatypes. Just like JavaScript, TypeScript also uses double quotes (") or single quotes (') to surround string data.


let color: string = "blue";
color = 'red';

Array :  Array types can be written in one of two ways. In the first, you use the type of the elements followed by [] to denote an array of that element type.


let list: number[] = [1, 2, 3];

The second way uses a generic array type, Array<elemType>:


let list: Array<number> = [1, 2, 3];

Tuple : Tuple types allow you to express an array where the type of a fixed number of elements is known, but need not be the same.For example, you may want to represent a value as a pair of a string and a number.


// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

Enum : A helpful addition to the standard set of datatypes from JavaScript is the enum.


enum Color {Red, Green, Blue}
let c: Color = Color.Green;

ANY : If you are declaring a variable without using a type and without assigning any value to it, the TLS assigns it the any type. Think of any as a supertype of all types, which is used whenever TypeScript is unable to infer a type.You can also assign the any type explicitly, which allows it to assume any value—from a simple string, number, Boolean, or even a complex object.


var x; //implicitly assigned type any 

var y : any; // explicitly assigned type any

VOID : Void signifies that a method does not have a return value.


function showmsg(msg):void {
alert(msg)
}

TypeScript has a number of useful features.To dive deeper into TypeScript, refer to doc

Build native android app in javascript

React Native is a JavaScript framework for writing real, native rendering Android and ios platform applications. Instead of running React in the browser and rendering to div's and span's, React Native run it in an embedded instance of JavaScript.

Android App in javascript react


Requirement :
Node.js should be installed on your machine.

Install global package of react native cli :
npm install -g react-native-cli

Install Android Studio :
Android Studio 2.0 or higher. It will provide you the Android SDK and emulator required to run and test your React Native apps.While installing the android studio choose customize installation and choose Choose Android Virtual Device.

After installation, choose Configure | SDK Manager from the Android Studio welcome window.

In the SDK Platforms window, choose Show Package Details and under Android 6.0 (Marshmallow), make sure that Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image, and Google APIs Intel x86 Atom_64 System Image are checked.

In the SDK Tools window, choose Show Package Details and under Android SDK Build Tools, make sure that Android SDK Build-Tools 23.0.1 is selected.


Set environment path for  ANDROID_HOME
export ANDROID_HOME=~/Android/Sdk

To do that, add this to your ~/.bashrc, ~/.bash_profile (or whatever your shell uses) and re-open your terminal:

Watchman : Watchman is a tool by Facebook for watching changes in the filesystem. It is recommended you install it for better performance.


git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.5.0  # the latest stable release
./autogen.sh
./configure
make
sudo make install

You can create the virtual device to run the app on emulator or you can debug also in android device.

Settings > About Phone > Build number > Tap it 7 times to become developer;
Settings > Developer Options > USB Debugging.

Now install react native using these commands.


react-native init firstNativeApp
cd firstNativeApp
react-native run-android

Note : By default the app will run on port 8081 so please check if some other process will using the 8081 port or not.


This error will happened because in port 8081 i'm running already a nginx server . so your can stop it or change the react default port.

While running the react-native run-android you can also check the status of package is running or not using command react-native start.

if some error will occured while run-android the it must be some sdk problem or avd not started. sometime some gradle or local properties error  also occuring so create settings.gradle in your root project and add this code include ':app'. Under android folder you can create local.properties and add sdk.dir=~/Android/Sdk your sdk path.

Then open your project root file index.android.js and change some content and see the changes in app also if app will not refreshing automatically then check your watchman installation step or your directly refresh you in device by shaking it. I hope you understand the how app will run in android. 







Download the eBook of react js for beginners

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications...

Popular