The TypeScript note

introduce

TypeScript is a superset of JavaScipt that is eventually compiled into JavaScript at runtime.Copy the code

The installation

npm install typescript
yarn add typescript
Copy the code

The original type

const a: string = 'str';
const b: number = 100;
const c: boolean = true;
const d: void = null;
const e: null = null;
const f: undefined = undefined;
const g: symbol = Symbol(a);Copy the code

Nonprimitive type

const func: object = function() {}
const nums: number[] = [1.2.3];
const : array = function() {}
const obj: { 
    name: string.age: number 
} = { 
    name: 'Sketchy'.age: 20
}
Copy the code

Definition of an array

const nums1: Array<number> = [1.2.3];
const nums2: number[] = [1.2.3];
Copy the code

A tuple type

const nums: [number.string] = [ 100.'Sketchy' ];
Copy the code

Enumerated type

enum nums {
    one = 1,
    two = 2,
    three = 3
}
Copy the code

Function types

/ * *? The representation argument is optional, and both the optional and default arguments must appear at the end of the argument list */
function func(a: number, b? :number) :string {
    return 'hello';
}
Copy the code

Any type

function getValue(value: any) {
    return value;
}

let value: any = "str";
value = 500;
value = {};
// Any indicates any type. The any type does not have syntax checks, so it is not safe to use.
Copy the code

Implicit type inference

let num = 100;	/ / number type
num = 'Sketchy';  / / an error

let value;		// No assignment means any
value = 100;
value = 'str';
Copy the code

Types of assertions

// Use as keyword
const nums = [1.2.3.4];

function sum(val1: string | number, val2: string | number) {
    if (typeof val1 === 'number' && typeof val2 === 'number') {
        return val1 + val2;
    }
    else {
        // Use as to assert that the value is of type string
        // Return val1 as string + val2 as string;
        // Method 2: Not recommended, because it cannot be used under JSX
        return <string>val1 + <string>val2; }}console.log(sum('1'.2)); 	/ / 12
Copy the code

interface

// An interface is a structure used to constrain an object. To implement an interface, an object must own all members of the interface.
interface Person {
    name: string;
    age: number;
}

function showPerson(person: Person) {
    console.log(person.name);
    console.log(person.age);
}

showPerson({
    name: 'Sketchy'.age: 20
});
Copy the code

Optional member, read-only member, dynamic member

interface Person {
    name: string;
    age: number; phone? :string.// A question mark represents an optional member
    readonly sex: string.// It cannot be modified after initialization
}

// Dynamic member
interface Person {
    [prop: string] :string
}
const person: Person = {}
// Then you can add any member to this object, but note that these are strings
person.name = 'Sketchy';
person.age = '20';
Copy the code

class

// Describe the abstract features of a concrete object
class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHi(message: string) :void {
        console.log(` Hello,The ${this.name}${message}`); }}const person = new Person('Sketchy'.20);
console.log(person.sayHi('Hello! '));
Copy the code

Access modifier

class Person {
    // Add public to indicate public
    public name: string;	
    Private attributes can only be accessed inside the class, not outside the class
    private age: number;	
    // Protected means that it is protected and cannot be accessed externally, but can be accessed in subclasses
	protected sex: string;	
    // Add readonly to indicate read-only, optionally initialized at type declaration time or constructor time
    public readonly phone: string;
    
    constructor(name: string, age: number, sex: string) {
        this.name = name;
        this.age = age;
        this.sex = sex; }}Copy the code

Classes and interfaces

// The interface mainly constrains the class
interface Eat {
    eat(food: string) :void;
}
interface Run {
    run(distance: number) :void;
}
class Person implements Eat.Run {
    eat(food: string) :void {
        console.log('Eat gracefully:${food}`);
    }
    run(distance: number) {
        console.log('Walking upright:${distance}`); }}class Animal implements Eat.Run {
    eat(food: string) :void {
        console.log('Oink oink eat:${food}`);
    }
    run(distance: number) {
        console.log(Crawl ` :${distance}`); }}const person = new Person();
const animal = new Animal();
person.eat('apple');
animal.eat('apple');
Copy the code

An abstract class

abstract class Animal {
    eat(food: string) :void {
        console.log('Oink oink eat:${food}`);
    }
    abstract run(distance: number) :void;
}
class Dog extends Animal {
    run(distance: number) {
        console.log(Crawl ` :${distance}`); }}const dog = new Dog();
dog.eat('apple');
dog.run(100);
Copy the code

The generic

function showPerson<T> (name: T) :void {
    console.log(name);
}

showPerson('Sketchy');
Copy the code