TypeScript相关知识点-CSDN博客

本文链接：https://blog.csdn.net/qq_33653886/article/details/140971844

概述：一门开源编程语言，TS是JavaScript的类型超级
官网：http://tslang.cn/docs/home.html
为什么使用TS：提高代码质量，更好的开发体验，提高项目维护性
安装：npm install -g typescript
mac安装：sudo npm install -g typescript 检验安装版本：tsc -v`
类型的约束
String（字符串）

let str :string =  'strname'

Number（数值）

let num :number = 123

Boolean（布尔）

let boo:boolean = true

Null（空）

let nu:null = null

Undefined（未定义）

let und:undefined =undefined

any（任意）

let data:any = 123

注意：类型小写

array（数组）

let arr1:number[] = [2,3,4,6]
let arrs: Array<number> = [2,3,4,6]
let arr2:string[] = ['sfda','sd','4','sas6']
let arr3:(number | string)[] = [2,3,'5sd',6]
let arr1:[number,string]= [2,'sdsa']

Object（对象）

//方式一接口
interface Person {
  name: string;
  age: number;
  greet: () => string;
}

let user:Person = {
  name: "Alice",
  age: 30,
  greet: function() {
    return `Hello, my name is ${this.name}!`;
  }
};
//方式二：类型别名
type Person = {
  name: string;
  age: number;
  greet: () => string;
};

let user: Person = {
  name: "Bob",
  age: 25,
  greet: function() {
    return `Hello, my name is ${this.name}!`;
  }
};
//方式三：类class
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hello, my name is ${this.name}!`;
  }
}

let user = new Person("Carol", 22);
console.log(user.greet()); // 输出: Hello, my name is Carol!
//方式四：构造函数
type PersonConstructor = new (name: string, age: number) => {
  greet: () => string;
};

const Person: PersonConstructor = class {
  private name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hello, my name is ${this.name}!`;
  }
};

let user = new Person("Dave", 28);
console.log(user.greet()); // 输出: Hello, my name is Dave!

void（无返回值）

function add(num:number,num3:number):void{
	//return num + num3
	console.log(num + num3)
}
add(23,4)

function（函数）

//普通写法
function add1(num:number,num3:number):number{
	//return num + num3
	console.log(num + num3)
}
add(23,4)
//可选参数，
function add2(num:number,num3？:number):number{
	//return num + num3
	console.log(num )
}
add(23)
//参数默认值
function add3(num:number,num3:number = 1):number{
	//return num + num3
	console.log(num + num3)
}
add(23)
//箭头函数约束写法
let fun:(params1:number,params2:string)=>string(a:number,b:string = '1'):string{
	//return num + num3
	console.log(num + num3)
}
add(23,'23')

接口：interface
注意：定义接口名称首字母大写，分号分割

interface Person {
  name: string;
  age: number;
  greet: () => string;
}

let user:Person = {
  name: "Alice",
  age: 30,
  greet: function() {
    return `Hello, my name is ${this.name}!`;
  }
};
//接口继承
interface Person {
  name: string;
  age: number;
}
interface Children extends Person {
  children：[]
}
let user:Children = {
  name: "Alice",
  age: 30,
  children: [
  	{ 
  	 name: "lice",
  	 age: 3,
  	}，
  		{ 
  	 name: "konl",
  	 age: 6,
  	}
  ]
};

类class

在这里插入代码片

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hello, my name is ${this.name}!`;
  }
}

let user = new Person("Carol", 22);
console.log(user.greet()); // 输出: Hello, my name is Carol!

public：默认公开的，任何地方都可以访问
private：私有的，当前类内部可以访问
protected：受保护的，当前类和当前类的子类内部可以访问
readonly：只读，不可以修改

abstract：abstract 修饰符用于定义抽象类和抽象方法。抽象类不能被实例化（不能new），并且要求任何继承自它的子类都必须实现其抽象方法。
implements:对于类的约束

泛型
概述：是指在定义函数，接口或class类时，不预先制定类型，而在使用时在指定类型的一种特性

//单个
function add3<T>(num:T,num3:T):T{
	return num + num3
}
add<number>(2,3)
add<string>('23','aa')
//多个
function add3<T,U>(num:T,num3:U):T{
	return num + num3
}
add<number,string>(2,'eew')
add<number[],boolean>([2,43,56,23,4],true)
//接口泛型写法
 interface Icons{
    length:number;
  }
  function fun<T extends Icons>(any:T):number{
    return any.length
  }
 fun<string[]>(['a','b'])
 fun<number[]>([23,45])
 fun<string>('jasfslas')
//class类泛型写法
 class Person<T>{
  userName:T,
   constructor(public name: T) {
      this.UserName = name
    }
 }
 const p = new Person<string>('jinjianzhong')

装饰器
概述：是一个方法，可以注入到类，方法，属性参数上来扩展类，方法，属性参数的功能
注意：使用装饰器，需要在tsconfig.jso n文件配置“experimentalDecorators"选项为"true"
参数：
target : 对于静态方法是构造函数，普通方法是原型对象
propertyKey：方法名称
descriptor ：方法描述，
descriptor.value : 对于静态方法是构造函数，普通方法是原型对象
descriptor.writable : 方法是否可以被重写
descriptor.enumerable: 是否可以被枚举
descriptor.configurable：是否可以改变、删除

类装饰器（无需传递参数）

// 定义一个装饰器工厂函数
function sealed(target: any) {
 	targe.prototype.userName = 'head'
}

// 使用 @sealed 装饰器=》@sealed（MyComponent）
@sealed
class MyComponent {
  // 类定义...
}
const my1 =new MyComponent()
console.log(my1.userName)//head

装饰器工厂

function fun(oprtion:any){
	return function (target: any){
		target.prototype.userName = oprtion.name;
		target.prototype.age = oprtion.age;
	}
}
@fun({
	nsme:'youser',
	age:6
})
class MyComponent {
  // 类定义...
}
const my1 =new MyComponent()
console.log(my1.userName)//youser

装饰器组合
注意：多个装饰器（类装饰器和装饰器工厂结合），执行顺序是先从上到下的执行装饰器工厂，拿到所有真正的装饰器，然后在从下至上的执行所有装饰器

属性装饰器
接受三个参数
target：对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
propertyKey：成员的名字，一个字符串或Symbol。
descriptor?：属性的描述符（可选），但请注意，在属性装饰器中，描述符对象不会被作为参数传入，因为TypeScript在初始化属性时无法描述或修改一个实例属性的初始化方法。

  function readonlyDecorator(target: Object, propertyKey: string | symbol): void {
  // 将属性设置为只读
  let val = target[propertyKey];
  let getter = function () {
    return val;
  };
  delete (target as any)[propertyKey]; // 删除原属性
  Object.defineProperty(target, propertyKey, {
    get: getter,
    enumerable: true,
    configurable: true
  });
}
class MyClass {  
    @logPropertyAccess  
    public myProperty: string;  
}  
  
let obj = new MyClass();  
obj.myProperty = 'Hello';  // 控制台输出: Setting myProperty to Hello  
console.log(obj.myProperty);  // 控制台输出: Getting myProperty  
// 然后是 'Hello'