• typescript简单的应用


    简单来说typescript就是新增一下方法,以及增加类型判断

    一、普通的类型判断

    1、布尔类型(boolean)

    let isDone: boolean = false
    let createdByBoolean: boolean = Boolean(1)
    

    2、数字类型(number)

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

    3、字符串类型(string)

    let myName: string = 'Tom'
    // 模板字符串
    let sentence: string = `Hello typescript`
    

    4、空值类型(void、null、undefined)

    // 返回空值的函数
    function alertName(): void {
        alert('My name is Tom')
    }
    // 默认空值
    let unusable: void = undefined
    // Null 和 Undefined
    let u: undefined = undefined
    let n: null = null
    

    5、任意值(any)

    let myFavoriteNumberAny: any = 'seven'
    myFavoriteNumberAny = 7
    

    6、联合类型

    let myFavoriteNumber: string | number
    myFavoriteNumber = 'seven'
    myFavoriteNumber = 7
    

    7、类型断言(根据类型来做判断)

    function getLength(something: string | number): number {
        // 当只有something为字符串时才会找到
        if ((<string>something).length) {
            return (<string>something).length;
        } else {
            return something.toString().length;
        }
    }

    二、数组类型

    let fibonacciNum: number[] = [1, 1, 2, 3, 5]
    let fibonacciStr: string[] = ['1','2','3','4','5']
    let fibonacciBool: boolean[] = [true,false]
    let fibonacciVoid: void[] = [undefined,null]
    // any在数组里的应用
    let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }]

    三、对象(接口)类型

    1、指定对象的类型(interface) 

    interface Object {
        name: string
        age: number
    }
    const object: Object = {
        name: '我',
        age: 18
    }
    

    2、可选属性(指定类型少了一些属性或者多一些属性都是不允许的,除了可选属性)

    interface Object1 {
        name?: string
        age: number
    }
    const object1: Object1 = {
        age: 18
    }
    

    3、任意属性(任意名称的属性)

    interface Person {
        name: string;
        age?: number;
        [propName: string]: any;
    }
    // 一旦定义了任意属性,确定属性和可选属性的类型都必须是它的类型的子集(也就是可选属性和任意属性同时存在时,可选属性的类型必须和任意属性相同)
    interface Person1 {
        name: string;
        age?: string;
        [propName: string]: string;
    }
    let tom: Person1 = {
        name: 'Tom',
        age: '25',
        gender: 'male'
    }
    

    4、只读属性(除了第一次赋值,其余时候都无法修改的属性)

    interface Person2 {
        readonly id: number;
        name: string;
        age?: number;
        [propName: string]: any;
    }
    // id除了第一次赋值外,其余时候都没办法修改
    let tom2: Person2 = {
        id: 89757,
        name: 'Tom',
        gender: 'male'
    }
    

    四、函数类型

    1、简单的函数表达式

    // 参数类型与返回类型
    function sum(num1: number, num2: number): number {
        return num1 + num2
    }
    

    2、完整的参数式函数表达式

    // 通过赋值来定义函数
    let mySum1 = function (x: number, y: number): number {
        return x + y
    }
    // 其实这样的话是通过类型推断来决定mySum是函数而已,是不标准的,标准如下:
    let mySum2: (x: number, y: number) => number = function (x: number, y: number): number {
        return x + y
    }
    // 首先要输入mySum2的类型,类型是函数类型,而函数类型包括输入的内容(x: number, y: number),与输出的结果number,中间用=>表示是定义函数定义特有的符号
    // 接口的方式定义函数,更为清晰
    interface SearchFunc {
        (source: string, subString: string): boolean
    }
    let mySearch: SearchFunc
    mySearch = function (source: string, subString: string) {
        return source.search(subString) !== -1
    }
    

    3、配合可选参数

    // 需要注意可选参数不能放在必须参数的前面
    function buildName(firstName: string, lastName?: string) {
        if (lastName) {
            return firstName + ' ' + lastName
        } else {
            return firstName
        }
    }
    let tomcat = buildName('Tom', 'Cat')
    let tom1 = buildName('Tom')
    

    4、默认参数

    function buildName1(firstName: string, lastName: string = 'Cat') {
        return firstName + ' ' + lastName
    }
    let tomcat1 = buildName('Tom', 'Cat')
    let tom3 = buildName('Tom')
    

    5、多余参数

    // 剩余参数(和es6的方式类型,表示剩余的所有参数)
    function push(array: any[], ...items: any[]) {
        items.forEach(function (item) {
            array.push(item)
        });
    }
    

      

  • 相关阅读:
    NFS 服务器实验
    ssh服务实验
    dhcp服务实验
    邮件服务器
    搭建 DNS 服务器
    搭建 web 服务器
    Feign下的数据传递
    基于Spring Cloud Feign的Mock工具
    Git 使用注意事项
    基于redisson的延迟队列
  • 原文地址:https://www.cnblogs.com/huangqiming/p/11983830.html
Copyright © 2020-2023  润新知