TypeScript归纳整理

Posted 2022-12-04 开到荼蘼223's

什么是TypeScript？

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 javascript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程，可以理解TypeScript是JavaScript的super版本，JavaScript能做的，TypeScript能做，JavaScript做不了的，TypeScript也能做。

TypeScript基本操作

安装TypeScript

	npm install -g typescript

使用方法：

• 创建.ts文件
• 编译.ts文件：tsc 文件名 —> 生成对应的.js文件
• 运行.js文件

TypeScript 变量
(1) 变量名称可以包含数字和字母。
(2) 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
(3) 变量名不能以数字开头。

变量声明
TypeScript变量声明时需要指定对应的数据类型
var 变量名:数据类型 = 值

TypeScript 的数据类型
Boolean 类型
let isDone: boolean = true;
Number 类型
let count: number = 10;
String 类型
let name: string = "Semliker";
Array 类型
let list: number[] = [1, 2, 3];
<T>泛型
let list: Array<T> = [1, 2, 3];
any类型: 任意值，是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型
let x: any = 1; // 数字类型
x = 'I am who I am'; // 字符串类型
x = false; // 布尔类型

Map 对象
Map 是 ES6 中引入的一种新的数据结构，Map对象保存键值对，并且能够记住键的原始插入顺序，任何值(对象或者原始值) 都可以作为一个键或一个值。

创建 Map

let myMap = new Map();
let myMap2 = new Map([ // 初始化 可以以数组的格式传入键值对
        ["key1", "value1"],
        ["key2", "value2"]
]);

Map 相关的函数与属性

	map.clear() – 移除 Map 对象的所有键/值对 。
	map.set() – 设置键值对，返回该 Map 对象。
	map.get() – 返回键对应的值，如果不存在，则返回 undefined。
	map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
	map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
	map.size – 返回 Map 对象键/值对的数量。
	map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
	map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 

元组
TypeScript的元祖是对数组的扩充,数组中存放的元素类型是相同的 any除外 一个元祖中可以存放不同的数据,元组中元素使用索引来访问

// 声明元素 在元祖中可以存放不同类型的数据
var myTuple = [1,'TT'];
console.log('元祖',myTuple);

// 元祖的访问 元祖名[index]
console.log(myTuple[0]);

// 元祖的运算 push 向元祖添加元素 添在最后
// pop 元组中移除最后一个元素
myTuple.push('ff');
console.log(myTuple);
console.log(myTuple.pop());

// 更新元组
myTuple[0] = 789;
console.log(myTuple);

// // 解析元组
let [b,c] = myTuple;
console.log('b=',b);
console.log('c=',c);

联合类型:可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值

// 联合类型 通过管道运算符|给变量设置多个数据类型
var value : number|string;
value = 456;
value = 'Ui';
value = false;// 错误  value不可以是布尔值

注意：只能赋值指定的类型，如果赋值其它类型就会报错

判断参数是否是联合类型

function disp(name:string|string[])// 参数name是联合类型 可以是字符串也可以是字符串数组
    if(typeof name === 'string')//如果参数name是string类型
        console.log(name)
    else
        for(let i=0;i<name.length;i++)
            console.log(name[i]);
        
    

disp('deyun');
disp(['Google','Tencent','ByteDance']);
disp(789);// 错误

几种常见的循环结构
for…in 循环：用于一组值的集合或列表进行迭代输出

var j:any;
var arr:any = ['a','b','c']
for(j in arr) // j是索引
    console.log(arr[j]);

for…of循环：在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach()，for…of 允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等

let arr2:any = ['Tencent',22,false]
for(const k of arr2)
    console.log(k);

forEach循环 forEach方法有三个参数 val idx arr，第一个参数是当前集合的元素，第二个参数代表当前元素的索引，第三个参数代表当前数组

let list:any = ['Tencent',2,33]
list.forEach((val,idx,arr)=>
    console.log(val); // val代表集合中的当前元素
    console.log(idx); // 代表当前元素的索引
    console.log(arr); // 代表当前数组
);

every循环,every循环与forEach循环很相似,但必须在结尾加上return true 不然只进行一次循环

let list2:any = ['Tencent',2,33]
list2.every((val,idx,arr)=>
    console.log(val);
    console.log(idx);
    console.log(arr);
    return true;
);

TypeScript面向对象编程

面向对象三大特征:

• 封装性：一切皆对象 对象都是属性和行为的封装体
• 多态性：同一消息传递给不同的对象后 产生的结果是不一样的
• 继承性：子类(派生类)可以从父类(超类)中继承属性和行为

定义类

	class 类名
	    // 定义语句
	

类可以包含以下几个模块（类的数据成员）：

• 字段:也成为属性 反应的是类的静态特征 是类中定义的变量
• 构造函数:在实例化类时使用(创建),用来初始化对象(在内存中分配存储空间)
• 方法:也称函数 反应的是类的动态特征

例如定义一个车类

class Car
    engine:string; // 字段(属性) 数据成员
    constructor(engine:string)  // 构造函数 参数为engine
        this.engine = engine; // this代表类实例化时当前对象
    
    disp():void // 方法 又称为成员函数 void表示函数的返回类型 表示函数无返回值
        console.log('引擎是:',this.engine);
    

// 实例化  创建类的对象
var Benz = new Car('V8'); // 调用了类的构造函数 构造函数在创建对象时自动调用 不能像其他成员一样显示调用
Benz.disp();//引擎是: V8
var Bow = new Car('V4');
Bow.disp();//引擎是: V4

类的继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类，类继承使用关键字 extends，TS支持多重继承 B类继承了A类 C类继承了B类

子类不能继承父类的构造函数和私有成员
但在子类的方法中可以通过super关键字调用父类的方法或属性时使用，
super代表父类

继承类的方法重写(overwrite)：又称为方法覆盖。类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。使用 super 关键字可以引用父类的属性和方法

注意：在子类构造函数中通过super调用父类构造函数时 super必须作为子类构造函数的第一条语句

class Shape
    area:number;
    constructor(a:number) 
        this.area = a;
    
    getArea():number
        return this.area;
    

class Circle extends Shape //Shape是父类(超类) Circle是子类
    radius:number;
    constructor(t:number,r:number) 
        super(t); //调用父类的构造函数
        this.radius = r;
    
    getArea(): number  // 子类中方法覆盖了父类的同名方法
        return Math.PI*this.radius*this.radius;
    
    disp():void
        console.log('父类中的⚪的面积',super.getArea());
        console.log('子类中⚪的面积',this.getArea());
    ;

var c1 = new Circle(228,5);
console.log('圆面积',c1.getArea());// 不加super使用的是子类的方法
c1.disp();

static关键字 用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用，静态成员只能通过类名调用

访问控制修饰符
TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。

TypeScript 支持 3 种不同的访问权限：

• public（默认） : 公有，可以在任何地方被访问。

• protected : 受保护，可以被其自身以及其子类中访问。

• private : 私有，只能被其定义所在的类访问。

class Encapsulate  
protected str1:string = "hello" 
private str2:string = "world" 
 
var obj = new Encapsulate() 
console.log(obj.str1) // 可访问 
console.log(obj.str2) // 编译错误， str2 是私有的