Skip to main content

TypeScript Day 1 — Getting Started

Jeacson She9/10/22...About 4 minTypeScriptWeb

0. Introduction to TypeScript

  1. TypeScript is a superset of JavaScript.
  2. It extends JS, bringing the concept of types into JS and adding a lot of new features.
  3. TS code has to be compiled to JS by the compiler, and is then handed to the JS parser to run.
  4. TS is fully compatible with JS; in other words, any JS code can be used directly as TS code.
  5. Compared with JS, TS has static types, stricter syntax and more powerful features; TS can check the code before it runs, which lowers the odds of runtime exceptions; TS code can be compiled to any version of JS, which effectively solves the compatibility problems of different JS runtimes; for the same functionality the TS codebase is bigger than the JS one, but since TS code is better structured and its variable types are more explicit, TS beats JS by a mile when it comes to maintaining the code later on.

1. Setting up the TypeScript development environment

  1. Download and install Node.js

  3. Install typescript globally with npm

    • Open a command line

    • Type:

      npm i -g typescript

  4. Create a ts file

  5. Compile the ts file with tsc

    • Open a command line

    • Go into the directory the ts file lives in

    • Run the command:

      tsc xxx.ts

2. Basic types

  • Type declarations

    • A type declaration is a very important feature of TS

    • Type declarations let you specify the type of a variable in TS (arguments, parameters and the like)

    • Once the type is set, when you assign a value to the variable the TS compiler automatically checks whether the value matches the variable's type declaration — if it does the assignment goes through, otherwise you get an error

    • In short, a type declaration pins a type onto a variable, so that the variable can only hold values of that type

    • Example syntax:

      • let variable: type;

let variable: type = value;

function fn(param: type, param: type): type{
    ...
}

  • Automatic type inference

    • TS has an automatic type inference mechanism
    • When a variable's declaration and its assignment happen at the same time, the TS compiler infers the variable's type
    • So if the declaration and the assignment happen together, you can leave the type declaration out

  • Types:

    TypeExampleDescription
    number1, -33, 2.5any number
    string'hi', "hi", hiany string
    booleantrue, falsethe boolean value true or false
    literalitselfrestricts the variable's value to that literal
    any*any type
    unknown*a type-safe any
    voidempty value (undefined)no value (or undefined)
    neverno value (generally set as the return type of a function that throws)cannot be any value (because a function that throws an error can't return any type)
    objectany JS object
    array[1,2,3]any JS array
    function(a: number, b: number) => number;any JS object
    tuple[4,5]tuple, a type added by TS, a fixed-length array
    enumenum CustomNameenum, a type added by TS

2.1 Type usage examples

1. number

  •  let n: number;//if you don't assign a value at definition, declare it afterwards
 let decimal: number = 6;
 let hex: number = 0xf00d;
 let binary: number = 0b1010;
 let octal: number = 0o744;
 let big: bigint = 100n;

2. boolean

  • let isDone: boolean = false;

3. string

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

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;

4. literal

  • You can also use a literal to specify a variable's type; a literal pins down the range of values the variable may take

  • let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;

5. any

  • let d: any = 4;
d = 'hello';
d = true;

  • any generally isn't used all that often

6. unknown

  • let notSure: unknown = 4;
notSure = 'hello';

  • Note: when a variable of type unknown is assigned straight to some particular variable without a check or a type assertion, the assignment statement errors out

  • In that case you can use the following code to check:

  • let s: string;
if (typeof notSure === 'string') {
    s = notSure;
}

  • Or use a type assertion to assert the unknown as some particular type value (see 2.2)

7. void

  • let unusable: void = undefined;

8. never

  • function error(message: string): never {
  throw new Error(message);
}

9. object

  • We generally don't assign object straight to a variable as if it were a class, the way the code below does:

  • let obj: object = {};

  • Instead we use it the way the code below does, to specify which properties the object may contain:

  • let b: { name: string, age?: number };

b = {
    name: 'ddd',

};

  • Note: the "?" in the code above means the variable is optional

10. array

  • There are two ways to define one: ① type[] ; ② Array<type>

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

11. function

  • The syntax is: (param: type, param: type, … , param: type) => return type

  • let d: (a: number, b: number) => number;

d = function (n1: number, n2: number): number {
    return n1 - n2;
}
//the structure declares d's type as a function; it takes two parameters, both of type number, and returns a number

12. tuple

  • let x: [string, number];
x = ["hello", 10];

13. enum

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

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

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

2.2 Type assertions

  • There are cases where the variable's type is perfectly clear to us but the TS compiler doesn't know it; there you can tell the compiler the variable's type with a type assertion. There are two forms of assertion:

    • The first one: "variable as type"

      • let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

    • The second one: "<type>variable"

      • let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

Important

This article was translated by Hermes Agent; the original text can be found at here. The translation is for reference only. Translation time: 2026-11-05

Last Updated:
Contributors: JeacsonSnake,Hermes-cRl1,Jeacson_Snake