TypeScript学习历程

最新推荐文章于 2024-08-21 01:59:18 发布

rainbow8590

最新推荐文章于 2024-08-21 01:59:18 发布

阅读量384

点赞数

分类专栏： typeScript

本文链接：https://blog.csdn.net/rainbow8590/article/details/102708418

版权

typeScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、typeScript 的安装和编译

 全局安装:  npm install -g typescript 
 手动编译:  tsc hellowWord.ts
 开发工具编译:
	 **VSCode:**  
	 	1. cd 本项目   
	 	2. 运行 tsc --init 
	 	3.打开 tsconfig.json 配置 outDir:"./js"'
	 	4. 终端--配置任务;
	 	5. 终端--运行任务 监视tsconfig.json
	 	6. 在html中引入编译后的js文件

二、typeScript 数据类型

定义数据必须指定类型

布尔类型 Boolean

	var flag:boolean = true

字符串类型 string

	var str:string = '133'

数字类型 number

	var num:number= 123

数组类型 array

两种方式定义数组:
1.  var arr:number[] = [1,2,3]  // 定义元素都是number类型
2.  var arr:number[] = [1,2,3]  // 定义元素都是number类型
3.  var arr:any[] = [1,2,3,'a', 'b','c']

元祖类型 tuple (属于数组的一种)

给数组中的每一个位置指定类型, 必须一一对应
 let arr:[number,number, string] = [1,2,'a']

枚举类型 enum

	enum Flag {success=1, error=2}
	let f:Flag = Flag.success
	console.log(f) // 1
	
	如果标识符没有赋值, 取得就是下标
	enum Color {blue, red, 'orange'}
	let c:Color = Color.red
	console.log(c) // 1
	
	enum Err {'undefined'=-1, 'null'=-2, 'success'=1}
	let r:Err = Err.success
	console.log(r) // 1

任意类型 any

	给变量随意指定类型; 
	var num:any = 123
	var num:any = '123'
	var num:any = true
	var Box:any = document.getElementById('box')

null 和 undefined

	定义未赋值就是undefined
	var num:number
	console.log(num) // num 报错
	var nums:number|undefined	
		
	var num:null
	num = null;
	
	当一个元素可能是number  null undefined 时:
	var num:number | null |undefined
	num = 123
	console.log(123)

void 类型

	定义方法没有返回值时使用:
	function run():void{
		console.log('run')
	}
	方法有返回值时定义返回值的类型
	function num():number{
		return 34;
	}

never类型

	是null和undefined的子类型, 代表从不会出现的值 ; 生命nerver变量只能被nerver类型所赋值
	var a:undefined
	a = undefined
	var b:null
	b = null
	
	var a : nerver
	a=123 // 错误
	a = (()=>{
		throw new Error('error')
	})()

三、函数

函数的定义

	**有返回值时,定义返回值的类型**
	var fun = function():number{
		return 123;
	}
	function numFun():number{
		return 456
	}

函数传参

**要指定参数的数据类型**
function add(a:number, b:number):void{
	console.log(a+b);
}
function add(a:number, b:number):number{
	return a+b
}

var add = function add(a:number, b:number):number{
	return a+b
}

方法可选参数

	// 不传的参数加问号, 且必须配置到参数列表后面
	function  getInfo(name:string, age?:number):string{
		if(age){
			return `${name} --- ${age}`
		}else{
			return `${name} --- 未知`
		}
	}
	console.log(getInfo('zhangsan',30))
	console.log(getInfo('zhangsan'))

方法默认参数

	function  getInfo(name:string, age:number=20):string{
		if(age){
			return `${name} --- ${age}`
		}else{
			return `${name} --- 未知`
		}
	}
	console.log(getInfo('zhangsan',30))  // zhangsan -- 30
	console.log(getInfo('zhangsan')) // zhangsan -- 20

剩余参数

	function sum(...result:number[]):number{
		let i = 0;
		result.forEach(item => {
			i += item
		})
		return i;
	}
	console.log(sum(1,2,3,4))
	function sum(a:number, ...result:number[]):number{
		result.forEach(item => {
			a += item
		})
		return a;
	}
	console.log(sum(1,2,3,4,5))

函数重载

	function getInfo(name:string):string;
	function getInfo(age:number):number;

替换:
	function getInfo(str:any):any{	
		if(typeof str == 'string'){
			return '字符换'+str'
		}else{
			return '数字'+str
		}
	}

多参数:
	function getInfo(name:any, age?:any):any{	
		if(age){
			return name + age
		}else{
			return  name
		}
	}

箭头函数

	setTimeout(()=>{
		do some thing....
	},1000)

类

ES5中的类

**ES5中类的操作**
	function Person(){
		this.name = '张三';
		this.age = 20;
		this.run = function(){
			alert('run')
		}
	
	}
	Person.prototype.sex = '女'
	// 静态方法直接调用
	Person.work = function(){
		console.log('work')
	}
	Person.prototype.self = function(){
		console.log('self')
	}
	let p = new Person();
	alert(p.name)
	p.self()

	对象冒充实现继承 只能继承构造函数中的属性和方法, 无法继承原型链上的属性和方法
	function Web(){
		Person.call(this) 
	}
	let w = new Web();
	console.log(w.name)
	console.log(w.self()) // w.self is not a function

原型链继承

// 原型链实现继承 继承构造函数和原型链上中的属性和方法  但是实例化子类的时候没办法给父类传参
	function Person(name, age){
		this.name = name;
		this.age = age;
		this.run = function(){
			alert('run')
		}
	}
	Person.prototype.sex = '男'
	Person.prototype.work = function(){
		alert(name+', '+age)
	}
	function Webs(name, age){
		
	}
	Web.prototype = new Person();
	let ww1 = new Web('历史',20) // 实例化子类的时候没办法给父类传参
	let ww2 = new Web('控制',20)
	ww.self()
	console.log()

***原型链+构造函数混合继承***
// 原型链实现继承 继承构造函数和原型链上中的属性和方法
function Person(name, age){
	this.name = name;
	this.age = age;
	this.run = function(){
		alert('run')
	}
}
Person.prototype.sex = '男'
Person.prototype.work = function(){
	alert(name+', '+age)
}
function Webs(name, age){
	**Person.call(this,name,age)**
}
Web.prototype = new Person(); 或 Web.prototype = Person.prototype;
let ww1 = new Web('历史',20) // 实例化子类的时候没办法给父类传参
ww.self()

TypeScript 中的类

定义类:


	class Person {
		name: string;
		constructor(n:string){
			this.name = n;
		}
		run():void{
			console.log('run')
		}
	}
	
	let p = new Person('张三');
	p.run();

类的继承:


	class Person{
		name: string;
		constructor(n:string){
			this.name = n
		}
		run():string{
			return `${this.name} run`
		}
		getName():string{
			return this.name
		}
		setName(n:string):void{
			this.name = n
		}
	}
	let p = new Person('jon')
	console.log(p.getName()) // jon
	p.setName('李四')
	console.log(p.getName()) // 李四
	console.log(p.run()); // 李四 run
	
	class Web extends Person{ 
		constructor(n:string){
			super(n) // 初始化父类的构造函数
		}
		work():string{
			return `${this.name} work`
		}
		run():string{
			return `${this.name} son`
		}
	}
	let web = new Web('web');
	console.log(web.run()) // web son
	console.log(web.work()) // web work

类的修饰符

public 共有类型在类里面子类类外部都可以访问
protected 保护类型在类里面\子类里面可以访问,类外部不能访问
private 私有类型在类里面可以访问, 子类及类外部不能访问

	class Person{
		public name: string;
		constructor(n:string){
			this.name = n
		}
		run():string{
			return `${this.name} run`
		}
		getName():string{
			this.self('self') // private 只能再父类中使用
			return this.name
		}
		protected setName(n:string):void{
			this.name = n
		}
		private self(n:string):void{
			 console.log(`${n}`)
		}
	}
	
	class Web extends Person{ 
		constructor(n:string){
			super(n) 
		}
		work():string{
			return `${this.name} work`
		}
		run():string{
			this.setName('张斌') // protected 在子类中使用
			// this.self() // private 在子类及外部不能使用
			return `${this.name} son`
		}
	}
	let web = new Web('web');
	console.log(web.name) //web
	console.log(web.work()) // web work
	console.log(web.run()) //张斌 son
	// web.setName('张斌') // protected类型  外部不能使用

静态属性和静态方法

	class Person{
		public name: string;
		static age: number=20;
		constructor(name:string){
			this.name = name;
		}
		run(){// 实例方法  : 实例化以后才调用
			alert('run')
		}
		static work(){ // 静态方法  无法直接调用类里的属性, 将属性改为静态属性
			alert('work'+this.age)
		}
	}
	
	Person.work() // 静态方法调用
	let p = new Person('张三');
	p.run(); // 实例方法调用

多态

	class Person{
		name:string;
		constructor(name:string){
			this.name = name
		}
		eat(){
			console.log('eat')
		}
	}
	class Man extends Person{
		constructor(name: string){
			super(name)
		}
		eat(){
			return this.name+'man'
		}
	}
	class Women extends Person{
		constructor(name: string){
			super(name)
		}
		eat(){
			return this.name +'women'
		}
	}

抽象类 abstract

不能使用new进行实例化
抽象方法只能放在抽象类里面
抽象类的子类必须实现抽象类的抽象方法

	abstract class Person{
		public name:string;
		constructor(name:string){
			this.name = name
		}
		abstract eat():any
	}
	 class Man extends Person{
		constructor(name: string){
			super(name)
		}
		eat(){
			return this.name+'man'
		}
	}
	class Women extends Person{
		constructor(name: string){
			super(name)
		}
		eat(){
			return this.name +'women'
		}
		work(){
			return this.name+'work'
		}
	}
	let man = new Man('男')
	console.log(man.eat())
	let women = new Women('女')
	console.log(women.eat())
	console.log(women.work())

接口 interface

行为和动作的规范, 对批量方法进行约束

接口定义

	 interface FullName{
		 firstName: string;
		 lastName: string;
	 }
	 function printName(name: FullName){
		 return `${name.firstName}--${name.lastName}`
	 }
	 let obj = {
		firstName:'李',
		lastName:'三',
		age: 20
	 }
	 // 传入的参数必须包含 firstName lastName
	 console.log(printName(obj))

接口可选属性

	interface FullName{
		firstName: string;
		lastName?: string;
	}
	function printName(name: FullName){
		return `${name.firstName}--${name.lastName}`
	}
	console.log(printName({
		firstName:'李', 
	 }))  // 李--undefined

定义ajax请求数据的接口

	// 定义接口参数
	 interface Config {
		 url: string;
		 type: string;
		 data?: string;
		 dataType: string;
	 }
	 function ajax(config:Config){
		 let xhr = new XMLHttpRequest();
		 xhr.open(config.type, config.url,true)
		 xhr.onreadystatechange = function(){
			 if(xhr.readyState == 4 && xhr.status == 200){
				 console.log('success')
				 if(config.dataType == 'json'){
					 JSON.parse(xhr.responseText)
				 }else{
					xhr.responseText
				 }
			 }
		 }
		 xhr.send(config.data)
	 }
	// 调用
	 ajax({
		 type:'get',
		 url:'http:www.baidu.com',
		 data:'ab',
		 dataType:'json'
	 })

定义函数接口

	interface encrypt{
		 (key:string,value:string):string
	 }
	
	let md5:encrypt = function(key:string,value:string):string{
		 return key + value
	}
	
	console.log(md5('zhangsan', '加墨')) //zhangsan加墨

可索引接口

对数组和对象的约束 , 不常用

	// 对数组的约束
	interface useArr {
		 [index:number]:string;
	 }
	 var arrs:useArr[] = ['1','2']
	 console.log(arrs[0])
	
	// 对对象的约束
	 interface useObj{
		 [index: string]:any
	 }
	 var objs:useObj = {
		 name:'张三',
		 age:20
	 }
	 console.log(objs)

类类型接口

	// 定义后类接口后必须实现里面的属性和方法; 不实现会报 'person错误实现类Person'
	interface Person {
		 name: string;
		 eats(str: string):void;
	 }
	 class person implements Person{
			name: string;
			constructor(name: string){
				this.name = name
			}
			eats(str:string){
				console.log(str +', '+this.name)
			}
	 }
	
	 let p = new person('man女')
	 p.eats('nid')