阅读 70

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('略略略');
复制代码
文章分类
前端
文章标签