typescript基础

整合菜鸟教程中的ts

ts函数

1. ts区分大写和小写字符
2. 数组泛型

声明变量

1. 使用var声明

var uname:string = 'Runoob'
var score:number = 100

作用域

1. 全局作用域、类作用域、局部作用域
2. 全局作用域可以在代码任何位置使用；类作用域，这个变量可以称为字段，类变量声明在类里面，但在类的方法外面，该方法可以通过类的对象访问；局部作用域，只能声明在一个代码块中，比如函数中

var global_num = 12  //全局变量
class Numbers {
	num_val = 13;    //实例变量
	static sval = 10;  //静态变量
	storeNum():void {
		var local_num = 14  //局部变量
	}
}

运算符

1. 算数运算符、关系运算符、逻辑运算符、短路运算符、位运算符

var avg:number = 20;
var percentage:number = 90;
var res:boolean = ((avg>50)&&(percentage>80));

条件语句

var num:number = 5
if (num > 0) {
	console.log("数字是正数")
}else if (num%2 == 0) {
	console.log("偶数")
}else{
	console.log("奇数")
}

ts中函数定义

1. 如果在函数中定义了参数，则参数为必传，不能少传和多传，可选参数用？,并且可选参数必须在必传参数后面；参数可以设置默认值，但不能同时设置默认值和可选

function bulidName(firstName:string,lastName?:string) {
	if (lastName)
		return lastName
	else 
		return firstName
}
function test(first:number,type:sting = '学生') {
	
}

2. 剩余参数

function buildName(firstName:string,...restOfName:string[]) {
	return firstName + "" + restOfName.join(" ");
}

function addNumbers(...nums:number[]) {
	var i;
	var sum:number = 0;
	for(i=0;i<nums.length;i++) {
		sum = sum + nums[i]
	}
	console.log("和为:",sum)
}

function factorial(number:number) {
	if (number <=0 ){
		return 1;
	}else {
		return (number * factorial(number-1))
	}
}

toLocaleString() 与 toString()的区别

1. 当数字是四位及以上数字时，从右往左数，每三位用逗号隔开，并且小数点后只保留三位小数，而toString()单纯将数字转化为字符串
2. toLocaleString当目标是标准时间格式时，输入简介的年月日时分秒，而toString()输出国际表述字符串

var num = new Number(1167.16789);
console.log(num.toLocaleString()) //1,167.167
console.log(num.toString()) // 1167.16789
var dateStr = new Date();
console.log(dateStr.toLocaleString()); // 2022/2/25 16:36:12
console.log(dateStr.toString); //Fri Feb 25 2022 16:37:45 GMT+0800 (中国标准时间)

ts中的数组

var sites:string[];
sites = ['123','456','678']
var nums:number[] = [1,2,3,4]
var arr_nums:number[] = new Array(4) //指定数组初始化大小
var nums_array:string[] = new Array("123","456","789")
var [x,y,z] = sites //数组解构
var multi:number[][] = [[1,2,3],[4,5,6]]

1. 数组作为函数的返回值

function disp():string[]{
	return new Array("123","456")
}
var sites:string[] = disp()

Map对象

1. Map对象保存键值对，并且能够记住键的原始插入顺序,Map是ES6中引入的一种新的数据结构

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

let nameMapping = new Map();
// 设置Map对象
nameMapping.set('name','sunny');
nameMapping.set('age','18');

// 获取键对应的值
nameMapping.get("name") //sunny

// 判断是否包含键对应的值
nameMapping.has("age")
// 返回键值数量
nameMapping.size; //2

// 删除某个键值对
nameMapping.delete("age")

// 移除所有的键值对
nameMapping.clear()

// 迭代Map中的key 和 value
for (let key of nameMapping.keys()) {
	console.log(key)
}
for (let value of nameMapping.values()) {
	console.log(value)
}
// 使用对象解析
for (let [key,value] of nameMapping.values()) {
	console.log(key,value)
}

ts中的元组

1. 数组中元素的数据类型一般相同，如果存储的类型不同，则需要使用元组，元组在存储数据的类型上和普通数组不同，但是数据得更新和操作和普通数组一样

var mytuple = [10,"Runoob"] // 声明元组并初始化

联合类型

1. 可以将变量设置成多种类型，通过管道将变量设置成多种类型，赋值时根据设置的类型来赋值，并且只能赋值指定的类型，如果赋值其它的类型就会报错

var val: string|number
	var = 12
	var = "lucky"

2. 联合类型可以作为函数的参数使用

function disp(name:string|string[]) {
	if (typeof name=="string") {
		console.log(name)
	}else {
		var i;
		for(i=0;i<name.length;i++) {
			console.log(name[i])
		}
	}
}
disp("Runoob")
disp(["Runoob","Google","Taobao","Facebook"])

3. 可以将数组声明为联合类型

var arr:string[]|number[];
arr = [6,7,8]
arr = ["Runoob","Google"]

ts接口

1. 接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法是抽象的，需要由具体的类实现，第三方可以通过这组抽象方法调用，让具体的类执行具体的方法
2. 注意接口不能转换成javascript,它只是ts一部分

1. interface interface_name {
	
}

interface IPerson {
	firstName: string,
	lastName: string,
	sayHi: ()=>string
}
var customer:IPerson = {
	firstName:"Tom",
	lastName: "Luck",
	sayHi: ():string=>{return "Hi there"}
}
console.log("Customer对象")
console.log(customer.firstName)
console.log(customer.sayHi)

3. 联合类型和接口

interface RunOptions {
	program:string;
	commandline: string[]|string|(()=>string)
}
var options:RunOptions = {
	program:"test1",
	commandline:["hello","world"]
}
options = {
	program:"test2",
	commandline:()=>{return "hello world!"}
}
var fn:any = options.commandline;
console.log(fn())

4. 接口和数组，可以将数组的索引值和元素设置为不同的类型，索引值可以是数字或者字符串

interface nameList {
	[index:number]: string
}
var list2:nameList = ["1","2"]
interface ages {
	[index:string]:number
}
var agelist:ages;
agelist["Sunny"] = 16

5. 接口继承，接口可以通过其他接口来扩展自己
   5.1. 单继承实例

interface Person {
	age: number
}
interface Musician extends Person {
	instrument:string
}
var drummer = <Musician>{};
drummer.age = 16;
drummer.instrument = "Drums"

5.2. 多继承实例

interface Fa {
	v1: number
}
interface Ma {
	v2: number
}
interface Child extends Fa,Ma{}
var Iobj:Child = {v1:12,v2:13}

ts中的类

1. ts是面向对象的js，类描述了所创建对象共同的属性和方法，支持面向对象的所有特征，比如类，接口等

class class_name {
	//类作用域
}

2. 类的数据成员（字段，构造函数，方法），字段是类里面声明的变量，构造函数（类实例化时调用，可以为类的对象分配内存），方法为对象要执行的操作

class Car {
	// 字段
	engine: string;
	// 构造函数
	constructor(engine:string) {
		this.engine = engine;
	}
	// 方法
	disp():void {
		console.log("传入数据为:"+this.engine)
	}
	// 创建一个对象
	var obj = new Car("SS0898")
	// 访问对象
	console.log("读取数据:" + obj.engine)
	// 访问方法
	obj.disp()
}

类的继承

1. ts支持继承类，我们可以在创建类的时候继承一个已存在的类，已存在的类称为父类，继承它的类称为子类
2. 类继承使用extends，子类除了不能继承父类的私有成员（方法和属性）和构造函数，其它都可以继承
3. ts一次只能继承一个类，不支持继承多个类，但ts支持多重继承（A继承B，B继承C）

class Shape {
	Area:number
	constructor(a:number) {
		this.Area = a
	}
}
class Circle extends Shape {
	disp():void {
		console.log("圆的面积："+this.Area)
	}
}
var obj = new Circle(223)
obj.disp()

继承类的方法重写

1. 类继承后，子类可以对父类的方法重新定义，即为方法的重写，其中super关键字是对父类的直接引用，该关键字可以引用父类的属性和方法

class PrinterClass{
	doPrint():void {
		console.log("父类的doPrint方法")
	}
}

class StringPrinter extends PrinterClass {
	doPrint():void {
		super.doPrint() // 调用父类的函数
		console.log("子类的doPrint方法")
	}
}

static关键字

1. 用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用

class StaticMem {
	static num:number;
	static disp():void {
		console.log("num值为"+StaticMem.num)
	}
}
StaticMem.num = 12
StaticMem.disp()

instanceof运算符

1. 判断对象是否是指定的类型，如果是返回true,否则返回false

class Person{}
var obj = new Person();
var isPerson = obj instanceof Person;
console.log("obj对象是Person类实例化来的吗？"+isPerson) //true

访问控制修饰符

1. 可以使用访问控制修饰符来保护对象，变量，方法和构造方法的访问
2. public（默认），公有，可以在任何地方被访问
3. protected: 受保护，可以被其自身以及其子类访问
4. private: 私有，只能被其定义所在的类访问

class Encapsulate {
	str1: string = "hello" //公有
	private str2: string = "world" //私有
}
var obj = new Encapsulate()
console.log(obj.str1)
console.log(obj.str2) //报错，私有变量不可访问

类和接口

1. 类可以实现接口，使用关键字implements,并将interest字段作为类的属性使用

interface ILoan {
	interest:number
}
class AgriLoan implements ILoan {
	interest:number
	rebate:number
	constructor(interest:number,rebate:number) {
		this.interest = interest;
		this.rebate = rebate
	}
}
var obj = new AgriLoan(10,1)
console.log(obj.interest,obj.rebate)

ts中的对象和js中的对象基本一致

interface IPoint {
	x: number
	y: number
}
function addPoint(p1:IPoint,p2:IPoint) {
	var x = p1.x + p2.x
	var y = p1.y + p2.y
	return {x:x,y:y}
}
var newPoint = addPoint({x:3,y:1},{x:4,y:1})

ts命名空间

1. 解决重名问题

namespace SomeNameSpaceName {
	export interface ISomeInterfaceName {}
	export class SomeClassName {}
}
// 在另外一个命名空间调用语法格式为
SomeNameSpaceName.SomeClassName

ts中的模块

1. 模块是在其自身的作用域里执行，并不是在全局作用域，因此在模块外部不可见。但可以用export导出
2. 两模块之间的关系是通过文件级别上使用import和export建立的，模块使用模块加载器去导入其它模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟悉的js模块加载器是服务于Node.js中的CommonJs和服务于Web应用的Require.js

/// <reference path = "IShape.ts"/>
export interface IShape {
	draw();
}

import shap = require("./IShape")
export class Circle implements shape.IShape {
	public draw() {
		console.log("Circle is drawn(external module)")
	}
}

ts声明文件

1. ts作为js的超集，开发中不可避免要引用其它第三方库的js库，虽然通过直接引用可以调用库的类和方法，但是却无法使用ts诸如类型检查等特性功能。为解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述js库和模块信息的声明文件，引用这个声明文件，就可以借用ts的各种特性来使用库文件了
2. declare定义的类型只会用于编译时的检查，编译结果中会被删除

declare var jQuery:(selector:string)=>any;
jQuery("#foo")

//上面编译的结果是jQuery("#foo")

3. 声明文件以.d.ts为后缀，声明文件或模块的语法格式如下

declare module Module_Name{}

4. ts引用声明文件的语法格式

/// <reference path="runoob.d.ts"/>