TypeScript Learning Outline

TypeScript is a superset of JavaScript that adds a static type system to JavaScript. The following are some basic knowledge points and features of TypeScript that you must know:

Basic types :
TypeScript supports the same basic types as JavaScript and provides some additional type options.
```
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
```
Array :
It can be followed directly by the element type []to form an array of element types.
```
let list: number[] = [1, 2, 3];
```
Enumeration :
The enumeration type is a convenient way for TypeScript to add named numeric collections to JavaScript.
```
enum Color {
      
      Red, Green, Blue}
let c: Color = Color.Green;
```
Any value (Any) :
You can use the type when you don't want the type checker to check certain values any.
```
let notSure: any = 4;
notSure = "maybe a string instead";
```
Void :
used to represent the absence of any type, usually used to represent the return type of a function that does not return a value.
```
function warnUser(): void {
      
      
    console.log("This is my warning message");
}
```

Interfaces :
An interface is a contract between code or third-party code, or a contract between your code and third-party code.

interface LabelledValue {
      
      
  label: string;
}
function printLabel(labelledObj: LabelledValue) {
      
      
  console.log(labelledObj.label);
}

Classes :
TypeScript classes are just a simple syntactic sugar for JavaScript classes.

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

Modules :
TypeScript Like ECMAScript 2015, any file containing a top-level import or export is considered a module.

// module.ts
export function hello() {
      
      
    return "Hello!";
}

// main.ts
import {
      
       hello } from './module';
console.log(hello());

Generics :
Generics are a way to create reusable components. A component can support multiple types of data.
```
function identity<T>(arg: T): T {
      
      
    return arg;
}
```

Decorators :
Decorators provide a way for you to modify declarations when writing class declarations.

function sealed(constructor: Function) {
      
      
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
      
      
    // ...
}

Namespaces :
Namespaces are a way of wrapping code under a global name to prevent conflicts with code written elsewhere.

namespace MyNamespace {
      
      
    export interface SomeInterface {
      
      
        // ...
    }
    export class SomeClass {
      
      
        // ...
    }
}

Type assertions :
Type assertions are like type conversions in other languages, but without special data checking and destructuring. It has no runtime impact and only works during the compilation phase.
```
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
```

Mapped Types :
TypeScript allows you to create new types from old types, such as making all properties optional or read-only.

type Readonly<T> = {
      
      
    readonly [P in keyof T]: T[P];
};

type Partial<T> = {
      
      
    [P in keyof T]?: T[P];
};

Conditional Types :
Select types through conditional expressions.

type TypeName<T> =
    T extends string ? "string" :
    T extends number ? "number" :
    "object";
type T1 = TypeName<string>;  // "string"
type T2 = TypeName<number>;  // "number"

Indexed Types :
Use index type queries and index type access operations to implement the "select attributes from objects" pattern.

function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
      
      
    return names.map(n => o[n]);
}

Template Literal Types :
Allows you to use string template literal syntax at the type level.

type World = "world";
type Greeting = `hello ${
        
        World}`;

Recursive Types :
Types can reference themselves, forming recursive or nested types.

type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
interface JsonObject {
      
       [key: string]: JsonValue; }
interface JsonArray extends Array<JsonValue> {
      
      }

Type assertions and type guards :
Custom type guards allow you to explicitly influence the results of type checks.

function isString(test: any): test is string {
      
      
    return typeof test === "string";
}

Type Inference :
TypeScript attempts to automatically determine the type of an expression based on the code.
```
let x = 3;  // `x` has the type `number`
```

Declaration Merging :
TypeScript allows declaration merging so that users can split classes, interfaces, modules, etc. into multiple files.

interface Cloner {
      
      
    clone(animal: Animal): Animal;
}

interface Cloner {
      
      
    clone(animal: Sheep): Sheep;
}

Global Declarations :
You can declare variables, types, functions, etc. in the global scope for sharing in the project.
```
declare var jQuery: (selector: string) => any;
```

Type and namespace import/export :
Use import/export syntax to organize and share code.

import {
      
       SomeType } from './some-module';
export {
      
       SomeType };

Decorator Factory :
Create and combine decorators.

function loggable(target: Function) {
      
      
    return class extends target {
      
      
        log() {
      
      
            console.log('Logging...');
        }
    }
}

@loggable
class MyClass {
      
      
    // ...
}

Use tsconfig.json :
Use tsconfig.jsonthe file to configure the compilation options and included files of the TypeScript project.
Use type definitions from third-party libraries : Obtain and use type definitions from third-party libraries
through the DefinitelyTyped project and scope packages.@types

These basic knowledge points and features provide you with the foundation for writing strongly typed and object-oriented JavaScript code using TypeScript. TypeScript has many other advanced features and configuration options, which can be further learned and mastered by reading the TypeScript official manual or other related resources.

TypeScript Learning Outline

Guess you like