TypeScript 知识点精要

241 阅读4分钟

介绍 TypeScript

TypeScript 是微软开发一款开源的编程语言,他是 JS 的一个超集,本质上是为了 JS 增加了静态类型声明。任何的 JS 代码都可以在其中使用,不会有任何问题, TypeScript 最终也会被编译成 JavaScript,使其在浏览器 Node 中使用

TypeScript 的基础类型

TypeScript 是 JS 的超集,能支持所有 JS 的数据类型,除此之外,TypeScript 还提供了枚举类型

  • boolean 布尔值: const isBetter:boolean = true;
  • number 数字:const count:number = 1;
  • string 字符串:const name:string = '123'
  • void 空(来表示任何返回值的函数):function hello():void {console.log('hello')},null 和 undefined 类型的变量可以赋值给 void
  • undefined const u:undefined = undefined
  • null: const u:null = null
  • any 任意值: ley number:any = 'one'; number = 1
  • array 数组(通过类型+方括号定义): const me:string[] = ['123', 'hhh']
  • function 函数:给每个参数添加类型之后,再为函数本身添加返回值类型
    function add(x: string, y: string): string { return 'hello';}
    
  • enum 枚举:
    enum Animal {
    	Cat,
        Dog,
        Mouse
    }
    const cat:Animal = Animal.Cat // 0
    const dog:Animal = Animal.Dog
    
    // 编译成 js
    var Animal;
    (function (Animal){
    	Animal[animal['Cat'] = 0] = 'Cat';
        Animal[animal['Dog'] = 1] = 'Dog';
        Animal[animal['Mouse'] = 2] = 'Mouse';
    })(Animal || (Animal = {}));
    const cat = Animal.Cat; // 0
    

TypeScript 特点

  • JavaScript 是动态弱类型脚本语言,缺乏静态强类型,TypeScript 引入了静态类型声明,可以明确变量类型,每一个变量都需要定义它的类型
  • TypeScript 只会进行静态检查,如果代码有问题,在编译阶段就会报错,即使报错了, tsc 还是会将编译进行到底,生成一个 .js 文件

范型一般用在什么地方

软件工程中,不仅要创建一致的定义良好的 API,同时也要考虑可重用性,

设计范型的关键目的是在成员之间提供有意义的约束,这些成员可以是:

  • 类的实例成员
  • 类的方法
  • 函数参数
  • 函数返回值
class Queue<T> {
	private data: T[] = [];
    push = (item: T) => this.data.push(item);
    pop = ():T | undefined => this.data.shift();
}
const queue = new Queue<number>()
queue.push(0);
queue.push('1'); //Error:不能推入一个 string,只有 number 类型被允许

interface

TypeScript 的核心原则之一是对值所具有的结构进行类型检查,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

可选属性

带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个?符号。

可选属性好处是:

  • 对可能存在的属性进行预定义
  • 可以捕获引用了不存在的属性时的错误
interface Person {
	name?: string,
    age?:number
}

function printInfo(info:Person) {
	console.log(info)
}
const info = {name: 'muyy', age: 23}
printInfo(info) // {name: 'muyy', age: 23}

函数类型

除了描述带有属性的普通外,接口也可以描述函数类型。定义的函数类型接口就像是一个只有参数列表和返回值类型的函数定义。

interface SearchFun {
	(source: string, subDtring: string): boolean;
}
let mySearch:SaerchFunc;
mySearch = function(source, substring) {}

可索引类型

与使用接口描述函数类型差不多,我们也可以描述那些能够 “通过索引得到”的类型,可索引类型具有一个索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。

interface StringArray {
	[index: number]:string;
}
let MyArray:StringArray;
MyArray = ['是','yun','hh','xx']

d.ts 是什么

用 ts 写的模块在发布时是用 js 发布,这就导致 ts 那么多类型数据都没了,所以需要一个 d.ts 文件来标记某个 js 库里面对象的类型declare xxx

TypeScript 如何编译

TS的编译流程包含以下三步:解析 -> 转换 -> 生成

namespace / module

任何使用 module 关键字来声明一个内部模块的地方都应该使用 namespace 关键字来替换

namespace Validation {
	xxx...
}

当应用越来越大,我们需要将代码分离到不同的文件以便于维护,多文件中,如果是同一个命名空间,并且在使用的时候,就如同他们在一个文件中定义的一样。

TypeScript 与 ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块

export interface StringValidator {
	isAccepttable(s: string): boolean
}