Category: JavaScript

Categories
JavaScript TypeScript

TypeScript Cookbook

TypeScript is a programming language that is a superset of ECMAScript 6. TypeScript was created to address the shortcomings of JavaScript for the development of large-scale applications by extending JavaScript with the addition of static typing. This enables static language analysis, which in turn facilitates tooling and IDE support (which makes programming so much easier!).

I suspect that Microsoft developed the Visual Studio Code IDE specifically with TypeScript development in mind. When you develop TypeScript code in Visual Studio Code, you get IntelliSense, and you can set breakpoints and can step through the code just like you can with C# and C++. Within the IDE, the TypeScript service provides code complete suggestions, and it flags syntax errors.

Note: When you use Visual Studio Code for your TypeScript development, you must install the TypeScript compiler (tsc). To install it, simply open an administrative command prompt and enter the following command: npm install -g typescript. Note that Visual Studio Code’s TypeScript language service is separate from the TypeScript compiler.

Like ECMAScript 6, TypeScript also supports classes, modules, interfaces, namespaces, enumerations, generics, tuples, and lambda syntax.

Key concepts

The act of typing is the association of a data type with a sequence of bits. TypeScript provides static typing through type annotations to enable type checking at compile time. The annotations for the primitive types are number, boolean and string.

The TypeScript compiler compiles TypeScript files (*.ts) into JavaScript files (*.js). TypeScript also supports definition files (*.d.ts), that contain type information of existing JavaScript libraries (similar to header files in C++).

  • Weakly typed = dynamic typing.
  • Strongly typed = static typing.

Example

function add(left: number, right: number): number {
    return left + right;
}

Declaration files

When you compile a TypeScript script, there is an option to generate a declaration file (with extension *.d.ts) that serves as an interface to the components in the compiled JavaScript. The compiler removes the function bodies and keeps just their signatures, which includes type details. You declaration files are then used by third-party developers when they integrate your code.

Example

declare var foo: number;

declare function greet(greeting: string): void;

declare namespace myLib {
    function makeGreeting(s: string): string;
    let numberOfGreetings: number;
}

declare function greet(setting: GreetingSettings): void;

declare class Greeter {
    constructor(greeting: string);
    greeting: string;
    showGreeting(): void;
}

tsconfig.json

Generally, the first thing you do when starting a new TypeScript development project is to create a project configuration file called tsconfig.json. It contains settings in JSON format, that specify such options as the target compiler, and where to output files.

Example

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "sourceMap": true
    }
}

Notes

To run a TypeScript program, you first transpile it into JavaScript (tsc HelloWorld.ts), and then you execute the resulting JavaScript file with node (node HelloWorld.js).

Categories
JavaScript

JavaScript Functions

Functions in JavaScript have really changed over the past ten years or so.

Function Declarations

Defining functions using declarations used to be the the usual way of using functions. Declared functions are not executed immediately. They are executed later when they are invoked.

Example

function myfunction(a, b) {
    return a * b;
}

myfunction(2, 3);

Anonymous Functions

You can define a function without a name. Such functions are known as anonymous functions.

Example

You can pass an anonymous function as a parameter in another function call.

setTimeout(function() {
  alert('hello');
}, 1000);

Function Expressions

You can also define an anonymous function using an expression, and you can store a function expression in a variable. You invoke the function by stating the variable name followed by a set of parenthesis and a semicolon.

Example

var sayhi = function() {
    alert('Hello World!');
}

sayhi();

But what problems do function expressions solve? Why were they added to the JavaScript language?

Closures

When you wrap an anonymous function definition in a set of parenthesis, you can invoke it by appending a set of parenthesis to it, followed by a semicolon.

Example

(function() {
    alert('foo');
})();

Lambdas

Lambdas provide a shorthand for creating anonymous functions.

Example

An anonymous function with one argument x that returns x + 1.

x => x + 1

Example

As above, but with a function body.

x => {return x + 1}

Example

A two-argument lambda function.

(x, y) => x + y

Example

Same as above, except with a function body.

(x, y) => {return x + y}