TypeScript的一些笔记

TypeScript 笔记

介绍

TypeScript是JavaScipt的超集，最终在运行时会编译成JavaScript。

安装

npm install typescript
yarn add typescript

原始类型

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();

非原始类型

const func: object = function() {}
const nums: number[] = [1, 2, 3];
const : array = function() {}
const obj: { 
    name: string, age: number 
} = { 
    name: '略略略',
    age: 20
}

数组的定义

const nums1: Array<number> = [1, 2, 3];
const nums2: number[] = [1, 2, 3];

元组类型

const nums: [number, string] = [ 100, '略略略' ];

枚举类型

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

函数类型

/** ?代表参数是可选的，不管是可选参数还是默认参数都必须出现在参数列表的最后 */
function func(a: number, b?: number): string {
    return 'hello';
}

任意类型

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

let value: any = "str";
value = 500;
value = {};
// any 代表任意类型，any类型不会有语法检查，所以不太安全，建议少使用。

隐式类型推断

let num = 100;	// number 类型
num = '略略略';  // 报错

let value;		// 没有赋值代表是any类型
value = 100;
value = 'str';

类型断言

// 使用 as 关键词
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 {
        //使用as可以进行断言，断言该值是string类型
        // 方式一：return val1 as string + val2 as string;	
        // 方式二： 不建议使用，因为在 JSX 下不能使用
        return <string>val1 + <string>val2;	 	
    }
}

console.log(sum('1', 2)); 	// 12

接口

// 接口就是用来约束对象的结构，一个对象去实现一个接口，那就必须要去拥有这个接口中的所有成员。
interface Person {
    name: string;
    age: number;
}

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

showPerson({
    name: '略略略',
    age: 20
});

可选成员、只读成员、动态成员

interface Person {
    name: string;
    age: number;
    phone?: string,				// 加上问号代表可选成员
    readonly sex: string,		// 在初始化完成之后就不能修改了    
}

// 动态成员
interface Person {
    [prop: string]: string
}
const person: Person = {}
// 那么之后就可以在这个对象上添加任意成员，但是注意，都是string类型的
person.name = '略略略';
person.age = '20';

类

// 描述一类具体事物的抽象特征
class Person {
    name: string;
    age: number;

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

    sayHi(message: string): void {
        console.log(`Hello，${this.name}${message}`);
    }
}
const person = new Person('略略略', 20);
console.log(person.sayHi('你好呀！'));

访问修饰符

class Person {
    // 加上public表示公有的，默认不写就是public
    public name: string;	
    // 加上private表示私有属性，私有属性只能在类中访问，不能类外访问
    private age: number;	
    // 加上protected表示受保护的，也不能再外部去访问，但是可以在子类中访问
	protected sex: string;	
    // 加上readonly表示只读，可以选择类型声明的时候进行初始化或者在构造函数的时候初始化
    public readonly phone: string;
    
    constructor(name: string, age: number, sex: string) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
}

类与接口

// 接口主要去约束类
interface Eat {
    eat(food: string): void;
}
interface Run {
    run(distance: number): void;
}
class Person implements Eat, Run {
    eat(food: string): void {
        console.log(`优雅的进食：${food}`);
    }
    run(distance: number) {
        console.log(`直立行走：${distance}`);
    }
}
class Animal implements Eat, Run {
    eat(food: string): void {
        console.log(`呼噜呼噜的吃：${food}`);
    }
    run(distance: number) {
        console.log(`爬行：${distance}`);
    }
}
const person = new Person();
const animal = new Animal();
person.eat('苹果');
animal.eat('苹果');

抽象类

abstract class Animal {
    eat(food: string): void {
        console.log(`呼噜呼噜的吃：${food}`);
    }
    abstract run(distance: number): void;
}
class Dog extends Animal {
    run(distance: number) {
        console.log(`爬行：${distance}`);
    }
}
const dog = new Dog();
dog.eat('苹果');
dog.run(100);

泛型

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

showPerson('略略略');