• 类的使用 重写父类方法 类中的修饰符 get 读取字段 set 对字段进行修改 抽象类（抽象 成员） 2.8类的初始化顺序

    this当前类

    实例化对象   let p = new person("" ,  )

    为什么在实例化的时候赋值 

    因为上面使用了构造函数，

    1. export default {}
    2.  
    3. class Person {
    4.     // 字段
    5.     name: string
    6.     age: number
    7.     //  构造函数
    8.     constructor(name: string, age: number) {
    9.         this.name = name
    10.         this.age = age
    11.     }
    12.     // 函数
    13.     setHello(): void {
    14.         console.log(`我叫${this.name}我今年${this.age}`);
    15.  
    16.     }
    17. }
    18. let q = new Person("张三", 23)
    19. console.log(q);

    重写父类方法   

    1. export default {}
    2.  
    3. class Person {
    4.     // 字段
    5.     name: string
    6.     age: number
    7.     //  构造函数
    8.     constructor(name: string, age: number) {
    9.         this.name = name
    10.         this.age = age
    11.     }
    12.     // 函数
    13.     setHello(): void {
    14.         console.log(`我叫${this.name}我今年${this.age}`);
    15.     }
    16. }
    17. // let q = new Person("张三", 23)
    18. // console.log(q);
    19. // q.setHello()
    20.  
    21. class Zilei extends Person {
    22.     // 字段
    23.     score: string
    24.     // 构造函数
    25.     constructor(name: string, age: number, score: string) {
    26.         super(name, age)
    27.         this.score = score
    28.     }
    29.     // 函数
    30.     set(): void {
    31.         // 父级的函数
    32.         // super.setHello()
    33.         // 重写父类的方法
    34.         console.log(`我叫${this.name}我今年${this.age},我考了${this.score}`);
    35.     }
    36. }
    37. let w = new Zilei("张四", 23, "甲")
    38. w.set()

    static 与 instanceof

     

    1. export default {}
    2.  
    3. class Fn {
    4.     static salary: string = "张三"
    5.     static say(): void {
    6.         console.log(`我叫${this.salary}`);
    7.     }
    8. }
    9. Fn.say()
    10.  
    11. class Person { }
    12. let p = new Person()
    13. let b = p instanceof Person;
    14. console.log("p是Person实例化出来的吗?", b);
    15.  
    16.  
    17. class Student extends Person { }
    18. let s = new Student();
    19. let d = s instanceof Person;
    20. console.log("s是Person实例化出来的吗?", d);

    类中的修饰符  

    1. export default {}
    2.  
    3. class Person {
    4.     // 字段
    5.     public name: string
    6.     protected age: number
    7.     private sex: string
    8.     //  构造函数
    9.     constructor(name: string, age: number, sex: string) {
    10.         this.name = name
    11.         this.age = age
    12.         this.sex = sex
    13.     }
    14.     // 函数
    15.     setHello(): void {
    16.         console.log(`我叫${this.name}我性别${this.sex}今年${this.age}`);
    17.     }
    18. }
    19. let q = new Person("张三", 23, "男")
    20. q.setHello()
    21.  
    22. class Zilei extends Person {
    23.     // 字段
    24.     score: string
    25.     // 构造函数
    26.     constructor(name: string, age: number, sex: string, score: string) {
    27.         super(name, age, sex)
    28.         this.score = score
    29.     }
    30.     // 函数
    31.     set(): void {
    32.         console.log(this.name);
    33.         console.log(this.age);
    34.         // console.log(this.sex);  //因为上面是私有属性 不能使用继承所以报错
    35.         console.log(this.score);
    36.  
    37.     }
    38. }
    39. let w = new Zilei("张四", 23, "男", "甲")
    40. w.set()

    readonly用于标记一个属性是只读的，也就是不可修改的。

    1. export default {}
    2.  
    3. class Print {
    4.     // readonly 只读属性必须在声明时
    5.     readonly str1: string = "我是声明 时赋的值"
    6.     readonly str2: string
    7.     readonly str3: string
    8.     readonly str4: string
    9.     readonly str5: string
    10.     readonly str6: string
    11.     constructor(str2: string, str3: string, str4: string, str5: string, str6: string) {
    12.         this.str2 = str2
    13.         this.str3 = str3
    14.         this.str4 = str4
    15.         this.str5 = str5
    16.         this.str6 = str6
    17.     }
    18. }
    19. let str = new Print("嗡嗡嗡", "哇哇哇", "呜呜呜", "喂喂喂", "我我我")
    20. console.log(str);

    get  读取字段    set 对字段进行修改   

    1. export default {}
    2.  
    3. class Name {
    4.     // 私有的字段
    5.     private myName: string = "张三"
    6.     // 读取字段的值 取值
    7.     get fullName() {
    8.         console.log("get");
    9.         return this.myName;
    10.     }
    11.     // 为字段赋值 (修改)
    12.     set fullName(newName: string) {
    13.         // console.log("set");
    14.         this.myName = newName
    15.     }
    16. }
    17. let n = new Name()
    18. n.fullName = "赵四" //修改赋值
    19.  
    20. console.log(n);     //修改
    21.  
    22. // console.log(n.fullName);  //取值

    抽象类（抽象 成员） 

    抽象类作为其他派生类的基类的使用，他们一般不会直接被实例化

    抽象类专门用于定义那些不希望被外界 直接创建的类的

    抽象类和接口一样用于约束子类

    抽象类和接口类的区别：

    抽象方法必须包含，abstract关键字并且可以包含访问修饰符

    接口中只能定义约束不能定义具体实现，而抽象类中既可以定义约束，又可以定义具体实现

    1. export default {}
    2. // 父类
    3. abstract class Fn {
    4.     abstract name: string
    5.     abstract age: number
    6.     abstract show(): string
    7.     // void 没有返回值
    8.     strNname(): void {
    9.         console.log("我叫张三");
    10.     }
    11. }
    12.  
    13. // 子类
    14. class Str extends Fn {
    15.     name: string = "张三"
    16.     age: number = 34
    17.     show() {
    18.         return "我是赵四"
    19.     }
    20. }
    21. let s = new Str()
    22. let q = s.show()
    23. console.log(q);
    24.

     implements子句

    类继承多个接口

    1. export default {}
    2.  
    3. // 接口
    4. interface Fu {
    5.     name: string
    6.     age: number
    7.     sex: string
    8.     show(): void
    9. }
    10. // 接口
    11. interface Xiong {
    12.     each: string
    13. }
    14. // 类
    15. // 类继承一个接口 implements
    16. class Zi implements Fu, Xiong {
    17.     name: string = "张三";
    18.     age: number = 32;
    19.     sex: string = "男";
    20.     each: string = "吃饭";
    21.     show() {
    22.         console.log(`我叫${this.name}今年${this.age}`);
    23.     }
    24. }
    25. let n = new Zi()
    26. n.show()

    继承一个类  同时可以继承一个接口

    接中不能在里面提供实现赋值的

    1. export default {}
    2.  
    3. // 接口
    4. interface Fu {
    5.     name: string
    6.     age: number
    7.     sex: string
    8.     show(): void
    9. }
    10. // 接口
    11. interface Xiong {
    12.     each: string
    13. }
    14. // 类
    15. // 类继承一个接口 implements
    16. class Zi implements Fu, Xiong {
    17.     name: string = "张三";
    18.     age: number = 32;
    19.     sex: string = "男";
    20.     each: string = "吃饭";
    21.     show() {
    22.         console.log(`我叫${this.name}今年${this.age}`);
    23.     }
    24. }
    25. let n = new Zi()
    26. n.show()
    27. // 接口继承一个类
    28. interface Lei extends Zi {
    29.     // name:string = "ss"  类不可以赋值
    30.     name: string
    31. }
    32.  
    33. // 继承一个 类  同时可以继承一个接口
    34. class Star extends Zi implements Lei {
    35.     name: string = "张四"
    36.     age: number = 12;
    37.     sex: string = "男";
    38.     each: string = "吃不饱";
    39. }
    40. let p = new Star()
    41. console.log(p.name);

    2.8类的初始化顺序

    1. export default {}
    2.  
    3. class Fu {
    4.     name: string = "张三"
    5.     age: number = 34
    6.     constructor() {
    7.         console.log(`我叫${this.name}我今年${this.age}`);
    8.     }
    9. }
    10. class Zi extends Fu {
    11.     name: string = "张四"
    12.     age: number = 54
    13.     constructor() {
    14.         super()
    15.         console.log(`我叫${this.name}今年${this.age}`);
    16.  
    17.     }
    18. }
    19. let s = new Zi

    泛型的基本使用 （支持多个数据类型）        

    1. export default {}
    2.  
    3. // 简单的数组
    4. // const arr: string[] = ["嗡嗡嗡", "喂喂喂", "呜呜呜"]
    5. // console.log(arr);
    6. // const arr1: number[] = [1, 2, 3, 4, 5, 6]
    7. // console.log(arr1);
    8.  
    9. // const arr2: Array = [1, 2, 3, 4, 5, 6]
    10. // console.log(arr2);
    11.  
    12. // const arr3: Array = ["嗡嗡嗡", "喂喂喂", "呜呜呜"]
    13. // console.log(arr3);
    14.  
    15. // let arrArray = (value: number, item: number): number[] => {
    16. //     return new Array(item).fill(value)
    17. // }
    18. // let arr4 = arrArray(1, 3)
    19. // console.log(arr4);
    20.  
    21.  
    22. let arrArray = (value: T, item: number): T[] => {
    23.     return new Array(item).fill(value)
    24. }
    25. let arr4 = arrArray("sss", 3)
    26. console.log(arr4);

    泛型的约束

    1. export default {}
    2.  
    3. // function Get(e:T):T{
    4. //     console.log(e.length);  //类型“T”上不存在属性“length”。
    5. //     return e
    6. // }
    7.  
    8. // function Get(e: Array): Array {
    9. //     console.log(e.length);
    10. //     return e
    11. // }
    12. // // Get("ss") //类型“string”的参数不能赋给类型“unknown[]”的参数。
    13. // Get(["sss","sss","ss"])
    14. // Get([1,2,3,4])
    15.  
    16. interface Len {
    17.     length: number
    18. }
    19. // 通过继承接口的方式来 加上length
    20. function Gerextends Len>(e: T): T {
    21.     return e
    22. }
    23. Ger("ss")
    24. Ger(["sss", "sss", "ss"])
    25. Ger([1, 2, 3, 4])

     泛型接口

    将泛型与接口结合起来使用，可以大大简化我们的代码，增强 我们 的代码的可读性 

    反省也可以使用默认值

    1. export default {}
    2.  
    3. // interface Iperson {
    4. //     name: T1
    5. //     age: T2
    6. // }
    7.  
    8. // let Name: Iperson = {
    9. //     name: "张三",
    10. //     age: 34
    11. // }
    12.  
    13.  
    14. // 简写
    15. interface Iperson<T1 = string, T2 = number> {
    16.     name: string
    17.     age: number
    18. }
    19.  
    20. let Name: Iperson = {
    21.     name: "张三",
    22.     age: 34
    23. }

    泛型的改造

    1. export default {}
    2.  
    3. class Arr<T1, T2>{
    4.     // 字段 (属性)
    5.     name: T1
    6.     age: T2
    7.     sex: T1
    8.     // 构造函数
    9.     constructor(name: T1, age: T2, sex: T1) {
    10.         this.name = name
    11.         this.age = age
    12.         this.sex = sex
    13.     }
    14.  
    15. }
    16. // 实例化对象
    17. let q = new Arr("李四", 19, "男")
    18. console.log(q);

     其他类型的补充 

    1. export default {}
    2.  
    3. // 任何类型都可以赋值给unknown类型
    4. let Mytype1: unknown;
    5. Mytype1 = "李四";
    6. Mytype1 = true;
    7. Mytype1 = 34
    8.  
    9. // 不能将unknown类型赋值给其他类型
    10. let Mytype2: unknown = 18;
    11. let num: number;
    12. // 类型缩小
    13. if (typeof Mytype2 == "number") {
    14.     num = Mytype2
    15. }
    16. // 类型断言
    17. num = Mytype2 as number
    18.  
    19. // Mytype2 = num  //报错  不能将unknown类型赋值给其他类型
    20.  
    21. // unknown 类型与其他类型组成的交叉类型都是其他类型
    22. type Mytype3 = unknown & number
    23. let number: Mytype3 = 34
    24. //  let number1:Mytype3="ss" //报错 他会变成 数字类型number
    25.  
    26.  
    27. // unknown 除了与any之外 与其他类型组合的联合类型都是unknown类型
    28. type Mytype4 = unknown | any
    29. type Mytype5 = unknown | number
    30. type Mytype6 = unknown | number | string
    31.  
    32. // never类型是unknown类型的子类型
    33. type Mytype7 = never extends unknown ? true : false
    34.  
    35.

    Map类型

    1. export default {}
    2.  
    3. // Map类型
    4. let nameMap = new Map()
    5.  
    6. // 设置Map对象
    7. nameMap.set("李四", 1)
    8. nameMap.set("王五", 2)
    9. nameMap.set("老六", 3)
    10.  
    11. // 获取对象的键值
    12. // console.log(nameMap.get("李四")); //1
    13.  
    14. // 判断Map里面是否包含键对应的值
    15. // console.log(nameMap.has("李四")); //true
    16.  
    17. // 判断Map键对应值的数量
    18. // console.log(nameMap.size);  //3
    19.  
    20. // 判断一处Map里面所有的键值对
    21. // nameMap.clear()
    22. // console.log(nameMap);  //Map(0) {}
    23.  
    24. // // 迭代Map里面的key
    25. // for (const key of nameMap.keys()) {
    26. //     console.log(key); //李四 王五 老六
    27. // }
    28.  
    29. // // 迭代Map里面的value
    30. // for (const value of nameMap.values()) {
    31. //     console.log(value); //1 2 3
    32. // }
    33.  
    34. // 迭代Map中的key=>value
    35. for (const entry of nameMap.entries()) {
    36.     console.log(entry);
    37. }
    38.  
    39. // 适用对象解析
    40. for (const [key, value] of nameMap) {
    41.     console.log(key, value);
    42.  
    43. }

    条件类型    

    1. export default {}
    2.  
    3.  
    4. type Mytype = T extends string ? string : any
    5. type res = Mytype
    6.  
    7.  
    8. interface IName {
    9.     name: string
    10. }
    11. interface TAge {
    12.     name: number
    13. }
    14. type Condition = T extends string ? IName : TAge
    15.  
    16. function reLoadextends number | string>(idOrNmae: T): Condition {
    17.     throw ""
    18. }
    19. let res1 = reLoad("三十三")
    20. let res2 = reLoad(34)
    21.  
    22. console.log(res1);
    23. console.log(res2);

    映射类型  

    1.     export default {}
    2.  
    3.     type Name = "person" | "animal"
    4.     type Person = {
    5.         name: string
    6.         age: number
    7.     }
    8.     type NewType = Record<Name, Person>;
    9.     let res: NewType =
    10.     {
    11.         person: {
    12.             name: "富兰克林",
    13.             age: 16
    14.         },
    15.         animal: {
    16.             name: "小查",
    17.             age: 3
    18.         }
    19.     }
    20.  
    21.     console.log(res);
    22.  
    23.     interface TPerson { 
    24.         name: string
    25.         age: number
    26.     }
    27.     type Mytype = Pick<TPerson, "name">
    28.     let res2: Mytype = {
    29.         name: "崔弗"
    30.     }

    装饰器  

    装饰器的主要作用是给一个已有的方法或类扩展一些新的行为，而不去直接修改他的本身

    1.要先修改  tsconfig.json文件

    案例

    1. export default {}
    2.  
    3. function fn(constructure: any) {
    4.     constructure.prototype.name = "李四"
    5.     constructure.prototype.show = () => {
    6.         console.log(`我叫${constructure.prototype.name}`);
    7.     }
    8. }
    9. @fn
    10. class Person {
    11.  
    12. }
    13.  
    14. let n = new Person();
    15. (n as any).show();
    16. console.log((n as any).name);

    装饰器工厂  

    装饰器工厂也是一个函数，它的返回值是一个函数，返回的函数作为修饰器的调用函数，如果使用装饰器工厂，那么在使用的时候就要加上函数的调用​​​​​​​

    1. export default {}
    2. function fn(flag: boolean) {
    3.     if (flag) {
    4.         return function (constructure: any) {
    5.             constructure.prototype.name = "李四"
    6.             constructure.prototype.show = (): void => {
    7.                 console.log(`我叫${constructure.prototype.name}`);
    8.             }
    9.         }
    10.     } else {
    11.         return function (constructure: any) {
    12.             constructure.prototype.show = (): void => {
    13.                 console.log("hello   world");
    14.             }
    15.         }
    16.     }
    17. }
    18. @fn(false)
    19. class Person {
    20.  
    21. }
    22.  
    23. let n = new Person();
    24. (n as any).show();
    25. // console.log((n as any).name);

    混入Mixins    

    介绍：除了传统的面向对象继承方式，还流行一种通过可重用组件类的方式，就是联合另一种简单类的代码

    作用：解决TS中继承一次只能 继承一个类的问题

    注意点：类的混入不能混入属性名

     

    1. export default {}
    2.  
    3. let str = { name: "李四" };
    4. let num = { age: 34 };
    5.  
    6. // Object.assign(str, num);
    7. // console.log(str);
    8. // console.log(num);
    9.  
    10. Object.assign(num, str);
    11. console.log(str);
    12. console.log(num);

    模块与命名空间

    TS中的模块

    1. import Text = require("./muduleText")
    2. class Person implements Text.str {
    3.     name = "李四"
    4.     age = 34
    5.     sex = "男"
    6.     show() {
    7.         console.log(`他叫${this.name}今年${this.age}岁性别${this.sex}`);
    8.     }
    9.  
    10. }
    11. var p = new Person()
    12. console.log(p);
    13.  
    14. // 直接在公共ts里面赋值 在这里引用
    15. import { nae } from "./muduleText";
    16. console.log(nae);

     公共样式 

    1. export interface str {
    2.     name: string
    3.     age: number
    4.     sex: string
    5.     show(): void
    6. }
    7.  
    8. export let nae = { uname: "王五" }

    TS中的命名空间

    在TS1.5之前被 叫做内部模块主要用于组织代码，避免命名冲突

    本质就是一个定义一个大对象，把变量方法类接口...都放到里面

    通过export导出

    通过namespace定义

    1. namespace A {
    2.     export const a = 100
    3.     export namespace B {
    4.         export const b = 200
    5.     }
    6. }
    7.  
    8. namespace Q {
    9.     export const a = 100
    10.     export namespace B {
    11.         const b = 200
    12.     }
    13. }
    14. // 1
    15. console.log(A.a); //100
    16. // 简化命名空间
    17. import b = A.B.b
    18. console.log(b); //100
    19. // 3
    20.  
    21.  
    22. import { W } from "./namespaceText";
    23. console.log(W.w);

    公共样式 

    1. export namespace W {
    2.     export const w = 10000;
    3. }

  • 相关阅读:
    英语六级-day9
    下一代Ajax技术 — Fetch的学习与使用
    Activiti第二部分
    【SCI征稿】2区数字技术、供应链网络、人工智能、工业物联网智能传感器等领域，进展超顺，仅3个月左右录用
    【Kingbase8数据库】flowable兼容人大金仓Kingbase8过程
    滴滴 - eta（Estimate the Travel Time）
    【技术积累】算法中的动态规划【二】
    Docker之构建镜像
    设计模式 | 单例模式
    [思维模式-5]：《如何系统思考》-1- 认识篇 - 总体结构与知识框架
  • 原文地址：https://blog.csdn.net/red_HTML/article/details/126763589