ts相关知识整理

152 阅读4分钟

1:安装命令

安装.png

2:数据类型

对象类型.png

函数类型.png

联合类型.png

数据类型.png

元组.png

TypeScript访问修饰符

ts支持以下访问修饰符:

public:所有定义成public的属性和方法都可以在任何地方进行访问。

1.png private:所有定义成private的属性和方法都只能在类定义内部进行访问。

2.png protected:多有定义成protected的属性和方法可以从类定义内部访问,也可以从子类中访问。 3.png

readonly关键字将属性设置为只读的

4.png

ts继承如和实现以及修饰符

1 例:

    name: string;
    like: string;
    constructor(name: string, like: string) {
        this.name = name
        this.like = like;
    }
    move() {
        return `${this.name}喜欢吃${this.like}`
    }
}

let aa = new Animal('小狗', '肉')

console.log(aa);


class Dog extends Animal {
    age: number;
    constructor(name: string, like: string, age: number) {
        super(name, like);
        this.age = age;


    }
    eat() {
        return `${this.name}今年${this.age}岁了`
    }
    bark() {
        return `${this.name}今年${this.age}岁了喜欢吃${this.like}`
    }

}
let dog = new Dog("小狗", '肉',1)

console.log(dog.eat());
console.log(dog.bark());

2:

修饰符

可以看到,上述的形式跟ES6十分的相似,typescript在此基础上添加了三种修饰符:

  • 公共 public:可以自由的访问类程序里定义的成员
  • 私有 private:只能够在该类的内部进行访问
  • 受保护 protect:除了在该类的内部可以访问,还可以在子类中仍然可以访问

公共修饰符

所有的都可进行访问

#私有修饰符

只能够在该类的内部进行访问,实例对象并不能够访问

1.png

受保护修饰符

跟私有修饰符很相似,实例对象同样不能访问受保护的属性,如下:

2.png

只读修饰符

通过readonly关键字进行声明,只读属性必须在声明时或构造函数里被初始化,如下:

3.png

TypeScript学习笔记—枚举和接口

接口限制

通过 interface 以及 implements

interface yy {
    name: string;
    age: number;
    say():string
}
class llog implements yy {
    name
    age
    address
    constructor(){
        this.name = "庞永艺",
        this.age=21,
        this.address='你好'
    }
    say() {
        return `${this.name}今年${this.age}岁`
    }
}
let hh=new llog()
console.log(hh.say())

枚举

例:

enum Directive {
    font=1,
    back=2,
    left = 3,
    right = 4
}
console.log(Directive.back);

function fn(age:Directive) {
    return `张三今年${age}岁`
}
console.log(fn(Directive.left));

我们先来看一下官方对枚举类型的定义:

1、使用枚举我们可以定义一些带名字的常量。 2、使用枚举可以清晰地表达意图或创建一组有区别的用例。

image

常量??const??用例??const obj = {}??

const obj = {
  a: '属性1',
  b: '属性2',
  c: '属性3'
}
复制代码

常量√ 有区别的用例√

那么问题来了!枚举有什么用啊!

区别就是:枚举里每一项的值会根据前一项的值自动加一少写俩数 定义简单、方便;

// 默认为当前下标
enum X {
  a, // 0
  b, // 1
  c // 2
}
// 给定值后,后续元素值会自动加一
enum X {
  a = 1,
  b, // 2
  c // 3
}
enum X {
  a, // 0
  b = 2, // 2
  c // 3
}
复制代码

除了数字之外,枚举的成员的值也可以是字符串。

enum X {
  a = 'a',
  b = 'b',
  c = 'c'
}
复制代码

如果选择字符串作为成员的值,则其它枚举成员都需要有初始值(第一个除外);

enum X {
  a, // 0
  b = 'b', // 'b'
  c // 报错:必须要有一个初始值
}
复制代码

接口

首先是定义:

在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

image

定义契约??

简单来说,接口的作用就是声明某一类对象,需要拥有哪些属性。

image

const person = {
  name: '名字',
  body: '身体'
}
复制代码

我们定义了一个对象person; 它拥有namebody两个属性,那么如果我们想判断另一个对象man是不是person。我们可以定义一个接口,通过接口来判断man,是否符合我们对person的定义。

interface Person {
  name: string;
  body: string
}

const man: Person = {
  name: 'Bob',
  body: 'body'
}

const dog: Person = {
  name: 'Dog',
  body: 'body',
  voice: '汪'
} 
复制代码

man没有报错,所以我们可以肯定man这个对象是person; dog报错了,所以这个对象不是person;

image

如果有时候有的属性我们不确定有没有怎么办??

interface Person {
  name: string;
  body: string;
  kid?: number;
}
const man: Person = {
  name: 'Bob',
  body: 'body'
}
const woman: Person = {
  name: 'Alice',
  body: 'body',
  kid: 1
} 
复制代码

只需要在属性名称后面加上?就可以表示:这个属性我不确定要不要,但是不管有没有,这个家伙都是我的!

image

除了属性以外,接口里还可以定义方法;

interface Person {
  name: string;
  body: string;
  say(something: string): void
}
复制代码

假设我们有一些不想让人更改的属性,我们可以给它加上readonly关键字; 这类属性只有在初始化的时候可以赋值,之后不可以更改。

interface Person {
  readonly name: string;
  body: string;
  say(something: string): void
}
复制代码

另外接口也可以继承接口;

interface Animal {
  body: string
}
interface Person extends Animal {
  readonly name: string;
  say(something: string): void
}

### 泛型

  • 泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

  • 在函数名后添加了 ,其中 T 用来指代任意输入的类型,在后面的输入 value: T 和输出 Array 中即可使用了

  • function createArray<T>(length: number, value: T): Array<T> {}

  • 多个类型参数 function swap<T, U>(tuple: [T, U]): [U, T] {}

  • 泛型参数的默认类型

    • function createArray<T = string>(length: number, value: T): Array<T> {}

      泛型约束

    • 函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法, 我们使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状,也就是必须包含 length 属性

    • function loggingIdentity<T extends Lengthwise>(arg: T): T {}

      泛型接口 两种写法

    • interface CreateArrayFunc { <T>(length: number, value: T): Array<T>; }

    • interface CreateArrayFunc<T> { (length: number, value: T): Array<T>; }

泛型使用方法

1.png

2.png

3.png

4.png

5.png

6.png