美文网首页ES6
Typescript教程 - 基础部分

Typescript教程 - 基础部分

作者: zz77zz | 来源:发表于2019-06-21 19:15 被阅读0次

    学习typescript

    2019年6月21日11:22:22

    阮一峰的书
    阮一峰的typescript

    安装typescript npm install -g typescript

    tsc 是它一个命令 编译ts文件的
    用法 tsc 文件名

    基础部分

    定义类型

    js 类型有两种 原始数据类型boolean number String null undefined es6的Symbol 和对象类型

    
    let isDone: boolean = false  //定义成其他数据类型时 编译报错
    let myName: string = 'Tom';
    let myAge: number = 25;
    let u: undefined = undefined;
    let n: null = null;
    
    function noThing():void{
        console.log("just for consolelog something")
    }
    let unusable: void = undefined //也可以是null 
    
    
    任意类型Any
    let aa:string = 'aili'
    aa = 7
    
    let bb:any = '1231asdfa'
    bb = false
    
    //未来声明的变量
    let cc;
    cc = 'aili'
    cc = 123
    
    类型推论

    没有指定类型 编译会报错 但是ts会推测出类型 any类型不被做类型检查

    联合类型
    let a:string | number;
    // a = false
    a = 'aili'
    // a = 7
    
    number类型没有length属性 报错
    function getLength(something: string | number): string {
        return something.length
    }
    访问二者共有属性或者方法是可以的
    function getLength(something: string | number): string {
        return something.toString()
    }
    
    对象的类型 -- 接口

    定义对象类型 接口这部分是难点

    对行为的抽象 具体如何行动由类实现 其实看了基础部分回过头再来看 就是 定义 形状

    // 接口 定义了多少属性方法 定义变量的时候得一致 不然报错  不能多不能少
    // 赋值的时候,变量的形状必须和接口的形状保持一致。
    interface Person {
        name:String
        age:number
        sex:String
        hasJob:boolean
    }
    
    let aili: Person = {
        name: 'aili',
        age:25,
        sex:'male',
        hasJob:true
    }
    
    // 上述定义有点问题 如果少一个多一个就报错 有点死板 
    // 可选属性
    interface Person {
        name:String
        age:number
        sex?:String
        hasJob?:boolean
    }
    
    let aili: Person = {
        name: 'aili',
        age:25
    }
    
    // 任意类型
    interface Person {
        [propName: string]:string | number | boolean
    }
    
    let aili: Person = {
        name: 'aili',
        age:25,
        hasJob:true
    }
    
    // 定义了三种类型 但是 定义变量的时候 给了any 这是会报错的
    interface Person {
        [propName: string]:string | number | boolean
    }
    
    let aili: Person = {
        name: 'aili',
        age:25,
        hasJob:true,
        sex: any = {
    
        }
    }
    
    // 只读属性
    interface Person {
        readonly id: number
        [propName: string]:any
    }
    
    let aili: Person = {
        id:1234,
        name: 'aili',
        age:25,
        hasJob:true,
        sex: {
            a:'male',
            b:'female',
            c:'unknown'
        }
    }
    
    数组类型

    方法比较多

    // 数组类型
    let arr: number[] = [1,2,3,4,5]
    let arr: string[] = ['1','2','3','4','5']
    let arr: Array<number> = [1,2,3,4,5] //泛型
    interface mineArr {
        [index: number]: string
    }
    let arr:mineArr = ['a','b','c','d','e']  //一下觉得好规范 严谨 慢慢感受到ts的类型检查的强大
    
    let list:any[] = [1,'a',true,{name:'aili'}]
    
    函数类型

    函数可以看成跟数据类型一样 最灵活的
    js函数式编程编程指南
    这本书好像很牛皮的样子 一共10章

    定义函数

    • 函数声明
      function sum(x, y) {
          return x + y;
      }
      
    • 函数表达式
      let mySum = function (x, y) {
          return x + y;
      };
      
    // 函数类型
    let mySum = function (x: number, y: number): number {
        return x + y;
    };
    
    
    // // 接口定义函数形状 你要对你将实现的函数 有个很明确具体的认识和实现思路 才可以把接口定义的很完美
    interface Search {
        (a:string,b:string): boolean
    }
    let mysearch: Search;
    
    mysearch = (a:string,b:string)=>{
        return a.search(b) !== -1
    }
    
    // 可选参数 还是跟类型定义一样 加个问号就可以了  
    // 可选参数后面不允许再出现 必须 参数了
    // 顺序 必选参数... 可选参数
    function buildName(firstName: string, lastName?: string) {
        if (lastName) {
            return firstName + ' ' + lastName;
        } else {
            return firstName;
        }
    }
    let tomcat = buildName('Tom', 'Cat');
    let tom = buildName('Tom');
    
    
    // 还有一种情况就是默认参数不受参数位置影响 默认参数自动识别为可选参数
    function buildName(firstName: string = 'Tom', lastName: string) {
        return firstName + ' ' + lastName;
    }
    let tomcat = buildName('Tom', 'Cat');
    let cat = buildName(undefined, 'Cat');
    
    // 剩余参数  
    // 用到了es6的rest参数 和析构
    function push(array: any[], ...items: any[]) {
        items.forEach(function(item) {
            array.push(item);
        });
    }
    let a = [];
    push(a, 1, 2, 3);
    
    
    声明文件

    合理使用第三方库 不冲突 我是这么理解的 定义一些全局方法 属性 变量 类等
    具体写法具体查

    文章参考的链接
    箭头函数
    函数参数的默认值
    Rest参考值
    symbol

    END

    相关文章

      网友评论

        本文标题:Typescript教程 - 基础部分

        本文链接:https://www.haomeiwen.com/subject/aeiuqctx.html