TypeScript知识点

作者: Never_Yg | 来源:发表于2018-06-02 22:15 被阅读17次

2、你能读得懂的TypeScript教程之基础数据类型
TypeScript知识点
Weekly 2019-43
Typescript知识点
egret使用技巧及减少报错
Typescript 基本语法+ 新特性
TypeScript基本介绍
typeScript--其他知识点
TypeScript泛型：如何正确使用泛型约束类型变量
前端入门25-福音 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="..." />

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