Typescript 笔记

// Typescript 安装、编译
// 在使用 npm 命令前 必须安装 node.js

// 安装
	npm install -g typescript
	cnpm install -g typescript
	yarn -g add typescript

// 运行
	tsc helloworld.ts
	node helloworld.js

// 安装 yarn 与 cnpm
	npm install -g yarn
	npm install -g cnpm

// Typescript 开发工具 Vscode 自动编译 .ts 文件
 1. tsc --int 生成配置文件 tsconfig.json
 2. 修改 tsconfig.json, 打开注释 outDir: './js'
 3. 选择 终端 -> 运行任务 -> tsc:监视-tsconfig.json 然后就可以自动动态监听代码

typescript 数据类型：
	boolean 布尔类型
	number 数字类型
	string 字符串类型
	array 数组类型
	tuple 元组类型
	enum 枚举类型
	any 任意类型
	null
	undefined
	void 空类型
	never

// 函数声明法：
	function func ():string{ // sting 指定函数返回的类型
		return '123123' 
	}
// 匿名函数
	const func = function ():number {
	
	}
// 带参数的函数
	function func (name: string, age: number): string {
	return `${name}-${number}`
}
// 没有返回值的函数 没有 return 的函数
	function func ():void {
	}
// 可选参数的函数(可选参数必须配置到必传参数的后面)
	function func (name:string,age?:number):string {
		return '可选参数函数' // name 必传参数，age 可传参数
	}
// 默认参数函数
function func (name: string, age:number=30):string{
	retun '返回字符串'  // age 设置默认参数
}
// 三点运算符 接收新参的值
function func (...arg:number[]):number{ // arg = [1,2,3,4]
	return '返回数字类型' // 展开运算符接收剩余参数
}

func(1,2,3,4)
function func(arg1:number, arg2:number, ...arg3:number[]):number{

	return '返回数字类型' // arg1=1, arg2=2, arg3=[3,4,5,6]
}

func(1,2,3,4,5,6)

// 函数重载
	java 中方法的重载：重载指的是两个或者两个以上同名函数, 但它们的参数不一样, 这时会出现函数重载的情况
	typescript 中的重载, 通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
	// es5 出现同名方法, 下面的会替换上面的方法
	function func (name；string):string
	function func (age:number):string
	function func (str:any):any{
		if (typeof str==='string') {
			return `${str}--名字`
		} else {
			return `${str}--年龄`
		}
	}

// 箭头函数里面的 this 指向上下文
// 类其实就是方法
	(1) 最简单的类
		function Person () {
			this.name = "张三"
			this.age = 20
		}
		var p = new Person()

	(2) // 构造函数和原型链
		function Person () {
			this.name = '张三'
			this.age = 20
			this.run = function () {
				console.log(this.name + '运动')
			}
		}
		var p = new Person()
		p.run()
	(3) // 构造函数和原型链里面增加方法
		function Person () {
			this.name = '张三'
			this.age = 20
			this.run = function () {
				console.log(this.name)
			}
		}
		Person.prototype.sex="男"
		Person.prototype.work = function () { // 通过原型链定义属性和方法
			console.log(this.name)
		}

		var p = new Person()
		p.run()

	(4) // 构造函数和原型链
		function Person () {
			this.name = '张三' // 属性
			this.age = 20
			this.run = function () {} // 实例方法
		}
		Person.prototype.sex='男'
		Person.prototype.work = () => {}
		
		function child () {
			Person.call(this) // 继承 Person 类 通过 call 或者 apply 实现改变 this 的指向
		}
		
		var cd = new child()
		cd.run()

// 类里面的修饰符, typescript 里面定义属性的时候给我们提供了三种修饰符
	(1) public: 公有 (在类里面、子类、类外部里面都可以访问, 默认公有属性)
	(2) protected: 保护类型 (在类里面、子类里面可以访问, 在类外部没法访问)
	(3) private: 私有  (在类里面可以访问, 子类、外部都没法访问)

// 类
	class Person {
		name：string // 属性， 前面省略了 public 关键字, 还可以设置 protected 保护类型, private 私有属性
		constructor ( name: string ) { // 构造函数, 实例化类的时候触发的方法
			this.name = name
		}
		run():void {
			console.log(this.name)
		}
	}
	let p = new Person()
	p.run()
	console.log(p.name) // 外部可以访问公有属性

// 类的继承
	class Father{
		name: string
		constructor (name: string) {
			this.name = name
		}
		run (): string {
			return `${this.name}在运动`
		}
	}
	
	class Child extends Father{  // 继承 父类
		constructor (name: string) {
			super(name)
		}
	}

	const child = new Child('王五')
	child.run()

// 静态属性、静态方法
	function Person () {
		this.run = function () {
		}
	}
	Person.name = "我是静态属性" // 静态属性
	Person.add = function () { // 静态方法
	}
	let p = new Person()
	
	Person.add() // 静态方法调用方式

// 静态属性、静态方法
	class Person {
		public name; // 公有属性
		static sex; // 静态属性 只有静态属性才能被静态方法调用
		run () { // 实例方法
		}
		static add () {} // 静态方法 没法直接调用类里面的属性, 比如无法使用 name
	}
	let p = new Person()
	p.run() // 实例方法的调用
	Person.add() // 静态方法调用方式

// 多态： 父类定义一个方法不去实现, 让继承它的子类去实现, 一个子类有不同的表现
// 多态属于继承
	class Animal {
		name: string;
		contructor (name: string) {
			this.name = name
		}
		eat () {
			console.log(this.name)
		}
	}

	class Dog extends Animal {
		constructor (name: string) {
			super(name)
		}
	}

// typescript 中的抽象类, 它提供其他类继承的基类, 不能直接被实例化
// 用 abstract 关键字定义抽象类和抽象方法, 抽象类中的抽象方法不包含具体实现并且必须在派生类（子类）中实现。
// abstract 抽象方法只能放在抽象类里面
// 抽象类和抽象方法用来定义标准, 标准：Animal 这个类要求它的子类必须包含 eat 方法
	abstract class Animal {
		abstract eat():any; // 相对于给子类提供模板
	}


	abstract class Animal {
		public name:string;
		constructor (name: string) {
			this.name = name
		}
		abstract eat():any; // 相当于给子类提供模板, 子类必须包含 eat 方法
	}
	class Dog extends Animal {
		// 抽象类的子类必须实现抽象类里面的抽象方法
		constructor (name:string) {
			super(name)
		}
		eat() {}
	}
	

// 接口的作用： 在面向对象编程中, 接口是一种规范的定义, 它定义了行为和动作的规范, 在程序设计里面, 接口起到限制和规范的作用。接口定义了某一批类所需要遵守的规范, 接口不关心这些类的内部状态数据, 也不关心这些类里面方法的实现细节, 它只规定这批类里面必须提供某些方法, 提供这些方法的类就可以满足实际需要, typescript 中的接口类似于 java, 同时还增加了更灵活的接口类型, 包括属性、函数、可索引和类等。
// typescript 中的接口
	5.1 属性类接口
	5.2 函数类型接口
	5.3 可索引接口
	5.4 类类型接口
	5.5 接口拓展

// ts 中定义方法
	function person():void{}
// ts 中定义方法传入参数
	function person(name: string, age: number):string{} // 调用函数时, 必传形参 name 为字符串类型, age 为数字类型
	function person(params: { name: string, age:number }): string {} // 形参必须包含 name, age 的对象
	

// 接口： 行为和动作的规范, 对批量方法进行约束
// 属性接口
	interface FullName {
		firstName: string; // 注意 ; 结束 
		lastName: string;
	}
	function nameFunc (name:fullName) {} // 形参 name 必须与定义的 FullName 接口保存一致

// 定义可传参数接口 ( ?: )
	interface FullName {
		firstName: string;
		lastName: string;
		age?:number;  // ? 代表 age 参数可传, 也可不传
	} 

// 函数类型接口: 对方法传入的参数以及返回值进行约束
	interface FullName {
		(name:string, age:number):string;
	}
	let person:FullName= function(name:string, age:number):string{} // 函数返回的必须是字符串

// 接口的作用：在面向对象的编程中, 接口是一种规范, 它定义了行为和动作的规范, 在程序设计里面, 接口起定义标准

// 可索引接口： 数组的约束
// ts 定义数组的方式
	let arr:number[] = [1,2,3,4]
	let arr:Array<string> = ['a', 'b', 'c']
// 定义索引数组接口
	interface UserArr {
		[index:number]:string; // [index:number] 表示索引为数字类型, string 表示数组值为字符串类型
	}

	let arr:UserArr = ['1', 'a', 'b']

// 类类型接口: 对类的接口定义, 抽象类有点相似
	interface Animal { // 定义的类必须要有 interface 定义的属性和方法
		name: string;
		eat(str:string):void;
	}
	class Dog implements Animal { // Dog 类必须要有 属性 name 和方法 eat()
		name:string;
		constructor (name: string) {
			this.name = name
		} 
		eat () {} 
	}

// 接口扩展: 接口可以继承接口
	interface Animal {
		eat():void;
	}
	interface Dog extends Animal {
		work():void;
	}
	class Mydog implements Dog { // Mydog 类继承了 Dog 和 Animal 接口, 因此必须要包含方法 eat() 和 work()
		name:string;
		constructor (name:string) {
			this.name = name
		}
		eat(){};
		work(){};
	}

// 泛型： 泛型就是解决 类、接口、方法的复用性, 以及对不特定数据类型的支持

// 只能返回 string 类型的数据
	function getData(value:string):string{}
// 同时支持返回 string类型 和 number 类型
	function getData(value: any):any{} // 传入的类型和返回的类型为任意类型
// 泛型: 可以支持不特定的数据类型, 要求: 传入的参数和返回的参数一致
// T 表示泛型, 具体什么类型是调用这个方法的时候决定的
	function getData<T>(value:T):T{}
	getData<number>(123) // T 相当于 number

// 类的泛型
	class Minclass<T> {
		list:T[]=[];
		add(value:T):void{}
	}
	let ml = new Minclass<number>() // 实例化类, 并制定了类的 T 代表的类型 number

// 函数接口
	interface Config {
		(value1:string, value2:number): string // 函数接口
	}
	
	let sd:Config = function (value1:string,value2:number):string{}

// 泛型接口1
	interface Config {
		<T>(value:T):T
	}
	
	let sd:Config=function<T>(value:T):T{}
	sd<string>('李四') // T = string

// 泛型接口2
	interface Config<T>{
		(value:T):T
	}
	function sd<T>(value:T):T{}
	
	let mySD:config<string>=sd // T = string
	mySD('20')
	

// typeScript 中的泛型
	(1) 泛型的定义
	(2) 泛型函数
	(3) 泛型类
	(4) 泛型接口
// 泛型: 泛型可以帮助我们避免重复的代码, 以及对不特定数据类型的支持(类型校验)

	class ArtcleCate {
		title: string | undefined;
		desc: string | undefined;
		status: number | undefined
	}

	class MysqlDb {
		add(info:ArtcleCate):boolean {}
	}
	
	let artcleCate = new ArtcleCate()
	artcleCate.title = '标题'
	artcleCate.desc = '好好学习, 天天向上'
	artcleCate.status= 1
	
	let mysqlDb = new MysqlDb()
	mysqlDb.add(artcleCate)

// 定义一个 User 类和数据库进行映射
	class User {
		username: string | undefined;
		password: string | undefined;
	}

	class MysqlDb {
		add(info:ArtcleCate):boolean {}
	}
	
	let user = new User()
	user.username = '李四'
	user.password = '123132'
	
	let Db = new MysqlDb<User>()
	DB.add(u)