ts

  • ES6是Javascript语言的标准,typescript是ES6的超集(不是「强类型」,是「静态类型检查」的「弱类型」),Angular2是基于typescript来开发的JS框架。Ionic是一个强大的UI开发框架。

  • 安装
    npm i -g typescript

  • typescript 文件以 .ts 后缀结尾
    TypeScript 是 JavaScript 的一个超集,主要提供了类型系统对 ES6 的支持
    TypeScript 最大的优势便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等。
    TypeScript 关注的重心是类型的匹配,而不是代码风格。

  • 运行
    tsc name.ts //输出name.js文件 编译的时候即使报错了,还是会生成编译结果
    node name.js //执行js文件

  • TypeScript 中,使用 : 指定变量的类型: 的前后有没有空格都可以。
    原始数据类型包括:布尔值、数值、字符串、nullundefined 以及 ES6 中的新类型 Symbol

与 void 的区别是,undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量,而 void 类型的变量不能赋值给 number 类型的变量。

  • 内置对象
    ECMAScript 标准提供的内置对象有:Boolean、Error、Date、RegExp 等。
    DOM 和 BOM 提供的内置对象有:Document、HTMLElement、Event、NodeList 等。
    Node.js 不是内置对象的一部分,需要引入第三方声明文件:npm install @types/node --save-dev

  • 例子

    class Student{
        info: string;
        constructor(public name,public age){
              this.info = name+' '+age;
        }
    }
    
    function a(stu):void {//用 void 表示没有任何返回值的函数. undefined 和 null 是所有类型的子类型
        console.log(stu.age);
    }
    let stu = new Student('dfs',12);
    a(stu);
    
    interface Person{//接口(Interfaces)来定义「对象的形状(Shape)」。
        readonly id: number;//readonly 定义只读属性,只能在创建的时候被赋值:只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候:
        name:string;
        age:number;
        mes?:string;//可选属性的含义是该属性可以不存在。
    // [propName: string]: any//任意属性取 string 类型的值。☆一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性
    }
    
    interface NumberArray {
        [index: number]: number;
    }
    let fibonacci: NumberArray = [1, 1, 2, 3, 5];//接口表示数组
    
    function test(num:number):number{//输入多余的(或者少于要求的)参数,是不被允许的
        let a;//变量如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查:等价于 let a:any;允许被赋值为任意类型。但不能重新指定类型
        let b = 'string'; //类型推论:TypeScript 会在没有明确的指定类型的时候推测出一个类型。等价于 let b:string = 'string';不允许被赋值为其他类型。
        let c:string|number ;//联合类型使用 | 分隔每个类型。
    
        let num2:number = 3;
        let bool:boolean = true;
        if(bool){
          console.log(`num=${num2}`);
        }
    
        type singleValue = "string1"|'string2'|'string3';//字符串字面量类型用来约束"取值"只能是某几个字符串中的一个。
        let wordValue:singleValue = 'string1';//注意,类型别名 与 字符串字面量类型 都是使用 type 进行定义。
        console.log("我是字符串字面量类型指定的值");
    
        let tom: Person = {
          id:1,
          name:'Tom',
          age:12,
        };
        let arr:number[] = [1,2,3,4];//数组的项中不允许出现其他的类型
        let arr1:(number|string)[] = [1,2,3,4,'12'];//数组的项中使用联合类型可允许出现其他的类型
        let arr2:Array = [1,2,3,4,5];//使用数组泛型(Array Generic) Array 来表示数组:
        let arrAny:any = [1,2,'3',undefined,null];//组中允许出现任意类型
    
        let xcatliu: [string, number] = ['Xcat Liu', 25];//数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。
    
        console.log(arr2);
        return tom.id;
    }
    test(1);
    
    //对函数表达式(Function Expression)的定义
    let mySum: (x: number, y: number) => number = function (x: number, y: number): number {//在 TypeScript 的类型定义中,=> 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型。
        return x + y;
    };
    mySum(1,2);
    
    //用接口定义函数的形状
    type mixType = number|string;//type关键字 创建类型别名,类型别名常用于联合类型。
    
    interface mySumFunc {
        (x: number, y: number,z?:mixType, ...items: any[]): number;//z是可选参数,可选参数后面不允许再出现必须参数了
    }
    
    let mySearch: mySumFunc= function(x:number, y: number=100,z?:mixType, ...items: any[]) {//y默认值为=100,TypeScript 会将添加了默认值的参数识别为可选参数:此时就不受「可选参数必须接在必需参数后面」的限制了:
        console.log(...items);//使用 ...rest 的方式获取函数中的剩余参数, rest 参数只能是最后一个参数
    
        if(z && (z).length){//类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的
            console.log('我是 类型断言');
        }else{
            console.log('我不是字符串');
        }
    
        console.log(x+y);
        return x+y;
    };
    mySearch(1,undefined,3,'rest');
    
    
    /*
    实现(implements)是面向对象中的一个重要概念。
    一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),
    用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。
     */
    //类实现接口(方法)  接口继承接口(方法)  接口继承类(属性)
    interface Alarm {
        alert();
    }
    interface Light {
        lightOn();
        lightOff();
    }
    class Car implements Alarm, Light {
        alert() {
            console.log('Car alert');
        }
        lightOn() {
            console.log('Car light on');
        }
        lightOff() {
            console.log('Car light off');
        }
    }
    //泛型
    //重载(略)

你可能感兴趣的:(ts)