初学 typeScrip

73 阅读4分钟

1、声明: let : 区块定义,解决var 声明中带来的作用域混淆问题

const : 声明常量,不可改变

2、类型: 数字: number

布尔: boolean

字符串: string

数组: array

元组: tupple 是一个特殊的数组,是固定长度,固定类型的数组,声明元组的时候一定要指明类型,(bug: 使用push() 可以突破元组的界限,无限给元组添加长度)

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

 例:let myFoavorite:string | number;

字面量:literal

枚举: enum

任意: any

unknow: (不保证类型,但能保证类型安全)

viod: 函数在没有任何返回的情况,就是一个viod类型

undefined : 未经初始化的值

never : 大部分用来处理异常

类型适配: <> 或者 as

3、函数类型 函数定义:

function add(arg1: number, arg2: number): number { return x + y; }

const add = (arg1: number, arg2: number): number => { return x + y; }

函数定义可选参数:可选参数只需在参数名后跟随一个?即可

function add(arg1: number, arg2?: number): number { return x + y; }

const add = (arg1: number, arg2?: number): number => { return x + y; }

注意: 可选参数必须放在必选参数后面

默认参数:

const counter = (step = 1) => { count += step; };

剩余参数

const handleData = (arg1: number, ...args:number[]) => { console.log(args); };

handleData(1, 2, 3, 4, 5); // [ 2, 3, 4, 5 ]

4、对象类型 (以{}包括起来,用键值对的形式显示)

const person= {

name: "张三",

lastName: "刘",

age: 18

}

ts中调用没有定义的属性,会报错。js不会 ts对象中的属性会自动匹配类型。不可改变
5、interface 接口类型 使用接口(Interfaces)来定义对象的类型。 例:

interface Person { name: string, age: number, gender?: string | number // 用 ? 表示可有可无的属性 } TS 接口 interface | 代码干燥计划

6、Class 类 定义: class 关键字定义类 。 constructor 定义构造函数

继承:

使用 extends 关键字实现继承 使用super 关键字来调用父类的构造函数和方法 例:

class Animal { public name: string; constructor(name: string) { this.name = name; } sayHi(): string { return My name is ${this.name}; } }

class Cat extends Animal { constructor(name) { super(name); // 调用父类的 constructor(name) console.log(this.name); } sayHi(): string { // 将子类共用的方法抽象出来放在父类中,自己特殊逻辑放在子类中重写父类的逻辑 return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi() } }

let c = new Cat('Tom'); // Tom console.log(c.sayHi()); // Meow, My name is Tom 重写(override) vs 重载 (overload)

重写:是指子类重写继承自父类的方法

重载: 是指为同一个函数提供多个类型定义

继承 VS 多态

继承: 子类继承父类,子类除了拥有父类的所有特性外,还有一些具体的特性

多态: 由继承而产生了相关的不同的类,对同一个方法可以有不同的行为

类的修饰符(默认public)

    public : 公有

    protected : 受保护的, 自己和自己的子类可以访问,其它类不可访问

    private :  私有

    当构造函数 使用  protected 时,该类只允许被继承

    当构造函数 使用 private 时,该类不允许被继承或者实例化。

readonly

     readonly 修饰的变量只能在属性声明时或 构造函数 中初始化

存取器

     我们可以通过 getter/ setter来改变一个类中属性的读取和赋值行为

     例:

class Person { name: string constructor(name: string) { this.name = name } get getName() { // 读取 return this.name } set setName(val: string) { // 赋值 this.name = val.toUpperCase() } } let p1 = new Person('nihao') console.log(p1.getName) p1.setName = 'hello' console.log(p1.name) 静态属性和静态方法 static

    不需要初始化,而是使用类直接调用

例:

class Father { public name: string constructor(name: string) { this.name = name } public static className: string = 'Father' static getClassName(): string { return Father.className }

} console.log(Father.className) console.log(Father.getClassName()) 抽象类 (无法创建实例,只能被继承。使用 abstract 标记)

例:

(注: 在变量名后加 ! 表示: 该变量可以为null 或者 undefined)

abstract class Animal { name!: string abstact speak(): void }

class Cat extends Animal { speak(){ console.log(123) } }

let animal = new Animal() // ERROR 无法创建抽象类的实例 let cat = new Cat() cat.speak() // 123 抽象方法

不能在抽象类中实现,只能在抽象类的具体子类中实现,而且必须实现
只能出现在抽象类中
子类可以对抽象类进行不同的实现
例:

abstract class Animal { name: string abstract speak(): void = () => {} // ERROR 方法speak 不能具有实现,因为它被标记为 抽象 } class Cat extends Animal { speak () { //在这里实现抽象方法 console.log(123456) } }

class Dog extends Animal { speak () { console.log("88995") } } 7、 模块 模块 | 深入理解 TypeScript

8、泛型

image.png drylint.com/TypeScript/…