对ts的理解

最新推荐文章于 2024-07-29 09:12:45 发布

休庸

最新推荐文章于 2024-07-29 09:12:45 发布

阅读量1.6k

点赞数 1

文章标签：前端 typescript

本文链接：https://blog.csdn.net/weixin_57913339/article/details/130024719

版权

一、理解

ts是一种由微软开发的一种开源、跨平台的编程语言，主要有三大特点

1、始于js，归于js

ts可以转换为纯净简洁的js代码，并且运行在各种浏览器上、nodeJs环境以及ECMAscript3及以上版本的js引擎里。

2、提供了强大的类型系统

类型系统允许js开发者在开发过程中使用高效的开发工具和常用操作如代码重构和静态检查等等。

3、是先进的js

是js的超集，用于大型平台的设计和一些基础库，提供了罪行和不断发展的js特性，扩展了js语法，所有js语言都可运行于ts环境中。

二、ts里常用语法

1基础类型

1.1布尔值

和js中一样，true/false

1.2数字

和js中一样，所有数字都是浮点数，支持十进制、十六进制、二进制、八进制

let a1:number=10 //十进制
let a2:number=ob1010 //二进制
let a3:number=ob1212 //八进制
let a4:number=oxa //十六进制

1.3字符串

和js一样

1.4undefined和null

ts里，undefined和null都有自己的类型，叫做undefined和null。默认情况下，它们是所有类型的子类型，也就是说可以把它们赋值给number形式的变量

1.5数组

有两种类型

其一：在元素类型后接上“[]”，

let list1:number[]=[1,2]

其二：使用数组类型：Array<元素类型>

let list2=Array<number>:[1,2]

1.6元组 Tuple

元组允许表示一个已知元素数量和类型的数组，各元素类型不必相同。

let t1=[string,number]
t1=["aaa",10]

1.7枚举

enum类型是对js标准数据类型的一个补充，默认情况下，从0开始为元素编号，也可以手动指定编号。枚举便利之处是可以通过值得到它的名字。

1.8any

有时候，我们在编程过程中需要给某些不知道类型的变量指定某个类型，这些值可能来自动态的内容，比如来自用户输入或第三方代码库。这个时候，我们不希望类型检查器对这些值进行检查，可以用any来标记这个变量。

在对现有代码进行改写的时候，any是非常有用的，它允许在你编码过程中有选择地包含和移除类型检查。当你只知道一部分数据的类型时，any也是有用的。

1.9void

从某种程度上来说，void和any恰好相反，它表示没有任何类型的值。当一个函数没有返回值时，会返回void。

声明void变量没有什么用，因为你只能赋值给它undefined和null

1.10object

object表示原始数据类型，也就是除了number\string\boolean之外的类型

1.11联合类型（Union Types）

联合类型表示取值可以为多种类型中的一种，

1.12类型断言

类型断言好比其他语言中的类型转换，但是不会进行特殊的数据检查和解构，它没有运行时的影响，只是在编译时起作用。ts会假设你已经进行了必须的检查。

方式一：<类型>值

方式二：值as类型

1.13类型推断

ts在没有明确指定类型的时候会推断出一个类型。有两种情况

1.定义变量的时候赋值了，推断出对应的类型

2.定义变量的时候未赋值，推断为any类型

2.接口（interfaces）

ts核心原则之一就是对所有值的结构进行类型检查，我们使用接口来定义对象的类型，接口是对对象的属性和行为方法的描述。

2.1接口类型的对象，多了或少了属性都是不被允许的。

可选属性：？

只读属性：readonly

2.2readonly\const

作为变量使用的话用const

作为属性使用的话为readonly

2.3函数类型

为了使用接口表示函数类型，我们需要给接口定义一个调用签名，参数列表的每个参数都得有名字和类型。

2.4类类型

ts能明确一个类去符合某种契约。

类类型：实现接口

一个类可以实现多个接口

2.5接口继承接口

一个接口可以继承多个接口

3、类

3.1继承（这里转载了https://blog.csdn.net/youhebuke225/article/details/124184131）

// 父类
class Animal{
    name:string;
    age: number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age
    }
    sayName(){
        console.log(this.name)
    }
}
// 子类
class Dog extends Animal{
    run(){
        console.log(`${this.name}run`);
    }
}
class Cat extends Animal{
    sayName(){
        console.log(`我是${this.name}`);
    }
}
const dog = new Dog("旺财",19)
const cat = new Cat("汤姆",20)
dog.sayName()
dog.run()
cat.sayName()

extends关键字
我们使用extends关键字来进行继承，其中被继承的Animal为父类，Dog为子类
继承之后，子类会拥有父类的一切属性和方法
子类也可以自己定义一些方法，如上面例子中的run
子类也可以写与父类相同的方法，这样执行方法的时候会执行子类的方法，叫做方法重写(Cat类中重写了sayName方法)
super关键字

super用在子类中，他表示当前的父类

// 父类
class Animal{
    name:string;
    age: number;

    constructor(name:string,age:number){
        console.log("Animal");
        this.name = name;
        this.age = age
    }

    sayName(){
        console.log(this.name)
    }
}

// 子类

class Dog extends Animal{
    sex:"male"|"female";
    constructor(name:string,age:number,sex:"male"){
        super(name,age) // 如果在子类中写了构造函数，就必须调用父类的构造函数
        this.sex = sex
    }
    sayName(){
    	// 类的方法中super就表示父类
        super.sayName()
        console.log("Dog")
    }
    run(){
        console.log(`${this.name}run`);
    }
}
const dog = new Dog("旺财",19,"male")
dog.sayName()
dog.run()

构造函数

在构造函数中super()表示父类的构造函数
如果在子类中写了构造函数，就必须调用父类的构造函数

类的方法中

在类的方法中super直接表示父类
我们可以通过super.父类的方法调用父类的方法

3.2公共、私有、受保护的修饰符

默认为public公共

private:当成员被声明为private时，它不能在声明它的类的外部访问。

protected:和private类似，但protected成员在派生类属性中仍然可以被访问。

子类能看到父类中受保护的对象但不能看到父类中私有的对象。

3.3readonly修饰符

只读属性必须在声明或构造函数时被初始化。

3.4存取器

ts支持setters\getters来截取对对象成员的访问。

3.5静态属性

static是类本身的属性

非静态属性，是类实例对象的属性

调用非静态属性:Person.name

调用静态属性: new Person().name

3.6抽象类

抽象类是专门用来被其他类所继承的类，它只能被其他类所继承，不能用来创建实例。
使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现。

abstract class Person{
  name:string;
  //抽象方法没有方法体
  abstract getName():string;
  getAge(){
    return 11
  }
}

// 普通类(我们以前学习的类)
class Male extends Person{
  name:string="xxx";
  // 在子类中必须要实现父类的抽象方法
  getName(){
    return this.name
  }
}

let m1 = new Male();
console.log(m1.getName());
console.log(m1.getAge());