介绍

1.什么是 typescript， js 的超集 2.为什么需要 typescript ，有类型约束 适合中大型项目，很方便

环境搭建

  1. npm i typescript -g tsc –version 能看到版本号就是安装好了
  2. tsc –init 会产生一个 tsconfig.json 文件
  3. “outDir” : “./dist”
  4. “rootDir”: “./src”
  5. 在 src .ts 下写代码
  6. dist/运行.ts 文件

类型的约束

  • string \ number \ boolean \ null :object 类型，代表空，代表一个空对象指针 \ undefined : undefined 类型 未定义 \ any 任何类型，一维，放弃了类型的约束

自动类型推断

  • a=’abc’

数组的约束

  • let arr:number[] =[1,2,3,4];
  • let arr2:Array=[5,6,7];

元组 Tuple 约束数组中的每一个元素[number,string] 类似如此

  • let arr3:[boolean,string]=[false,’www’];

any 任何类型，意味放弃了类型的约束

void 表示没有任何返回值

联合类型

  • | let id= string|number;

交叉类型

  • 1、interface IPerson {

id:number,
name:string
}

  • 2、interface ICoder{

lang:string
}

  • 3、type IDev = IPerson & ICoder;
  • 4、let zst:IDev ={id:111,name:’zst’,lang:’js’};

枚举

1
2
3
4
5
6
enum route {
       add=1,
       code=404,
       every=500
   }
   可以通过route.add拿到1；

断言 assert 变量 as 类型 <类型>变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function  getLength(a:string|number){
                // if(typeof a==="string"){
                //     return a.length;
                // }
                // else{
                //     return a.toString().length
                // }
                //return (a as string).length
                //return (<string>a).length
        if((<string>a).length){
            return (a as string).length
        }
        else{
            return a.toString().length
        }

        }

    console.log(getLength(123));

    var el:HTMLDivElement|null=null;
    el=document.getElementById("box") as HTMLDivElement;

    console.log(el.innerHTML)

泛型 接口泛型 函数泛型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fun<T>(x: T): T {
  return x;
}
var d = fun < string > "555";
//泛型类
class Pereson<T> {
  //泛型类
  id: T;
  name: string;
  constructor(id: T, name: string) {
    this.name = name;
    this.id = id;
  }
}

var p = new Pereson() < number > (11, "sss");

class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
1.类的构造函数的重载
   class Test{
       name:string,
       age:number,
       constructor(name:string,age:number)
       constructor(name:string)
       constructor(name:any='',age:any=18){
           //构造函数
           this.name=name;
           this.age=age;
       }
   }
   2.setter
     (public) setName(参数：类型){
         this:类的私有属性=参数
     }
     getter
     getName(){
         return this.name;
     }
   3.权限修饰符
      private 类的内部才能访问
      public （默认的） 类的内部外部子类都可以访问
      protected 受保护的 类和子类可以访问，外部不可以访问；
   4.类的静态成员
   5.抽象类
      关键字 abstract

      abstract class Animal{
          //抽象类不能实例化，继承抽象类实现抽象方法
          abstract say():void;
      }

      class Cat extends Animal{
          say():void{

          }
      }
1
2
3
interface IProgramer extends IPerson {
      当前定义属性
  }

函数的类型约束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function 函数的名字（参数，类型.....）:返回值的类型{
       return 返回值的类型
   }
   let mySum :(x:number,y:number)=>number=function(x:number,y:number):number{
       return x+y;
   }
   //也可以简写为
   let mySum = function (x:number,y:number):number{
       //自动推断
       return x+y;
   }
   //函数接口
   interface IFun{
       (x:number,y:number):number;
   }
   let sum3:IFun=(x:number,y:number):number=>x+y;
   //可以简写为
   let sum2 = (x:number,y:number):number =>x+y ;//自行判断
   //函数参数的默认值
   function show(name:string,age:number=20):string{
       return "name"+name+"age"+age
   }
   //函数的可选参数
   function showinfo(name:string,age?:number){
       if(age){
           return `nume${name}age${age}`
       }else{
           return `name${name}`
       }
   }
   //函数的默认参数
   function show (name:string ,age:number=20):string{
       return 'name':name+","+age+'age'
   }
   //函数的剩余参数
   function sum(...arr:number[]){
       return arr.reduce((a,b)=>a+b)
   }
   //函数重载
    function sum9(x:number,y:number):number
    function sum9(x:string,y:string):string
    function sum9(x:any,y:any):any{
        if(typeof x==="string"){
            return x+"---"+y
        }
        else{
            return x+y;
        }
    }
   //接口对函数的约束
   interface Ifun {
       (x:number,y:number):number
   }
   let sum3:Ifun =(x:number,y:number):number=>x+y;
   可简写为
   let sum3=(x:number,y:number):number=>x+y;
   函数参数的默认值

修饰器模式：设计模式 。 给代码打扮

  • 函数和 class 类 ：属性 方法（功能）
  • 添加功能 (函数形式去添加功能)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//1.装饰器本身就是一个函数
   //2.它的参数是构造函数
   //3.可以通过这个构造器去添加修饰的方法
   //4.通过@符号调用



   //修饰器虽然是函数，但是不能以函数的方式调用
   //通过包装修饰器，把他包装在一个函数中
   function testDecorator (flag){
       function decorFn(constructor:any){
         constructor.prototype.getName=()=>{
               return '我是修饰的方法'
           }
         }
   }

   @testDecorator(true)
   class Preson {
       myFn(){

       }
   }
    const person =new Person();
    (preson  as  any).getName();
       function decorateClass(t:Function){  //类装饰器 本质是一个函数 不修改类的代码的前提下，可以给类增加成员
                                                //target 装饰的类
              t.prototype.school="bw"
          }

        @decorateClass
        class Pereson<T>{  //泛型类
            id:T
            name:string
            constructor(id:T,name:string){
                this.name=name;
                this.id=id
            }
        }

        var p=new Pereson<number>(11,"sss")
        console.log(p.school)
  • vue ts 修饰器模式实现

如果 ts 中使用 es6 的东西，tsconfig 中的“target”改成 es6

建立能使用类型的地方，不要用 any，any 在你不知道类型的时候选择，放弃了约束

对象的约束要用 interface 而不是 object

接口和类的结合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
interface IGo{
      go(type:string):void
  }

  class Person
     //属性(private类的内部可以拿到)name :'zs'和方法（public  默认权限，都可以拿到）
     //protected 类和子类可以拿到  类的外部拿不到
   getter
     getName():string{
         return this.name
     }
    setter
      setName(name:string){
          this.name=name;
    }

    //接口定义的是规范，方法定义的是实现
    interface |xxx{
        exam :(type:string):void  //void可以没有返回值
    }
    class Xxx implements |Xxx{
        exam:(type:string):void{

        }
    }