ts基础讲解

Posted 2021-09-17 大鹏_yp

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ts基础讲解相关的知识，希望对你有一定的参考价值。

typescript由微软开发的一款开源编程语言。
ts是jacascript的超集，遵循ES6,ES5规范，ts扩展了js的语法。
ts更像后端java，c#这样的面向对象的语言，可以让js开发大型的企业项目，
谷歌也大力支持ts的推广，谷歌的angular2.x就是基于ts语法开发的
最新的Vue,React也继承ts
Nodejs框架Nestjs,midway中用的就是ts语法.
目录

基础配置

安装：npm i -g typescript
验证是否安装成功：tsc -v
Version 4.4.3
编译ts：tsc index.ts(需要编译的ts文件)

ts开发工具 vscode自动编译ts

创建tsconfig.json文件

tsc --init 生成配置文件
只改tsconfig：outdir:\'./js\'
自动生成js

vscode-->终端-->运行任务-->typescript-->tsc:监视

一、ts中的类型

ts中为了是编写的代码更加规范，更有利于维护，增加了类型校验。
类型赋值错误会报错，
主要类型有：

类型	名称	解释	写法
布尔类型	boolean	true/false	var flag:boolean=true
数值类型	number	整数/小数	var num:number=123
字符串类型	string	字符串	var str:string=\'123\'
数组类型	array	数组	let arr:number[]=[1,2,3](只能放number类型)/let arr:Array=[1,2,3](只能放number类型,泛型定义)/
元组类型	tuple	数组的一种可以指定数组里每项类型	let arr:[string,number,boolean]=[\'ww\',123,true]
枚举类型	enum	enum 枚举名称{标识符[=整形常数]...}	enum Flag{success:1,err:-1},var f:Flag=Flag.err enum Color={red,blue,orage} ,var c:Color=Color.blue //c==1
任意类型	any	任意的值	let num:any=\'123\'
null、undefined		其他类型子类型	var num:number
void类型	void	没有任何类型，一般用于函数没有返回值	function run():void {}
其他类型	never	包括null，undefined子类型，代表从不会出现的值	never的变量只能被never类型赋值

二、函数定义

ES5函数定义

函数声明

function run() {
    return \'run\'
}

匿名函数

var run2 = function () { }

ts函数定义方法

1-函数声明

function run1(): string {
    return \'aa\'
}

2-匿名函数

var fun2 = function (): number {
    return 123
}

3-传参

function getInfo(name: string, age: number): string {
    return `${name}++${age}`
}
console.log(getInfo(\'asd\', 22))

4-无返回值
```function run3(): void { }````

ts方法的可选参数

ES5方法的实参和形参可以不一样，ts中必须一样，如果不一样需要配置可选参数
注意：可选参数必须配置到参数最后面，用？表示可选

function getInfos(name: string, age?: number): string {
    return `${name}++${age}`
}

默认参数

es5里面没法设置默认参数，es6和ts找那个可以设置默认参数
默认参数可以不传，类似于可选参数

function getInfo1(name: string, age: number = 20): string {
    return `${name}++${age}`
}

剩余参数

1-改进前写法

function sum(a: number, b: number, c: number, d: number): number {
    return a + b + c + d
}

2-改进后
三点运算符接收新传过来的值

function sum1(...arr: number[]): number {
    var sum = 0
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
    }
    return sum
}
alert(sum1(1, 2, 3, 4))

另一种

function sum2(a: number, ...arr: number[]): number {
    var sum = 0
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
    }
    return a + sum
}
alert(sum2(1, 2, 3, 4))

函数重载

java中方法的重载，：两个或以上同名函数，但他们参数不一样，这是会出现函数重载情况
ts中的从在，通过为一个函数提供多个函数类型定义来实现多种功能的目的
ts为了箭筒es5和es6从在写法和java中有区别
es5中出现同名方法，下面的会替换上面的方法
ts重载

function getcon(name: string): string;
function getcon(age: number): number;
function getcon(name: string,age: number): string;

function getcon(str: any,age?:number): any {
    if (typeof str == \'string\') {
        return \'姓名\' + str
    } else {
        return \'年龄\' + str
    }
}

三、对象的继承

es5继承

es5里面的构造函数

function Person() {
    this.name = \'张珊\'
    this.age = 20
    this.run = function () {
    }
}

原型链上的属性会被多个实例共享，构造函数不会

function Person() {
    this.name = \'张珊\'
    this.age = 20
    this.run = function () {
    }
}
Person.prototype.sex = \'男\'
Person.prototype.work = function () {
    console.log(this.name)
}
Person.getInfo = function () {
    // 静态方法
}
var p = new Person()
p.work()
// 调用静态方法
Person.getInfo()

构造函数与原型链增加方法

function Person() {
    this.name = \'张珊\'
    this.age = 20
    this.run = function () {

    }
}
// 原型链上的属性会被多个实例共享，构造函数不会
Person.prototype.sex = \'男\'
Person.prototype.work = function () {
    console.log(this.name)
}
Person.getInfo = function () {
    // 静态方法
}
var p = new Person()
p.work()

类里面的静态方法

function Person() {
    this.name = \'张珊\'
    this.age = 20
}
// 定义静态方法
Person.getInfo = function () {
}
var p = new Person()
// 调用静态方法
Person.getInfo()

es5继承
原型链+对象冒充

function Person(age) {
    this.name = \'张珊\'
    this.age = age
}
Person.prototype.sex = \'男\'
Person.prototype.work = function () {
    console.log(this.name)
}
var p = new Person(18)
// 对象冒充继承---不可以继承原型链的属性和方法
function Web(){
    Person.call(this)
}

// 原型链继承-----实例化后没法给父类传参
Web.prototype=new Person()
var son=new Web()

ts继承

1、ts定义类

class Person {
    name: string; //属性 省略了public关键词
    constructor(n: string) {
        this.name = n
    }//构造函数，实例化类的时候触发的方法
    run(): void { }
}
var p = new Person(\'aa\')
p.run()

2、ts中实现继承

关键字:extends,super
子类与父类有相同方法，子类优先级更高

class Person1 {
    name: string; //属性 省略了public关键词
    constructor(n: string) {
        this.name = n
    }//构造函数，实例化类的时候触发的方法
    run(): string {
        return `${this.name}是`
    }
}
class Webs extends Person1 {
    constructor(name: string) {
        super(name)//类似于初始化父类构造函数
    }
    work() { }
}
var w = new Webs(\'李四\')

3、ts类里面的修饰符

ts里面定义属性的时候给我们提供了三种修饰符

public ：公有：在类里面，子类，类外面都可以访问
protected ：保护类型：在类里面，子类都可以访问，类外面不可以访问
private：私有：在类里面可以访问，子类，类外面都不可以访问
属性不加修饰符默认公有public

class Person2 {
    name: string; //属性 省略了public关键词
    private age: number
    constructor(n: string, a: number) {
        this.name = n
        this.age = a
    }//构造函数，实例化类的时候触发的方法
    run(): string {
        return `${this.name}是`
    }
}

4、静态属性静态方法

es5里面的

function Person(){}
Person.run2=function(){}//静态方法

ts里面的
静态方法无法调用类里面的属性，可以调用静态属性

class Person3 {
    static sex = \'nam\'//静态属性
    public name: string
    constructor(name: string) {
        this.name = name
    }
    run() { }
    static prient() {console.log(this.sex,Person3.sex) }//静态方法
}
var p = new Person3(\'11\')
Person3.prient()//静态方法调用

5、多态

父类定义一个方法不去实现，让继承它的子类去实现，每个子类有不同的表现
多态属于继承的一种表现

class Animal{
    name:string
    constructor(name:string){
        this.name=name
    }
    eat(){
        console.log(\'吃的方法\')
    }
}
class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+\'吃肉\'
    }
}
class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+\'吃鱼\'
    }
}

6、抽象方法

ts中的抽象类，他提供其他类集成的基类，不能直接被实例化
用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
abstract抽象方法只能放在抽象类里面
抽象类的子类必须事项抽象类里面的方法

抽象类和抽象方法用来定义标准
标准：Animal这个类要求他的子类必须包含eat

abstract class Animals{
    /**
     * name
     */
    public name:string
    constructor(name:string){
        this.name=name
    }
    abstract eat():any;
}
// 抽象类的子类必须事项抽象类里面的方法
class Dogs extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+\'吃肉\'
    }
}

四、接口

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

1.属性接口

1、对json的约束

ts自定义方法传入对json进行约束

function prientLabel(labelInfo: { label: string }): void {

}
prientLabel({ name: \'aa\' })//错误写法
prientLabel({ label: \'aa\' })//正确写法

2、对批量方法进行约束

接口：行为和动作规范，对批量方法进行约束
参数顺序可以不一样，但必须得有
关键词：interface

interface FullName {
    firstName: string;//注意；结束
    secondName: string;
}
function prientName(name: FullName) {
    // 必须传入对象 firstName secoendName
    console.log(name.firstName, name.secondName)
}
var obj = { firstName: \'1\', secondName: \'jj\', age: 1 }
prientName(obj)
prientName({ firstName: \'1\', secondName: \'jj\', age: 1 })//传age有问题

接口：可选属性

interface FullNames {
    firstName: string;//注意；结束
    secondName?: string;
}

案例

interface Config {
    type: string;
    url: string;
    data?: string
    dataType: string
}
function ajax(config: Config) {
    var xhr = new XMLHttpRequest()
    xhr.open(config.type, config.url, true)
    xhr.send(config.data)
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (config.dataType == \'json\') {
                JSON.parse(xhr.response)
            }
        }
    }
}
ajax({
    type: \'get\',
    url: \'http://..\',
    data: \'\',
    dataType: \'json\'
})

2.函数类型接口

对传入的参数以及返回值进行约束
加密函数类型接口

interface encrypt {
    (ke: string, value: string): string
}
var md5: encrypt = function (key: string, value: string): string {
    return key + value
}

3.可索引接口

数组，对象的约束（不常用）

interface UserArr {
    [index: number]: string
}
var arr: UserArr = [\'11\', \'22\']
interface UserObj {
    [index: string]: string
}
var objw: UserObj = { name: \'20\' }

4.类类型接口

对类进行约束和抽象类有点相似
关键字:implements

interface Animal1 {
    name: string;
    eat(str: string): void
}
class Dog implements Animal1 {
    name: string;
    constructor(name: string) {
        this.name = name
    }
    eat() {
    }
}

5.接口扩展

接口可以继承接口

interface Animalss {
    eat(): void
}
interface Person extends Animalss {
    work(): void
}
class Son implements Person {
    name: string
    constructor(name: string) {
        this.name = name
    }
    eat() { }
    work() { }
}


class Progeammer {
    name: string
    constructor(name: string) {
        this.name = name
    }
    coding() { }
}
class web extends Progeammer implements Person {
    constructor(name: string) {
        super(name)
    }
    eat() { }
    work() { }
    coding() { }
}

五、泛型

泛型，软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
通俗理解:泛型就是解决类接日方法的复用性、以及对不特定数据类型的支持
普通写法
只能返回string类型的数据

function getData(value:string):string{return value}

返回多种类型的数据 any可以解决这种问题（any放弃了类型检查）

function getData1(value:any):any{return value}

1.泛型定义

传入和返回类型相同
可以支持不特定的数据类型

T表示泛型，具体什么类型是调用这个方法的时候决定的

function getData2<T>(value:T):T{return value}
getData2<number>(123)
// getData2<number>(‘kkk’)/* 错误写法 */

2.泛型类

普通写法

class Minclass{
    public list:number[]=[]
    add(num:number){
        this.list.push(num)
    }
    min():number{
        var min=this.list[0]
        for (let i = 0; i < this.list.length; i++) {
           if(min>this.list[i]){
               min=this.list[i]
           }
            
        }
        return min
    }
}

泛型类写法

class Minclass1<T>{
    public list:T[]=[]
    add(num:T):void{
        this.list.push(num)
    }
    min():T{
        var min=this.list[0]
        for (let i = 0; i < this.list.length; i++) {
           if(min>this.list[i]){
               min=this.list[i]
           }
            
        }
        return min
    }
}
var m1=new Minclass1<number>()

3.泛型接口

interface ConfigFn{
    (value:string,value2:string):string
}
var setData:ConfigFn=function(val:string,val2:string):string{
    return val+val2
}

interface ConfigFn1{
    <T>(value:T,value2:T):T
}
var setData1:ConfigFn1=function<T>(val:T,val2:T):T{
    return val
}
setData1<string>(\'123\',\'11\')

interface ConfigFn2<T>{
    (value:T):T
}
function getData6<T>(val:T):T{
    return val
}
var myGetData:ConfigFn2<string>=getData6
myGetData(\'ll\')

案例

class User{
    name:string|undefined;
    pass:string|undefined
}
class mysql{
    add(user:User):boolean{
        return true
    }
}
var u=new User()
u.name=\'zhang\'
u.pass=\'123\'

var db=new Mysql()
db.add(u)

泛型封装

class User1{
    name:string|undefined;
    pass:string|undefined
}
class Mysql1<T>{
    add(info:T):boolean{
        return true
    }
}
var u=new User1()
u.name=\'zhang\'
u.pass=\'123\'
var db1=new Mysql1<User1>()
db1.add(u)

案例

功能:定义一个操作数据库的库支持 Mysql MssqlMongoDb
要求1:Mysql MsSqlMongoDb功能一样都有 add update delete get方法
注意:约束统一的规范、以及代码重用
解决方案:需要约束规范所以要定义接口，需要代码重用所以用到泛型
1、接口:在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范
2、泛型通俗理解:泛型就是解决类接口方法的复用性、

interface DBI<T>{
    add(info:T):boolean;
    update(info:T,id:number):boolean
    delete(id:number):boolean
    get(id:number):any[]
}
// 定义一个操作mysql数据库的类
class MysqlDb<T> implements DBI<T>{
    add(info: any): boolean {
        throw new Error("Method not implemented.")
    }
    update(info: any, id: number): boolean {
        throw new Error("Method not implemented.")
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.")
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.")
    } 
}
// 操作用户表  定义一个User类和数据库映射表
class Users{
    name:string|undefined
    pass:string|undefined
}
var u=new Users()
u.name=\'00\'
u.pass=\'ii\'
var omysql=new MysqlDb<Users>()
omysql.add(u)

六、模块

模块的的概念(官方):
1. 关于木语的一点说明:请务必注意一点，TypeScript 1.5里木语名已经发生了变化。“内部模块”现在称做“命名空间”。外部模块“现在则简称为“模块#模块在且自身的作用域里执行，而不是在全局作用域里:
2. 这意味着定义在一个模块里的变量，因数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其它模块导出的变量，国数，类，接口等的时候，你必须要导入它们，可以使用 import形式之一。
模块的概念(自己理解):
1. 我们可以把一些公共的功能单独抽离成一个文件作为一个模块。
2. 模块里面的变量函数类等默认是私有的，如果我们要在外部访问模块里面的数据(变量、函数、类)，我们要要通过export暴露模块里面的数据(变量、团数、类。。》。
3. 暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据(变量、函数、类...)。

自定义模块

var dburl=\'xxx\'
export function getData():any[]{
    return[{
        title:\'123\'
    },{
        title:\'456\'
    }]
}

导入

import {getData} from \'./db\'
getData()

export default 默认导出
每个模块都可以有一个default导出，默认导出使用default关键字标记；并且一个模块只能够有一个default导出，需要使用一个特殊的导入形式

七、命名空间

在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内
同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。

命名空间和模块的区别

命名空间：内部模块，主要用于组织代码，避免命名冲突。
模块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。

namespace A{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃猫粮。`);
        }
    }   

}

namespace B{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃猫粮。`);
        }
    }   

}

var c=new B.Cat(\'小花\');

c.eat();

封装：模块化+命名空间

export namespace A{
    interface Animal {
        name: string;
        eat(): void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 在吃狗粮。`);
        }
    }

    export class Cat implements Animal {
        name: string;
        constructor(theName: string) {
            this.name = theName;
        }

        eat() {
            console.log(`${this.name} 吃猫粮。`);
        }
    }   

}

import {A} from \'./modules/animal\';
var d=new A.Dog(\'小黑\');
d.eat();

八、装饰器

属性装饰器
装饰器工厂

装饰器定义

装饰器:装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。
通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）
装饰器是过去几年中js最大的成就之一，已是Es7的标准特性之一

类装饰器

类装饰器：类装饰器在类声明之前被声明（紧靠着类声明）。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。传入一个参数

类装饰器:普通装饰器（无法传参）

function logClass(params:any){

    console.log(params);
    // params 就是当前类
    params.prototype.apiUrl=\'动态扩展的属性\';
    params.prototype.run=function(){
        console.log(\'我是一个run方法\');
    }

}

@logClass
class HttpClient{
    constructor(){
    }
    getData(){

    }
}
var http:any=new HttpClient();
console.log(http.apiUrl);
http.run();

类装饰器:装饰器工厂（可传参）

function logClass(params:string){
    return function(target:any){
        console.log(target);
        console.log(params);
        target.prototype.apiUrl=params;
    }
}

@logClass(\'http://www.itying.com/api\')
class HttpClient{
    constructor(){
    }

    getData(){

    }
}

var http:any=new HttpClient();
console.log(http.apiUrl);

类装饰器案例

下面是一个重载构造函数的例子。
装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。
如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

function logClass(target:any){
    console.log(target);
    return class extends target{
        apiUrl:any=\'我是修改后的数据\';
        getData(){
            this.apiUrl=this.apiUrl+\'----\';
            console.log(this.apiUrl);
        }
    }
}


@logClass
class HttpClient{
    public apiUrl:string | undefined;
    constructor(){
        this.apiUrl=\'我是构造函数里面的apiUrl\';
    }
    getData(){
        console.log(this.apiUrl);
    }
}

var http=new HttpClient();
http.getData();

属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
成员的名字。

类装饰器

function logClass(params:string){
    return function(target:any){
        // console.log(target);
        // console.log(params);       
        
    }
}

属性装饰器

function logProperty(params:any){
    return function(target:any,attr:any){
        console.log(target);
        console.log(attr);
        target[attr]=params;
    }
}
@logClass(\'xxxx\')
class HttpClient{
    @logProperty(\'http://itying.com\')
    public url:any |undefined;
    constructor(){
    }
    getData(){
        console.log(this.url);
    }
}
var http=new HttpClient();
http.getData();

方法装饰器

它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。
方法装饰会在运行时传入下列3个参数：
2. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。
3. 成员的属性描述符。

方法装饰器一

function get(params:any){
    return function(target:any,methodName:any,desc:any){
        console.log(target);
        console.log(methodName);
        console.log(desc);
        target.apiUrl=\'xxxx\';
        target.run=function(){
            console.log(\'run\');
        }
    }
}

class HttpClient{  
    public url:any |undefined;
    constructor(){
    }
    @get(\'http://www.itying,com\')
    getData(){
        console.log(this.url);
    }
}

var http:any=new HttpClient();
console.log(http.apiUrl);
http.run();

方法装饰器二

function get(params:any){
    return function(target:any,methodName:any,desc:any){
        console.log(target);
        console.log(methodName);
        console.log(desc.value);       
        
        //修改装饰器的方法  把装饰器方法里面传入的所有参数改为string类型

        //1、保存当前的方法

        var oMethod=desc.value;
        desc.value=function(...args:any[]){                
            args=args.map((value)=>{
                return String(value);
            })
            oMethod.apply(this,args);
        }

    }
}

class HttpClient{  
    public url:any |undefined;
    constructor(){
    }
    @get(\'http://www.itying,com\')
    getData(...args:any[]){
        console.log(args);
        console.log(\'我是getData里面的方法\');
    }
}

var http=new HttpClient();
http.getData(123,\'xxx\');

方法参数装饰器

参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入下列3个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
方法的名字。
参数在函数参数列表中的索引。

function logParams(params:any){

    return function(target:any,methodName:any,paramsIndex:any){

        console.log(params);

        console.log(target);

        console.log(methodName);

        console.log(paramsIndex);


        target.apiUrl=params;

    }   

}

class HttpClient{  
            public url:any |undefined;
            constructor(){
            }           
            getData(@logParams(\'xxxxx\') uuid:any){               
                console.log(uuid);
            }
 }


 var http:any = new HttpClient();
 http.getData(123456);
console.log( http.apiUrl);

装饰器执行顺序

属性》方法》方法参数》类
如果有多个同样的装饰器，它会先执行后面的

function logClass1(params:string){
    return function(target:any){
      console.log(\'类装饰器1\')
    }
}

function logClass2(params:string){
    return function(target:any){
      console.log(\'类装饰器2\')
    }
}

function logAttribute1(params?:string){
    return function(target:any,attrName:any){
      console.log(\'属性装饰器1\')
    }
}

function logAttribute2(params?:string){
    return function(target:any,attrName:any){
      console.log(\'属性装饰器2\')
    }
}

function logMethod1(params?:string){
    return function(target:any,attrName:any,desc:any){
      console.log(\'方法装饰器1\')
    }
}
function logMethod2(params?:string){
    return function(target:any,attrName:any,desc:any){
      console.log(\'方法装饰器2\')
    }
}



function logParams1(params?:string){
    return function(target:any,attrName:any,desc:any){
      console.log(\'方法参数装饰器1\')
    }
}

function logParams2(params?:string){
    return function(target:any,attrName:any,desc:any){
      console.log(\'方法参数装饰器2\')
    }
}



@logClass1(\'http://www.itying.com/api\')
@logClass2(\'xxxx\')
class HttpClient{
    @logAttribute1()
    @logAttribute2()
    public apiUrl:string | undefined;
    constructor(){
    }

    @logMethod1()
    @logMethod2()
    getData(){
        return true;
    }

    setData(@logParams1() attr1:any,@logParams2() attr2:any,){

    }
}

var http:any=new HttpClient();

以上是关于ts基础讲解的主要内容，如果未能解决你的问题，请参考以下文章

替换从 VAST 代码返回的多个 HLS VOD 片段

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

python小白学习记录多线程爬取ts片段

TypeScript语法基础讲解

ts基础讲解

基础配置

ts开发工具 vscode自动编译ts

一、ts中的类型

二、函数定义

ES5函数定义

ts函数定义方法

ts方法的可选参数

默认参数

剩余参数

函数重载

三、对象的继承

es5继承

ts继承

1、ts定义类

2、ts中实现继承

3、ts类里面的修饰符

4、静态属性 静态方法

5、多态

6、抽象方法

四、接口

1.属性接口

1、对json的约束

2、对批量方法进行约束

案例

2.函数类型接口

3.可索引接口

4.类类型接口

5.接口扩展

五、泛型

1.泛型定义

2.泛型类

3.泛型接口

案例

六、模块

七、命名空间

命名空间和模块的区别

八、装饰器

装饰器定义

类装饰器

类装饰器:普通装饰器（无法传参）

类装饰器:装饰器工厂（可传参）

类装饰器案例

属性装饰器

方法装饰器

方法装饰器一

方法装饰器二

方法参数装饰器

装饰器执行顺序

4、静态属性静态方法