精华内容
下载资源
问答
  • TS入门

    2020-06-21 14:53:21
    一.了解TS: TS: TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于...(1).TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可 (2).即使没

    一.了解TS:

    • TS:
      TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上。它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。
    • 优点:
      (1).TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可
      (2).即使没有显式的定义类型,也能够自动做出类型推论
      (3).可以定义从简单到复杂的几乎一切类型
      (4).即使 TypeScript 编译报错,也可以生成 JavaScript 文件
      (5).兼容第三方库,即使第三方库不是用 TypeScript 写的,也(6).可以编写单独的类型文件供 TypeScript 读取
      (7).类型系统增加了代码的可读性和可维护性
      (8).拥有活跃的社区,并且支持ES6规范

    二.安装:

    typeScript 的命令行工具安装方法如下:
    npm install -g typescript
    以上命令会在全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。
    编译一个 TypeScript 文件:tsc hello.ts
    此时会生成一个编译好的文件 hello.js,TypeScript 只会进行静态检查,如果发现有错误,编译的时候就会报错(仍然会生成js文件)。

    三.基础语法:

    (1).JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。
    原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

    1.布尔值:
    使用 boolean 定义布尔值类型:let isDone: boolean = false;
    注意:构造函数 Boolean 创造的对象不是布尔值:而是一个 Boolean 对象:
    eg:

    let createdByNewBoolean: boolean = new Boolean(1);
    // index.ts(1,5): error TS2322: Type 'Boolean' is not assignable to type 'boolean'.
    

    在 TypeScript 中,boolean 是 JavaScript 中的基本类型,而 Boolean 是 JavaScript 中的构造函数。其他基本类型(除了 null 和 undefined)一样。

    2.数值:

    使用 number 定义数值类型
    注意:ES6的进制表示法都会被TS编译为10进制,非ES6进制按原进制编译。
    eg:

    let decLiteral: number = 6;
    let hexLiteral: number = 0xf00d;
    let binaryLiteral: number = 0b1010;     // ES6 中的二进制表示法
    let octalLiteral: number = 0o744;       // ES6 中的八进制表示法
    let notANumber: number = NaN;
    let infinityNumber: number = Infinity;
    

    被编译后:

    var decLiteral = 6;
    var hexLiteral = 0xf00d;
    var binaryLiteral = 10;     // ES6 中的二进制表示法
    var octalLiteral = 484;     // ES6 中的八进制表示法
    var notANumber = NaN;
    var infinityNumber = Infinity;
    

    3.字符串:

    使用 string 定义字符串类型:
    let myName: string = 'tan';//编译后:let myName = "tan";
    

    4.空值:

    JS 没有空值(Void)的概念,在 TS 中,可以用 void 表示没有任何返回值的函数:
    eg:

    function alertName(): void {
        alert('My name is tan');
    }
    

    注意:void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null:let unusable: void = undefined;

    5.null 和 undefined:

    在 TS 中,可以使用 null 和 undefined 来定义这两个原始数据类型:
    eg:

    let u: undefined = undefined;
    let n: null = null;
    

    6.任意值:

    任意值(Any)用来表示允许赋值为任意类型,因此可以赋值为不同类型的值:
    eg:

    let myFavoriteNumber: any = 'seven';
    myFavoriteNumber = 7;
    

    变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:
    eg:

    let something;
    something = 'seven';
    something = 7;
    
    展开全文
  • TypeScript: 使用ts-node加速开发

    千次阅读 2020-04-28 09:57:12
    普通的运行ts的方式, 需要先通过tsc编译为js文件然后运行node xx.js: 一共花了2条命令,使用繁琐: 而使用ts-node: npm install -g ts-node 只需要ts-node xxxx.ts即可: ...

    普通的运行ts的方式,

    需要先通过tsc编译为js文件然后运行node xx.js:

    一共花了2条命令,使用繁琐:

     

     

    而使用ts-node:

    npm install -g ts-node

    只需要ts-node xxxx.ts即可: 

     

    展开全文
  • 使用命令行运行ts文件时显示找不到该文件。 搜索类似问题时发现是文件路径没找对,index.ts一般是在ts根目录下的src文件夹内,所以改个路径就运行成功了 ...在ts根目录下执行tsc src/index.ts 即可成功运行ts文件 ...

    使用命令行运行ts文件时显示找不到该文件。
    tsc index.ts报错
    搜索类似问题时发现是文件路径没找对,index.ts一般是在ts根目录下的src文件夹内,所以改个路径就运行成功了

    处理
    在ts根目录下执行tsc src/index.ts 即可成功运行ts文件成功运行ts文件,生成js文件

    展开全文
  • ts_practice:ts练习-源码

    2021-03-22 16:11:43
    如果希望直接在vscode中运行ts需要安装Code Runner插件然后又执行npm install ts-node -g并安装ts-node即可 一般使用ts插件或babel来解析ts 使用汇总处理 执行命令npm install rollup typescript rollup-plugin-...
  • ts梳理

    2020-05-08 15:19:50
    一、关于ts的安装和检验 1:安装ts前,必须先安装node.js 2:安装ts npm i typescript -g...注意点:ts代码被tsc转化后施直接生成一个.js文件,然后直接操作js文件即可(引入和操作等) 2:ts需要转化为js文件,在导...

    一、关于ts的安装和检验

    1:安装ts前,必须先安装node.js
    2:安装ts npm i typescript -g 全局安装
    3:检验是否安装成功: tsc -v 若是显示版本便是安装成功

    二、创建编译.ts文件,自动保存的配置

    1:ts文件后面的后缀名为.ts 
    **注意点:ts代码被tsc转化后施直接生成一个.js文件,然后直接操作js文件即可(引入和操作等)**
    2:ts需要转化为js文件,在导入html文件中才能使用==这导入的方式是:在文件中新建一个终端,然后输入tsc 文件名称.ts后缀==
    
    以下更为合适:创建编译.ts文件,自动保存的配置
    //在项目的终端,输入tsc --init 来创建ts工具的文件夹 tsconfig.json
    //然后在tsconfig.json文件夹里面修改  "outDir": "./js", 编译完就保存在这个js文件夹里面
    然后在终端-运行任务-typescript-tsc监视 ---点击之后,会生成一个js文件夹,里面包含.js文件
    

    三、typescript的基础

    (1):ts的数据类型

    ts数据类型
    1:ts语法规定:在声明遍历的时候,必须指定数据类型
    语法 — let 变量名:数据类型
    let age:number
    let myName:string = “pink”
    作用:这样声明数据类型,使得声明的变量只能存储这样的类型数据
    2:ts的数据类型有:string number boolean array tuple(枚举) any(任意类型) null underfined void类型 never类型
    注意点:underfined和null的是其他类型的子类,所以这两个变量的值可以赋给其他类型的变量

    //1:boolean类型
    let flag: boolean = true;
    
    //2;number类型
    let num: number = 123;
    // num = "pin"; //出错
    console.log(num);//123
    
    //3:定义数组
    let arr: number[] = [1, 3, 5, 7];
    let arr2: string[] = ["pink", "lala", "pa"];
    console.log(arr2);//["pink", "lala", "pa"]
    //第二种方式
    let arr3: Array<number> = [1, 4, 7]
    
    //4:元祖类型 (tuple) 也是数组中的一种 可以指定多种类型
    let arr0: [string, number, boolean] = ["pom", 123, true]
    
    //5 枚举类型 (enmu) 
    //可以定义flag 1为true -1为false  或者支付类型等 0未支付 1支付 2交易成功
    enum Flag { success = 1, error = -1 }
    let f: Flag = Flag.success;
    console.log(f);//1
    enum pay_status { nopay = 0, pay = 1, success = 2 };
    let type: pay_status = pay_status.pay;
    console.log(type);//1
    enum Color { red, blur = 5, orange };
    let x: Color = Color.orange;
    console.log(x);//6
    
    //6任意类型
    let num2: any = 123;
    num2 = "str";
    console.log(num2);//str
    //任意类型的作用:  需求对box盒子的文字改为红色
    let oBox: any = document.querySelector(".box");
    oBox.style.color = "red" //因为oBox是对象类型,但是ts中没有对象类型,因此使用any比较合适
    
    //7: null (空) undefined (未定义) never(其他) 数据类型的子类型
    let num: number | undefined;
    // num = 123;
    console.log(num);//123  //undefined 若是只定义为赋值的时候,输出undefined
    
    //8:void类型---typescript中的void是表示没有任何类型,一般用于定义方法中方法没有返回值
    function fun(): void {
      console.log("run");
    }
    fun();
    //如果有返回值的时候,就需要在函数后面添加数据类型
    function fun1(): number {
      return 123
    }
    fun1();
    
    //9:其他类型,(包含null和undefined)的子类型,代表从不会出现的值。意味着声明never类型只能被never类型赋值,很少用
    let b: null;
    b = null;
    let b3: undefined;
    b3 = undefined;
    

    (2):typescript的函数

    //函数
    //1:声明式函数
    function fun(): string {
      return "pin";
    }
    fun();
    
    //2:匿名函数
    let fun2 = function (): number {
      return 123;
    }
    console.log(fun2());
    
    //3:ts中定义方法传参
    function getInfo(name: string, age: number): string {
      return `${name}---的年龄为---${age}岁`;
    }
    console.log(getInfo("lala", 18));
    //注意点:name和age定义了传入的参数必须是字符串,数字型,返回值的类型为string
    let getInfo2 = function (name: string, age: number): string {
      return `${name}---的年龄为---${age}`;
    }
    console.log(getInfo2("pon", 30));
    
    function fun0(): void {//没有返回值的函数
      console.log("run");
    }
    fun0();
    
    //3.2:方法可选参数
    //当给age参数添加一个?的时候,代表的是age属性可以传递也可以不传递
    function getInfo3(name: string, age?: number): string {
      if (age) {
        return `${name}---的年龄为---${age}`;
      } else {
        return `${name}---的年龄为---保密`;
      }
    }
    console.log(getInfo3("pip", 20));
    
    //3.3:默认参数 es5中不可设置默认参数 但是es6和ts都可以设置默认参数
    // 注意点:可选参数必须配置在最后面,就是类似直接把age设置为默认参数,直接给了默认值
    function getInfo4(name: string, age: number = 20): string {
      if (age) {
        return `${name}---的年龄为---${age}`;
      } else {
        return `${name}---的年龄为---保密`;
      }
    }
    console.log(getInfo4("pia")); //pia---的年龄为---20
    console.log(getInfo4("pia", 30)); //pia---的年龄为---30
    
    //3.4:剩余参数
    //借助三点运算符  传递的参数转化为数组的形式 
    function sum(...result: number[]): number {
      let sum = 0;
      for (let i = 0; i < result.length; i++) {
        sum += result[i]
      }
      return sum
    }
    console.log(sum(1, 2, 3, 4));//10
    console.log(sum(1, 2, 3, 4, 5, 6));//21
    
    //3.5:函数的重载
    //在java中方法中的重载:重载指的是两个或者两个以上的同名函数,但是他们的参数不一样,这就是函数重载的现象。
    //typescript的重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的
    function getInfo0(name: string): string;
    function getInfo0(age: number): number;
    function getInfo0(str: any): any {
      if (typeof str === "string") {
        return "我的名字是" + str;
      } else {
        return "我的年龄是" + str
      }
    }
    console.log(getInfo0("pink"));//我的名字是pink
    console.log(getInfo0(40));//我的年龄是40
    
    //另一种写法
    function getInfo5(name: string): string;
    function getInfo5(name: string, age: number): string;
    function getInfo5(name: any, age?: any): any {
      if (age) {
        return "我的名字是" + name + "我的年龄是" + age;
      } else {
        return "我的名字是" + name
      }
    }
    // console.log(getInfo5("paaa"));//我的名字是paaa
    console.log(getInfo5("pa", 90));//我的名字是paaa 我的年龄是90
    
    //3.6:箭头函数  this指向上下文
    setTimeout(() => {
      console.log("run");//run
    }, 3000)
    

    (3):类与对象

    (1):ES5创建对象

        //1:es5中最简单的类
        function Person() {
          this.name = "pin";
          this.age = 18;
        }
        let p = new Person();
        console.log(p.age); //18
    
        //2:构造函数和原型链中添加方法
        function Person1() {
          this.name = "pink";
          this.age = 12;
          this.run = function () {
            console.log(this.name + "在运动");
          }
        }
        //原型链上上面的属性会被多个实例共享  构造函数不会
        Person1.prototype.sex = "男";
        Person1.prototype.work = function () {
          console.log(this.name + "在工作");
        }
        let p1 = new Person1();
        p1.run(); //pink在运动
        p1.work(); //pink在工作
    
        //3:类的静态方法
        function Person2() {
          this.name = "pink";
          this.age = 12;
          this.run = function () {
            console.log(this.name + "在运动");
          }
        }
        //静态方法
        Person2.getInfo = function () {
          console.log("我是静态方法");
        }
        //原型链上上面的属性会被多个实例共享  构造函数不会
        Person2.prototype.sex = "男";
        Person2.prototype.work = function () {
          console.log(this.name + "在工作");
        }
        let p2 = new Person2();
        p2.work(); //pink在工作
        //调用静态方法
        Person2.getInfo();
    
        //4-1:es5中 类的继承 通过对象的冒充方式
        function Person3() { //父
          this.name = "ppp";
          this.run = function () {
            console.log(this.name + "在run");
          }
        }
    
        function Web() { //子 因为call方法用于继承,web继承了person3
          Person3.call(this); //就是在调用Web函数的时候,借助call方法改变this指向,指向到父类Person3,
          //但是没办法继承原型链上面的属性和方法  
        }
        let w = new Web();
        w.run(); //ppp在run 
    
        //4-2:es5中 原型链的继承
        //注意点:原型链实现继承:可以继承构造函数里面的属性和方法,还可以继承原型链上面的属性和方法
        function Person4() {
          this.name = "qqq"
          this.age = 12;
          this.saiHi = function () {
            console.log(this.name + "在说:" + "hi");
          }
        }
    
        function Web2() {
    
        }
        Web2.prototype = new Person4(); //利用原型链的方式,来继承了构造函数的属性和方法
        let w2 = new Web2();
        w2.saiHi(); //qqq在说:hi
    
        //4-2:es5中 原型链的继承 的问题
        //实例化的时候,没办法给父类传递参数  因此需要原型链和冒充父类的方式来实现完美继承
        function Person5(name, age) { //父
          this.name = name
          this.age = age;
          this.saiHi = function () {
            console.log(this.name + "在说:" + "hi"); //张一在说:hi
          }
        }
        Person5.prototype.sex = "女";
        Person5.prototype.work3 = function () {
          console.log(this.name + "在工作"); //张一在工作
        }
    
        function Web3(name, age) { //子
          Person5.call(this, name, age);
        }
        Web3.prototype = new Person5(); //利用原型链的方式,来继承了构造函数的属性和方法
        let w3 = new Web3("张一", 20);
        w3.saiHi();
        w3.work3();
    

    (2):ts类的定义类

    (01):ts中定义一个简单的类

    注意点:创建实例对象,便会触发对应类的构造函数,因此在实例对象中传入参数,被构造函数接受后,进行赋值

    class Person {
      name: string;//定义了属性
      constructor(name: string) {//构造函数 实例化类的时候,触发该函数
        this.name = name;
      }
      run(): void {
        console.log(this.name);
      }
    }
    let p = new Person("pink");//这边传递参数,实例化类后,触发构造函数,然后构造函数,接受传递过来的参数,进行赋值
    p.run();//pink
    

    (02):ts中的继承

    使用entends来继承父类,并且在构造函数内使用super方法,来初始化父类的构造函数,两者结合,最终实现ts的继承

    class Person {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      run(): string {
        return `${this.name}在运动`
      }
    
    }
    // let p = new Person("liyi");
    // console.log(p.run());//liyi在运动
    //Web类来继承Person类
    class Web extends Person {
      constructor(name: string) {
        super(name);//初始化父类的构造函数
      }
    }
    let w = new Web("xiaoxie");
    console.log(w.run());//xiaoxie在运动
    

    (03):父类和子类的方法一致

    注意点:父类和子类的方法一致,优先调用子类的函数,若是子类没有改属性或者改方法,则去父类寻找

    class Person {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
    
      run(): string {
        return `${this.name}在运动-父类`
      }
      work(): string {
        return `${this.name}在工作-父类`
      }
    }
    class Web extends Person {
      constructor(name: string) {
        super(name)
      }
      work(): string {
        return `${this.name}在工作-子类`
      }
    }
    let w = new Web("李侠");
    console.log(w.run());//李侠在运动-父类
    console.log(w.work());//李侠在工作-子类
    

    (3):ts类的修饰符

    typescript里面定义属性的时候,给我们提供了三种修饰符
    public:公有 在类里面,子类 类外面都可以访问
    protected: 保护类型 在类里面,子类都可以访问,但是在类外部不能访问
    private:私有类型 在类可以访问,子类和类外部都不能访问
    注意点:若是属性没有添加的那种类型的话,默认为共有属性

    (01):public类型 --公有类型

    //1:public类型的访问
    class Person {
      public name: string;
      constructor(name: string) {
        this.name = name;
      }
      run(): string {
        return this.name + "在run";
      }
      work(): string {
        return this.name + "在工作";
      }
    }
    class Web extends Person {//子类 利用super继承了父类
      constructor(name: string) {
        super(name)
      }
      work(): string {
        return this.name + "在工作-子类"
      }
    }
    let w = new Web("小谢");
    console.log(w.work()); //小谢在工作 - 子类
    console.log(w.name);//小谢  在类外面调用类的属性name
    

    (02):protected类型 --保护类型

    //2:protected类型的访问
    class Person {
      protected name: string;
      constructor(name: string) {
        this.name = name;
      }
      run(): string {
        return this.name + "在run";
      }
      work(): string {
        return this.name + "在工作";
      }
    }
    class Web extends Person {//子类 利用super继承了父类
      constructor(name: string) {
        super(name)
      }
      work(): string {
        return this.name + "在工作-子类"
      }
    }
    let w = new Web("小谢");
    console.log(w.work()); //小谢在工作 - 子类
    // console.log(w.name);//报错 因为name为保护类型  在外面不能被访问
    

    (03):pricate类型 --私有类型

    //3:private:私有类型  只能在本类中使用 子类和外部都不能访问
    class Person {
      private name: string;
      constructor(name: string) {
        this.name = name
      }
      run(): string {
        return `${this.name}在run`
      }
    
    }
    let p = new Person("小哈");
    // console.log(p.name);//报错,因为name为私有类型,只能在类里面使用
    console.log(p.run());//小哈在run  这是因为run在Person类里面,可以使用name属性
    

    (4):ts类的静态方法、属性

    1:静态方法—就是使用static定义的方法,只能调用静态属性,调用静态方法—通过类.方法的方式调用
    2:静态属性—就是使用static定义的属性
    3:实例方法—就是通过实例对象调用的方法
    4:实例属性—就是通过实例对象调用的属性

    class Person {
      public name: string;
      static age: number = 10;
      constructor(name: string) {
        this.name = name;
      }
      run() {
        console.log(this.name + "在run");
      }
      work() {
        console.log(this.name + "在工作");
      }
      static print() {//静态方法,只能调用静态属性,不能调用类里面的属性
        console.log("我是静态方法,今年" + this.age + "岁了");
      }
    }
    let p = new Person("小谢"); //实例方法传入参数,触发构造函数,构造函数接受参数后赋值
    p.work();//实例方法 就是实例化对象调用的方法   小谢在工作
    Person.print();//调用静态方法  用static修饰的方法或者属性,直接通过类.调用  我是静态方法,今年10岁了
    console.log(Person.age);//10
    

    (5):ts的多态和抽象类

    1:多态:是指父类定义的方法不去实现功能,而是通过继承的方式给了子类,子类继承父类的方法后,完成自己需要的功能,需要产生了多态性
    需求 父类:动物类 子类:dog,cat继承了父类的吃的方法 输出狗吃肉,猫吃老鼠

    class Animal {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      eat() {
      }
    }
    class Dog extends Animal {
      constructor(name: string) {
        super(name)
      }
      eat() {
        console.log(`${this.name}在吃肉`);
      }
    }
    class Cat extends Animal {
      constructor(name: string) {
        super(name)
      }
      eat() {
        console.log(`${this.name}吃老鼠`);
      }
    }
    let dog = new Dog("小狗");
    dog.eat();//小狗在吃肉
    let cat = new Cat("猫");
    cat.eat();//猫吃老鼠
    

    2:抽象类:ts提供了抽象类,就是定义了这个类为抽象类,让子类继承抽象类的方法,值得注意的是:抽象类不能实例化,但是子类可以实例化。
    abstract关键字定义了抽象类和抽象方法,抽象类中的方法不包含具体实现并且必须在派生类实现
    abstract方法只能放在抽象类里面
    抽象类和抽象方法来定义标准
    需求: Animal这个类为抽象了 要求他的子类必须包含eat方法

    abstract class Animal {//抽象类和抽象方法  不能直接实例化,只能被其他子类继承
      public name: string;
      constructor(name: string) {
        this.name = name;
      }
      abstract eat(): any;
    }
    class Dog extends Animal {
      //抽象类的子类,必须实现抽象类的方法
      constructor(name: any) {
        super(name)
      }
      eat() {
        console.log(`${this.name}在吃肉`);
      }
    }
    class Cat extends Animal {
      constructor(name: any) {
        super(name)
      }
      eat() {
        console.log(`${this.name}在吃老鼠`);
    
      }
    }
    let dog = new Dog("小狗");
    dog.eat();//小狗在吃肉
    let cat = new Cat("小花猫");
    cat.eat();//小花猫在吃老鼠
    

    (6):接口

    接口的作用:接口就是一种规范的定义,它定义了行为和动作的规范。(对类里面的方法和属性定义了规范)
    接口分为:
    1:属性接口
    2:加密函数类型—接口
    3:可索引接口
    4:类类型接口
    5:接口的扩展

    (01):属性接口

    接口:行为和动作的规范,还可以对批量方法进行约束
    需求:定义一个姓名的接口,里面必须传入性和名

    interface FullName {//interface 为接口关键字
      firstName: string;//接口中的对象是以;结束 
      lastName: string;
    }
    function printName(name: FullName) {
      console.log(name.firstName + '---' + name.lastName);
    }
    function printInfo(info: FullName) {
      console.log(info.firstName + '---' + info.lastName);
      //不能添加,info.age  因为传入的参数info: FullName,需要符合FullName接口的规范
    }
    // printName({
    //   firstName: "小谢",
    //   lastName: "渣渣"
    // });  //小谢---渣渣
    // 推荐把对象写在外面  只有对象里面包含firstName和lastName即可,复用性高
    let obj = {
      age: 20,
      firstName: "小谢",
      lastName: "渣渣"
    } //小谢---渣渣
    printName(obj);
    printInfo({
      firstName: "李",
      lastName: "仨"
    }) //李---仨
    

    接口—可选属性的定义 就是在定义接口的时候,对这个传入的参数设置为可选参数—以?设置

    interface FullName {
      firstName: string;
      lastName?: string;
    }
    function getInfo(name: FullName) {
      console.log(name.firstName + "-" + name.lastName);
    }
    getInfo({
      firstName: "赵",
      // lastName: "子龙"
    })//赵-undefined  因为lastName为可选参数,但是打印的话,未定义传入的参数
    

    元素js模拟封装jq的ajax接口
    /*
    KaTeX parse error: Expected '}', got 'EOF' at end of input: …ta: "{username:("#username").val(),content:$("#content").val()}",
    dataType: “json”
    })
    */

    nterface Config {//配置的接口
      type: string;
      url: string;
      data?: string;
      dataType: string;
    }
    //原生js模拟jq封装的ajax
    function ajax(config: Config) {
      let xhr = new XMLHttpRequest();
      xhr.open(config.type, config.url, true);
      xhr.send(config.data);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log("成功");
            let str = xhr.responseText;
            if (config.dataType === "json") {
              JSON.parse(str)
              console.log(JSON.parse(str));
    
            } else {
              console.log(xhr.responseText);
            }
          }
        }
      }
    }
    
    ajax({ //调用ajax接口
      type: "get",
      data: "name=lixi,age=20",
      // url: "http://www.baidu.com",//跨域了
      url: "http://a.itying.com/api/productlist",
      dataType: "json"
    })
    

    (02):加密函数类型—接口

    interface encrypt {//encrypt ---加密
      (key: string, value: string): string;
    }
    let md5: encrypt = function (key: string, value: string): string {
      return key + "-" + value;
    }
    console.log(md5("name", "张三")); //name-张三
    

    (03):可索引接口 : 对数组或者对象的约束 —不常用

    interface UesrArr {
      [index: number]: string;
    }
    let arr: UesrArr = ["aa", "bb"];
    console.log(arr[0]);//aa
    

    (04):类类型接口 : 对类的约束 和抽象类有点相似

    erface Animal {
      name: string;
      eat(name: string): void;
    }
    class Dog implements Animal { //implements---生效执行  Dog类去实现Animal接口
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      eat() {
        console.log(this.name + "在吃肉");
      }
    }
    let dog = new Dog("小黑");
    dog.eat();//小黑在吃肉
    class Cat implements Animal {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      eat(food: string) {
        console.log(this.name + "吃" + food);
      }
    }
    let cat = new Cat("小花猫");
    cat.eat("猫粮");//小花猫吃猫粮
    

    (05):接口的扩展 接口可以继承接口

    // interface Animal {
    //   eat(): void;
    // }
    // interface Person extends Animal {
    //   work(): void;
    // }
    // class Web implements Person {
    //   name: string;
    //   constructor(name: string) {
    //     this.name = name;
    //   }
    //   eat() {
    //     console.log(this.name + "吃肉");
    //   }
    //   work() {
    //     console.log(this.name + "在工作");
    //   }
    // }
    // let w = new Web("小谢");
    // w.work();//小谢在工作
    
    //继承并且实例化接口
    interface Animal {
      eat(): void;
    }
    interface Person extends Animal {
      work(): void;
    }
    class Programmer {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      coding(code: string): void {
        console.log(this.name + code);
    
      }
    }
    class Web extends Programmer implements Person {
      // name: string;
      constructor(name: string) {
        // this.name = name;
        super(name)
      }
      eat() {
        console.log(this.name + "吃肉");
      }
      work() {
        console.log(this.name + "在工作");
      }
    }
    let w = new Web("小谢");
    w.work();//小谢在工作
    w.coding("写ts代码")//小谢写ts代码
    

    (7):泛型

    展开全文
  • TS以4比2的比分战胜XQ,成功挺进季后赛败者组决赛,打破队史最佳成绩。不过小编想说,纵使TS有工资体系,估计大概率也只能止步三强了。因为XQ教练已经把如何针对TS的方法都告诉林教练,接下来DYG只需要照抄作业就...
  • //文件头引入模块 const fs = require('fs'); /** * 创建目录 * @param filePath 文件路径或者文件夹路径 */ private mkdir(filepath) { const arr = filepath.split('/'); let dir = arr[0];... .
  • 1.使用ts-node和nodemon结合 我的项目的里的配置 需要安装的包 ts-node nodemon nodemon --watch "./src" --ext "ts, json, js" --exec "nodemon ./index.ts" 2.使用ts-node-dev ...ts-node-dev ./index.ts 即可
  • 通过发布发布一个TS流,然后通过Feed方法填入TS数据即可 通过PublishDir可以读取服务器上文件夹内的所有ts文件进行发布 通过UI界面操作,点击TS文件夹,可以将文件夹中的TS文件逐个进行发布,文件夹路径就是房间名 ...
  • CameraMoveScript.ts

    2019-08-27 22:59:37
    Layabox3d摄像机操作类,直接导入 CameraMoveScript.ts后,挂在摄像机上即可使用
  • vue配置ts

    2019-07-02 09:45:01
    vue配置ts从0开始写ts的vue从js迁移到ts 从0开始写ts的vue 下载vue-cli 3.0+ npm install -g @vue/cli 通过脚手架vue-cli创建...按照提示按空格键选中项目所需配置即可(选中typescript) 全部选择后,示例如图:...
  • ts编译选项

    2021-01-02 11:08:10
    一、自动编译文件 编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译(w就是watch的意思...tsconfig.json是一个JSON文件,添加配置文件后,只需 tsc 命令即可完成对
  • 为减小打包体积,项目已配置了忽略打包*.ts、*.scss、/typings、/cli等规则,详见/project.config.json.packOptions.ignore,项目启动后用开发工具上传即可。 开发 新建页面:npm run add:page [页面名]或yarn add:...
  • 此插件修补了以启用.ts文件的直接import ,而无需在其间进行额外的构建/发布步骤。 这对于在业务逻辑/实用程序提取到其自己的程序包中。 就像 ,但用于常规npm软件包。 安装 对于应用程序: ember install ember-...
  • 只需单击一下,即可将枚举转换为字符串文字枚举的工具。 建立 :red_heart_selector: 。 用法 安装 作为VSCode扩展 您可以看到 。 作为打字稿插件 安装套件 yarn add ts-string-literal-enum-plugin或npm i ts-...
  • ts中的继承

    2020-05-10 21:27:51
    **注意点:ts代码被tsc转化后施直接生成一个.js文件,然后直接操作js文件即可(引入和操作等)** 2:ts需要转化为js文件,在导入html文件中才能使用==这导入的方式是:在文件中新建一个终端,然后输入tsc 文件名称....
  • vscode中运行ts报错 error TS1005: ';' expected. 刚入门就来了个大坑, error TS1005: ';' expected....解决办法:环境变量中把原来默认的1.0版本改成2.5,重启vscode即可重新运行 ...
  • TS628升级固件

    2017-03-01 10:58:59
    TS628升级固件(OpenWRT),官方提供的升级固件,可用于升级或修复拓实TS628/528路由器,稀缺资料!理论上适合MT7260方案的其它路由升级使用。注意:修复路由,请先刷OpenWRT,在openwrt系统内选择升级包升级即可
  • 中税TS630K打印机驱动

    2018-07-19 22:21:44
    中税TS630K打印机驱动程序,安装后链接电脑即可使用。
  • TSLint提示错误

    2017-10-19 15:50:00
    要成为优秀的TS开发人员,必须直接禁用TS的不良特性。 为此,道爷亲自操刀编写了TSLint工具,用来分析我们的TS代码,把潜在的...(一般编辑器会提示tslint规则的关键词,找到对应的关键词,将值改成false即可) ...
  • 编译选项 自动编译文件 ...使用 tsc 命令即可完成对整个项目的编译 配置选项 include/exclude 用途:定义希望被编译【不被编译】的目录 默认值:【include】:["**/*"] / 【exclude】: ["node_modules",
  • 简单级别:网页直接给出了mp4格式的视频链接,所以可以像下载图片一样发个请求就可以轻松获得中等级别:就是网页给出的是ts文件,所有的ts文件会存储在一个m3u8文件中,我们请求这个m3u8文件即可拿到全部的ts文件的...
  • 前面的几篇文章做了很多铺垫,学习TypeScript的一些基本入门知识,这次将使用TS来实现链表结构,并实现链表的反转操作。什么是链表链表是用来存储有序的元素集合,与数组不同,链表中的元素并非保存在连续的存储空间...
  • TS流解析

    2017-03-24 19:36:09
    UDP->RTP->TS流 可以用wireshark抓RTP包进行...I帧关键帧,属于帧内压缩,解码时只需本帧即可,包含完整画面。 P帧差别帧,表示本帧与前一帧的差别,没有完整画面,解码时需要把前一个画面缓存一下。 B帧是双向差
  • 只需保留这些文件的名称相同即可。 特征 调零。 运行npm install后,将为您npm install东西 :winking_face: 和多个优化捆绑包的 使用测试,报道和交互式观看模式 和实现代码格式化和一致性 使用自动将文档生成并...
  • php5ts.dll 下载_php5ts.dll

    2021-03-22 21:30:26
    丢失问题,dll常规安装方法(仅供参考):一、如果在运行某软件或编译程序时提示缺少、找不到xxx.dll等类似提示,您可将下载的dll文件拷贝到指定目录即可(一般是system目录或软件同级目录),或者重新添加文件引用。...
  • “本次任务共:334个文件”,也就是该视频一共被切片成了334个.ts格式的索引文件,我们耐心等待软件全部下载完成,然后点击【视频合并】即可; 合并完成的视频保存于:根目录/下载 ,这里可以看到a.mp4就是刚刚合成...
  • ts文件合成器(Python)

    2019-02-22 17:56:03
    可以合成类似(1.ts 2.ts ... 10.ts 11.ts 100.ts ...)的ts文件,根据提示输入第一个文件和最后一个文件的序号(注意,是序号不是文件名),即可生成完整的ts文件,代码很短,可以根据需要继续开发,欢迎交流[/斜眼笑]
  • Egg TS 改造总结

    2021-01-01 22:42:16
    <div><p>最近参与了 egg 的 ts 支持改造工作,写篇文章总结一二。 在上一篇文章 <a href="https://github.com/whxaxes/blog/issues/11">Typescript 在 Egg + Vue 应用中的实践</a> 中在 Egg 项目中做了...
  • TS文件合并器.rar

    2017-11-29 18:31:06
    该命令的合并排序是按照你系统下的字母序来的,比如你的文件名是disk1.ts, disk2.ts, disk3.ts,那该命令就会按照disk1.ts+disk2.ts+disk3.ts的顺序来合并这三个文件,事实上,绝大多数网上下载的高清文件,都已经按...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,191
精华内容 476
关键字:

ts即可