TypeScript知识点

TypeScript知识点

• | : 联合类型var a:number | string ; a既可以是数字, 也可以是字符串
• array: 数组里的类型必须一致

• 类型推论: 类型推论发生在变量初始化的时候
• constructor: 构造器相当于init方法, 定义类的初始化是否传参,还有参数类型
• new 相当于alloc
• 接口: 相当于Swift里的协议,只定义方法和属性不去实现,implements了这个接口的类,一定要去实现方法和初始化属性
• ? : 可选类型, 此属性可以不存在,为null
• readonly: 只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}

• Symbol: 唯一字符串生成器

• 迭代器 for..of遍历value, for...in遍历key

• extends: 继承,包含类和接口

• implements: 实现 - 类要实现接口中定义的方法

• namespace: 通过namespace关键字声明命名空间,通过export导出需要在外部使用的对象,在命名空间外部需要通过"完全限定名"访问这些对象

• namespace: 命名空间的别名 import bio_other = Biology; // 别名

• namespace的引用

  通常情况下,声明的命名空间代码和调用代码不在同一个文件里,通过reference注释引用命名空间

    // app.ts
    
    /// <reference path="biology.ts" />
    /// <reference path="cat.ts" />
    /// <reference path="dog.ts" />
    
    
    let dog: Biology.Animal;
    dog = new Biology.Dog('狗狗');
    dog.eat();
   
    let cat: Biology.Animal;
    cat = new Biology.Cat('喵星人');
    cat.eat();
  

  模块

  模块在其自身作用域里执行,而不是全局作用域,意味着定义在一个模块里的变量, 函数,类等在模块外是不可见的,除非使用export导出,或者import导入

  • export -基本使用 - 任何声明(变量, 函数,类,接口)都可以使用export导出

    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
    

    export const numberRegexp = /^[0-9]+$/;
    
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
    

  • export-重命名 as

    class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
    export { ZipCodeValidator };
    export { ZipCodeValidator as mainValidator };
    

  • export - 重新导出

    export class ParseIntBasedZipCodeValidator {
        isAcceptable(s: string) {
            return s.length === 5 && parseInt(s).toString() === s;
        }
    }
    
    // 导出原先的验证器但做了重命名
    export {ZipCodeValidator as RegExpBasedZipCodeValidator} from "./ZipCodeValidator";
    

  • export - 联合导出

    一个模块可以包裹多个模块,并把导出的内容联合在一起,通过语法export * from "module"

    export * from "./StringValidator"; // exports interface StringValidator
    export * from "./LettersOnlyValidator"; // exports class LettersOnlyValidator
    export * from "./ZipCodeValidator";  // exports class ZipCodeValidator
    

  • import - 基本使用

    import { ZipCodeValidator } from "./ZipCodeValidator";
    
    let myValidator = new ZipCodeValidator();
    

  • import - 导出重命名

    import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
    let myValidator = new ZCV();
    

  • import - 整模块导出

    将整个模块导入到一个变量,并通过这个变量访问模块的导出部分

    import * as validator from "./ZipCodeValidator";
    let myValidator = new validator.ZipCodeValidator();
    

  • import - 导入有副作用的模块

    一些模块会设置一些全局状态供其他模块使用, 这些模块可能没有任何导出或用户不关注它的导出,使用这样的方法导入这类模块

    import "./my-module.js";
    

    ​

  • export - 默认导出

    一个模块的默认导出只能有一个

     class Animal {
         name: string;
         show(): string {
             return this.name;
         }
     }
     
     export default Animal;
    

    通过default关键字,将Animal类导出,与一般的导出不同,默认导出时可以指定导出模块的名称, 而不需要用{}花括号括起来,导入也一样的

  • export = 和import = require()

    CommonJS和AMD都有一个exports对象的概念,它包含了一个模块的所有导出内容

    若要导入一个使用了export = 的模块时,必须使用TypeScript提供的特定语法import module = require("moudle")

    let numberRegexp = /^[0-9]+$/;
    class ZipCodeValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
    export = ZipCodeValidator;
    

    import zip = require("./ZipCodeValidator");
    
    // Some samples to try
    let strings = ["Hello", "98052", "101"];
    
    // Validators to use
    let validator = new zip();
    
    // Show whether each string passed each validator
    strings.forEach(s => {
      console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`);
    });
    

    ​

• 命名空间和模块

  模块就是一个ts文件,但是需要包含import或者export,模块之间的联系就是通过export和import实现

  命名空间namespace就是为了解决当一个文件功能越来越多拆分的问题

• 模块解析

  两种方式 :

  1. 相对方式:以/，./或../开头的

  2. 非相对方式

     import * as $ from "jQuery";
     import { Component } from "@angular/core";
     

• 三斜线指令

  /// <reference path="..." />

  三斜线指令只能放在文件的最顶端, 用于声明文件间的依赖,告诉编译器编译过程中需要引入额外的文件

项目配置

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。有两种编译方式

• 不带任何输入文件的情况下调用tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录
• 不带任何输入文件的情况下调用tsc，且使用命令行参数--project（或-p）指定一个包含tsconfig.json文件的目录。

声明文件

other

• path.resolve() : 总是返回当前工作目录(项目目录)的绝对路径
• path: 是Node.js核心模块, 用于操作文件路径 const path = require('path');