高级类型

文章
/
理解计算机 ... typescript
/ 高级类型
返回文章列表

高级类型

理解计算机/web/typescript

类

TEXT
1
2
3
4
5
6
7
8
9
10
11
12
const <name>=class {
    // 成员初始化
    <name1> : <type> 
    <name2> = <value>
    // 构造函数
    constructor(<name1> : <type>,<name2> : <type>) {
        this.<name1>=<name1>
        this.<name2>=<name2>
    }
    //方法
    <functionName>(<name>:<type>):<type>{}
}

继承父类

TEXT
1
2
class <class1>{}
class <class2> extends <class1> {}

接口实现

TEXT
1
class <class> implements <interface>{}
  1. 类里面必须提供接口中的所有方法和属性

可见性修饰符

  1. 公有的：public​
  2. ​pertected​：受保护的，仅对其声明所在类和子类中（非实例对象）可见
  3. ​private​：私有的，只在当前类可见
  • 在类属性或方法前面添加关键词
  • ​public​是默认,可以省略

只读修饰符

​readonly​

  • 在类属性前面添加关键词,只能修饰类属性,对象
  • 为了防止在构造函数之外的属性进行赋值
  • 如果属性有默认值，没有类型注释就会变成自变量类型
  • 只能在接口中使用

类型系统

  • 结构化类型系统（鸭子类型）

    类型检测关注的是值所具有的形状

  • 表明类型系统

    检测的是名称

类型兼容型

  • 类

    TEXT
    1
    2
    3
    class a {x:number;y:number}
class b {x:number;y:number;z:number}
const c:a = new b()

    在结构化系统中成员多的可以赋值可成员少

  • 接口 和类一样

  • 函数

    1. 参数个数

      参数少的可以赋值参数多的

      TEXT
      1
      2
      3
      4
      type F1=(a:number,b:number,c:number)=>number
type F2=(a:number,b:number)=>number
let f1:F1
let f2:F2=f1

    2. 参数类型

      相同位置的参数类型要相同(原始类型)或兼容(对象类型)

    3. 返回值类型

      • 如果对象是原始类型,两个类型要相同
      • 如果是对象成员多的可以赋值可成员少

交叉类型

TEXT
1
2
3
interface <interface1>{<name1>:<type>}
interface <interface2>{<name2>:<type>}
type <interface3> = <interface1> & <interface2>
  1. 用 &​ 符号，将多个类型组合为一个
  2. 如果两个同名类型冲突，会将同时兼容两种类型

泛型

泛型函数

TEXT
1
2
function <functionName><<Type>>(<nmae>:<Type>): <Type> {return <value>}
const <name>=<functionName><type>(<value>)
  1. 语法：在函数名称后面添加<变量名>​，这个变量名代表指定的类型，在调用时传入
  2. 可以利用类型参数推断省略调用时添加类型

泛型约束

  1. 指定更加具体的类型

  2. 添加约束

    TEXT
    1
    2
    interface <interfaceName> {<name>:<type>}
function <functionName><<Type> extends <interfaceName>>(<nmae>:<Type>): <Type> {return <value>}

    传入的参数必须具有继承中的属性

  3. 可以传入多个属性

    TEXT
    1
    function <functionName><<Type1>,<Type2> extends keyof <Type1>>(<nmae1>:<Type1>,<nmae2>:<Type2>): <Type> {return <value>}

    创建了两个泛型，第二个泛型继承第一个泛型

    ​keyof​ 是获取所有键的联合

泛型接口

  1. 在接口名称后添加泛型

泛型类

  1. 在class名称后添加泛型，在创建时可以不传入泛型
  2. 在构造函数中，明确了类型，使用了泛型，会类型推断明确类型

泛型工具

  • Partial

    TEXT
    1
    2
    3
    4
    5
    interface <interfaceName>{
    <name1>:<type>
    <name2>:<type>
}
type <name> = Partial<interfaceName>

    构造出来的新类型结构不变，所有属性都变成可选（?​）

  • Readonly

    TEXT
    1
    type <name> = Readonly<interfaceName>

    构造出来的新类型结构不变，所有属性都变成只读，除了在创建时能传入

  • Pick

    TEXT
    1
    2
    3
    4
    5
    6
    interface <interfaceName>{
    <name1>:<type>
    <name2>:<type>
    <name3>:<type>
}
type <name> = Pick<interfaceName,'<name1>' | '<name2>'>

    从传入的类中选出需要的属性，构造新的类型

  • Record

    TEXT
    1
    2
    3
    4
    5
    type <typeName> = Record<'name1' | 'name2',<type>>
let <name>:<typeName> = {
    'name1' // <type>
    'name2' // <type>
}

    创建一个对象，可以同时创建几个对象指定一个类型

索引签名

TEXT
1
2
3
interface <interfaceName>{
    [<name>:<type>]:<name>
}
  1. js{}​中的键都是string​类型
  2. 指定了索引的类型

映射类型

  • 根据联合类型

    TEXT
    1
    2
    type <type1> = <type1> | <type2>
type <type2> = { [<key> in <type1>]:<type> }

  • 根据对象类型

    TEXT
    1
    2
    type <obj> = {'name1':<type>;'name2'<type>}
type <type2> = { [<key> in keyof <obj>]:<type> }