TypeScript

数据类型:

  1. 数字类型:

    let num: number = 18;
    
  2. 字符串类型:

    let str: string = '字符串'
    
  3. 布尔类型:

    let flag: boolean = true;
    
  4. 数组类型:

     // 第一种:
     let array: number[] = [1, 2, 3, 4, 5, 6];
     // 第二种:
     let array: Array<number> = [1, 2, 3, 4, 5, 6];
    
  5. 元组类型:元组类型是数组的一种特殊类型

    let tuple: [number, string, boolean] = [1, 'str', true]
    
  6. 枚举类型:枚举类型是为了一种直观显示

    enum Status {success=1, error = 0};
    let status = Status.success; // 1
    // 默认
    enum StatusNext {success, error};
    let statusNext = StatusNext.success; // 0
    
  7. 任意类型:

    let a: any = 1;
    a = 'str';
    a = true;
    
  8. void类型:只能被赋值为undefinednull

    function test(): void {
    	console.log(111);
    }
    
  9. nullundefined类型(属于其他类型的子类型):

    let a: undefined;
    a = undefined;
    
    let b: null;
    b = null;
    
    let c: number | undefined;
    c = 111;
    
  10. 其他类型:never

  11. unknow类型,须与断言配合使用,其相比较于any类型安全:

    
    const x: unknow = 123;
    (x as number).toFixed(2);
    
    

函数

  • 参数类型约束

    function func (name: string){
    	console.log(`my name is ${name}`);
    }
    func('guanfei');
    
  • 可选参数

    function func(name: string, age?: number) {
    	console.log(name,age);
    }
    func('guanfei', 18);
    func('guanfei');
    

    注意:age可传可不传,不传age那么其值为undefined;可选参数必须放在所有参数后面;

  • 参数默认值

    function func(name: string, age: number=18) {
    	console.log(name, age);
    }
    func('guanfei', 19); // guanfei, 19
    func('guanfei'); // guanfei, 18
    
  • 剩余参数

    function sum(a: number, ...res: number[]) {
    	let _sum = a;
    	res.forEach((item) => {
    		_sum+=item;
    	});
    	return _sum;
    }
    sum(1, 2, 3, 4, 5); // 15;
    
  • 返回值类型约束

    function func(): string {
    	return 'my name is guanfei';
    }
    
  • 函数重载

    function disp(s:string):void; 
    function disp(n:number,s:string):void; 
     
    function disp(x:any,y?:any):void { 
    	if(typeof x === 'string') {
    		console.log(x, 'string');
    	}
    	if(typeof x === 'number') {
    		console.log(x, 'number');
    	}
    	if(typeof y === 'string') {
    		console.log(y, 'string');
    	}
    	if(typeof y === 'undefined') {
    		console.log(y, 'undefined');
    	}
    } 
    disp("abc") 
    disp(1,"xyz");
    

三大特征:封装、继承和多态

  • 封装:对一个事物的属性和方法集成

    class Person {
    	name: string;
    	age: number;
    	hobby: string[];
    	constructor(name: string, age: number, hobby: string[]) {
    		this.name = name;
    		this.age = age;
    		this.hobby = hobby;	
    	}
    	run(): void {
    		console.log(`${this.name}在运动`);	
    	}
    }
    const person = new Person('guanfei', 18, ['play game', 'do the cooking']);
    person.run(); // guanfei在运动
    

    上述一个Person类就是对人这个事物的基本信息封装;

  • 继承:子类可以访问父类的属性和方法

    // Student类继承上述Person类
    class Student extends Person {
    	stu_id: string;
    	constructor(name: string, age: number, hobby: string[], stu_id: string) {
    		super(name, age, hobby);
    		this.stu_id = stu_id;
    	}
    	study(): void {
    		console.log(`姓名:${this.name},学号:${this.stu_id}在学习`);
    	}
    }
    const student = new Student('guanfei', 18, ['play game', 'do the cooking', '51502043033']);
    student.run(); // guanfei在运动
    student.study(); // 姓名:guanfei,学号:51502043033在学习
    

    Student类继承Person类,那么Student类的实例对象student可以调用Person类的实例属性nameagehobby和实例方法run

    3 .多态:多个事物对同一个行为的不同表现

    class Person {
    	name: string;
    	constructor(name: string){
    		 this.name = name;
    	}
    	freeTimeDo(): void {
    		console.log('休息');
    	}
    }
    
    class Student extends Person{
    	constructor(name: string) {
    		super(name); 
    	}
    	freeTimeDo(): void {
    		console.log('打游戏');
    	}
    }
    
    class Employeer extends Person{
    	constructor(name: string){
    		super(name); 
    	}
    	freeTimeDo(): void {
    		console.log('逛街');
    	}
    }
    

    Student类和Employeer类对freeTimeDo方法的不同表现分别是打游戏逛街,那么这种现象我们称之为多态;

    4.属性、方法修饰符(publicprotectprivate)
    public(类内部,子类,类外部均可以访问)

    
      class Person {
      	public name: string;
      	contructor(name: string){
      		this.name = name;
      	}
      	public getName(): string{
      		return this.name;
      	}
      }
      
      class Student extend Person {
      	constructor(name: string){
      		super(name);
      	}
      	getName(): string{
      		return this.name;
      	}
      }
      const person = new Person('guanfei');
      
      console.log(person.getName()); // guanfei
      
      console.log(person.name); // guanfei
      
      const student = new Student('zhangmanyu');
      
      console.log(student.getName()); // zhangmanyu
      
      console.log(student.name); //zhangmanyu
      
    

    .protect(类内部和子类均可访问,类外部不能访问)

    
    	class Person {
    		public name: string;
    		contructor(name: string){
    			this.name = name;
    		}
    		public getName(): string{
    			return this.name;
    		}
    	}
    	
    	class Student extend Person {
    		constructor(name: string){
    			super(name);
    		}
    		getName(): string{
    			return this.name;
    		}
    	}
    	const person = new Person('guanfei');
    	
    	console.log(person.getName()); // guanfei
    	
    	console.log(person.name); // 报错
    	
    	const student = new Student('zhangmanyu');
    	
    	console.log(student.getName()); // zhangmanyu
    	
    	console.log(student.name); // 报错
    	
    

    .private(类内部可以访问,子类和内外部不能访问)

    
    	class Person {
    		public name: string;
    		contructor(name: string){
    			this.name = name;
    		}
    		public getName(): string{
    			return this.name;
    		}
    	}
    	
    	class Student extend Person {
    		constructor(name: string){
    			super(name);
    		}
    		getName(): string{
    			return this.name;
    		}
    	}
    	const person = new Person('guanfei');
    	
    	console.log(person.getName()); // guanfei
    	
    	console.log(person.name); // 报错
    	
    	const student = new Student('zhangmanyu');
    	
    	console.log(student.getName()); // 报错
    	
    	console.log(student.name); // 报错
    	
    

    5.静态方法和静态属性(static):静态属性和静态方法只能用类名调用访问并且静态方法里不能访问实例属性和实例方法,而实例方法里可以访问实例属性和实例方法;

    class Person{
    	name: string;
    	static sex: string = '男';
    	constructor(name: string){
    		 this.name = name;
    	}
    	getName(): string{
    		console.log(Person.sex);
    		return this.name; 
    	}
    	
    	static getSex(): stirng{
    		console.log(this.name); // 报错
    		 return Person.sex;
    	}
    }
    
    Person.sex; // 男
    Person.getSex(); // 报错
    

    6.抽象类和抽象方法(abstract):抽象方法必须出现在抽象类中,抽象方法必须在子类中有具体实现,抽象类不能被实例化;

    abstract class Person {
    	name: string;
    	constructor(){
    		this.name = name; 
    	}
    	//实例方法
    	getName(): string{
    		return this.name;
    	}
    	
    	// 抽象方法
    	abstract work(): void;
    }
    
    class Student extend Person{
    	constructor(name: string){
    		super(name);
    	} 
    	work(): void{
    		console.log('学习');
    	}
    }
    
    class Employeer extend Person{
    	 constructor(name: string){
    		super(name);
    	 }
    	 work(): void{
    	 	console.log('工作');
    	 }
    }
    

接口

  • 属性类型接口

    
    interface UserInfo {
    	name: string;
    	age: number;
    	hobby?: string;
    }
    
    function setUserInfo(userInfo: UserInfo){
    	 this.name = userInfo.name;
    	 this.age = userInfo.age;
    }
    
    setUserInfo({name: 'guanfei', age: 18});
    
    setUserInfo({name: 'guanfei', age: 18, hobby: 'code'});
    
    setUserInfo({
    	name: 'zhangmanyu',
    	age: 18,
    	birthDay: '1998-05-20', 
    }); // 报错
    
    const userInfo = {
    	name: 'zhangmanyu',
    	age: 18,
    	birthDay: '1998-05-20', 
    }
    setUserInfo(userInfo); // 不报错
    
    
  • 函数类型接口

    
    interface QueryDto{
    	(pageSize: number, pageNum: number): any[]; 
    }
    
    const getList:QueryDto = function (pageSize: number, pageNum: number): any[]{
    	 return [];
    }
    getList(20, 1);
    
    
  • 可索引类型接口

    
    // 数组
    interface MyArr{
    	[index:number]: string;
    }
    const arr: MyArr = ['1', '2', '3'];
    
    const arrNext: MyArr = ['1', '2', '3', 4]; // 报错
    
    // 对象
    interface MyObj{
    	[index:string]: string; 
    }
    const obj: MyObj = {name: 'guanfei', birthDay: '1996-10-04'};
     
    const objNext: MyObj = {name: 'guanfei', age: 18}; // 报错
    
    
  • 类类型接口

    
    interface UserInfo{
    	name: string;
    	setName(name: string): void; 
    }
    
    class Person implements UserInfo{
    	name: string;
    	constructor(name:string){
    		this.name = name; 
    	}
    	setName(name: string): void{
    		this.name = name;
    	}
    }
    
    // 类Person实现接口UserInfo的name属性和setName方法
    
  • 接口继承接口

    
    interface UserInfo{
    	name: string;
    	setName(name: string): void;
    }
    
    interface Acount extends UserInfo{
    	date: string;
    }
    
    class Person implements Acount{
    	name: string;
    	date: string;
    	constructor(name: string, date: string){
    		this.name = name; 
    		this.date = date;
    	}
    	
    	setName(name: string){
    		this.name = name; 
    	}
    	
    	getName(): string{
    		return this.name;
    	}
    }
    
    // 类Person实现了接口Acount的name、date属性和setName方法
    

泛型

  • 函数泛型
  • 类泛型
  • 接口泛型

模块和命名空间

  • 模块注重的是代码的复用和功能的封装独立,命名空间用于防止命名的冲突;

构造器

  • 类构造器
  • 属性构造器
  • 方法构造器
  • 参数构造器
    构造器的执行顺序:属性构造器=>方法构造器=>参数构造器=>类构造器,注意:当目标对象有两个以上构造器时,那么构造器的执行顺序从后往前;
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值