zoukankan      html  css  js  c++  java
  • TypeScript使用的简单记录

    前言

    简单记录一下TypeScript常用的几个类型,做模板用 >.>

    模板

    • 变量声明

    // 任意类型
    let x:any = 1;  
    // 字符串类型
    let str: string = "Hello World";
    // 数字类型
    let num: number = 5;
    // 布尔类型
    let flag: boolean = true;
    // 数组类型
    let arr: number[] = [1, 2];
    let arr2: Array<number> = [1, 2];
    // 元组
    let list: [string, number];
    list = ['hello', 666];
    // 枚举
    enum Color {Red, Green, Blue}
    let c: Color = Color.Blue;
    console.log(Color); // { '0': 'Red', '1': 'Green', '2': 'Blue', Red: 0, Green: 1, Blue: 2 }
    console.log(c); // 2
    // 类型推断
    let num = 2; // 赋值后类型推断为 number 类型
    let num2; // 若不赋值 类型推断为 any 类型
    
    • 函数

    // 函数

    function prt(str: string): void {
        console.log(str)
    }
    

    // 传参是参数可以缺少但不能多

    // 继承
    class Shape {
        Area:number
    
        constructor(a:number) {
            this.Area = a
        }
    }
    
    class Circle extends Shape {
        disp():void {
            console.log("圆的面积:  "+this.Area)
        }
    }
    // 实现
    interface A {
        num:number
        prt(str: string): number
    }
    
    class B implements A {
        num:number;
        num2:number;
    
        constructor(a:number,b:number) {
            this.num = a;
            this.num2 = b;
        }
    
        prt(str: string) {
            console.log(str);
            return 123;
        }
    }
    
    • 结构体

    // 实例一
    interface A{
        firstName:string,
        lastName:string,
        say: ()=>string
    }
    
    const xxx1: A = {
        firstName: "Tom",
        lastName: "jack",
        say: (): string => {
            return "Hello"
        }
    };
    
    // 实例二
    interface A{
        age:number
    }
    
    interface B extends A{
        name:string
    }
    
    const xxx2 = <B>{};
    xxx2.age = 27;
    xxx2.name = "xpengp";
    
    // 实例三
    interface A{
        v1:number
    }
    
    interface B{
        v2:number
    }
    
    interface C extends A, B{ }
    
    const xxx3: C = {v1: 12, v2: 23};
    
    
    • 导出模块

    export interface Options {
        name: string,
        age: number,
        address: string
    }
    
    const DefaultOptions: Options = {
        name: 'xxx',
        age: 18,
        address: 'China'
    };
    
    export function person(options: Options): object {
        return Object.assign(DefaultOptions, options);
    }
    

    导入模板

    const {person} = require('./models/module');
    console.log(person({
        age: 12
    }));
    
    • 上例实现了默认参数的实现,可见极大地方便了代码的重构
    • 同时方便了IDE的使用

    总结

    1. 项目中TS文件需要先编译为js再执行
    2. 未完待续。。。
  • 相关阅读:
    好的开源项目汇总
    强制SVN上传代码时添加日志
    微信开发-回调模式
    Struct2中自定义的Filter无效
    Ajax 传包含集合的JSON
    PostgreSQL数据库PL/PGSQL学习使用
    单用户对比PG 9.5.4和SYBASE 15.7对超大表的操作性能
    一场一波三折的SQL优化经历
    聚簇索引对数据插入的影响
    磁盘IO初探
  • 原文地址:https://www.cnblogs.com/xpengp/p/12786333.html
Copyright © 2011-2022 走看看