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');
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容