TS总结

CookieYay
757 阅读4分钟

刚看到ts的时候以为是一门新的高深的语言。其实不是的，他只是js的一个超集，把文件名改成ts了，内容上有些增加，所以在ts中直接写es6甚至es5都是可以的（虽然听起来没必要，但是实际是可以这么操作的）。
这篇短文主要介绍了一下ts中新增的重点，变化比较大的主要是变量的使用上和面向对象的实现。当然，还有一些细节，比如函数的使用上以及元组泛型等等。其中变量主要是需要声明数据类型，以及新增了枚举和any，变量的变化同时也改不了函数的参数返回值声明和使用。面向对象很多是es6就改变的，为了使这一部分完整，我这里没有区分es6和ts。 这边小短文没有包括很多细节，主要是我自己做的大致框架。

安装和编译

  • 安装ts：npm install -g typescript
  • 新建ts文件：".ts"做为文件后缀
  • ts编写：支持es6语法，也可以使用es5语法
  • 把写好的ts文件编译为js：hsc 文件名.ts

变量

  1. ts中的变量声明时需要同时声明数据类型（如果没有显式声明则默认为any类型）
  2. js中的数据类型包括五种基本数据类型（Number,String,Boolean,Undefined,Null）和一个复杂数据类型（Object）
  3. ts中的数据类型在js的基础上新增了枚举类型和any

TS新增的数据类型

  • 枚举
    • 场景：取值被限定在一定范围
  • any（任意值）
    1. 作用：在赋值过程中可以更改为任意数据类型
    2. 未声明的数据类型都默认为any

数组

  • type[]：数组类型为type型
  • 泛型定义数组，给数组中的元素指定类型为typeArray<type>
  • 用接口表示数组

对象

ts中新增了接口，用于描述对象，具体见下面'面向对象'中的‘接口’部分

联合数据类型：

  • 声明：let a = 数据类型1|数据类型2
  • 作用：定义的变量的数据类型为“数据类型1”或者是“数据类型2”

变量声明

var/let 变量名:数据类型
var name: string

函数

  • 参数(参数名:数据类型)
  • 返回值function test(name: string): string

面向对象

一.类

（1）声明

class关键字class Vehicle {}

（2）访问修饰符

  • public（默认值）:公有，都可以访问
  • private:私有，不能在类外用，子类也不可以
  • protected:保护，可以在子类中用，不能在类外其他地方用
  • 使用：
    • 修饰变量:"修饰符 变量名"public first_name
    • 修饰方法:"修饰符 方法名"public constructor(a){...}

（3）属性

  • 声明：变量名：数据类型
  • e.g.
class Person {
  first_name: string;
  last_name: string;
  public age: number;
}

（4）方法

  1. 普通方法

    • 方法名(){}
    • 使用该类中的属性this.属性名
    • 调用
      1. 声明变量var p: Person
      2. 初始化p = new Person()
      3. 调用p.greet();

  2. 静态方法

    • 特点:通过类直接调用，不能通过实例化的对象调用
    • 声明:使用static修饰.e.g.
    class A {
	static a(){...}
}
    • 调用：A.a()

（5）构造函数

  • 命名为constructor
  • 在类被实例化时调用
  • 无返回值
  • 作用:通过带参数的构造函数初始化数据

（6）继承

  • 声明：extends class 子类 extends 父类
  • 子类调用父类构造函数:使用super关键字
constructor(a) {
	super(a)//父类的constructor(a)
}
  • 子类调用父类的方法:也是super关键字super.父类方法名()

(7)抽象类

  • 抽象类不能被实例化，只能被子类继承
  • 声明--abstract修饰符abstract class A
  • 继承class 子类 extends 抽象类

二.接口interface

接口的作用有两部分，一部分是对对象类型的描述，另一部分是对类的一部分行为的抽象 ####对对象类型的描述

interafce A {
	a: string; //a的类型要是string型，且a不能省略
	b?: number; //b的类型是number，改属性可以不存在
	readynly c :string; //c是只读属性，初始化之后不能再赋值
	<!--至此面的对象只能定义属性a和b,不可以多定义其他的属性-->
	[propName: string]: any; //可以添加任意属性，但必须是string类型
}

####对类行为的抽象

  • 作用:提取不同类（不一定是父子类）的公共方法

  • 接口声明:

    interface 接口A{
	方法f1();
	方法f2();
}

  • 类继承接口并实现接口方法：

    class 类Aa implements 接口A{
	f1(){...}
}

  • 类继承父类的同时继承接口:

    class 子类Aa extends 父类B implements 接口A {
	f1(){...}
}

  • 一个类继承多个接口:

    class 子类Aa implements 接口A 接口B{
	A的方法f1(){...}
	A的方法f2(){...}
	B的方法f3(){...}
	
}

  • 接口继承接口

    interface 接口B extends 接口A{//接口B继承的接口A
	...
}

  • 接口继承类

    interface 接口B extends 类A{//接口B继承的类A
	...
}
avatar
文章
阅读
粉丝