一篇文章带你过一遍 TypeScript

2019年8月31日 199次阅读 来源: 阿夸AQUA

TypeScript 是 Javascript 的一个超集，提高了代码的可读性和可保护性。Typescript 官网供应的
文档已相称完美，但完整地看一遍须要肯定的时候，本文试将 TypeScript 中要点提出，缩略为一文，用于阅读要点、疾速温习。

1. 范例

1.1 原始范例定义

boolean/number/string/null/undefined

个中 null/undefined 是 TypeScript 中任何范例的子范例。

1.2 空值、恣意值、排列、Never

void/any/enum/never

void 指空值，若用于变量，则该变量只能赋值为 null/undefined；若用于函数，则该函数返回值为 空/null/undefined。

any 指恣意值。TypeScript 中变量赋值后范例是没法转变的，但 any 范例的变量能够转变成恣意值。（声明变量且没法范例推论时默以为 any 范例）

enum 指排列范例，取值能够排列出来。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

never 指不存在的值的范例，比方非常，函数无穷轮回没法返回等。

1.3 数组范例定义

TypeScript 中数组范例有多种定义体式格局，排列以下：

1.范例 + 方括号

let list: number[] = [1, 2, 3];

2.数组泛型 Array<元素范例>

let list: Array<number> = [1, 2, 3];

3.元组 Tuple

示意一个已知元素数目和范例的数组

let x: [string, number] = ['1', 2]

4.接口定义范例

interface NumberArray {
  [index: number]: number;
}
let x: NumberArray = [1, 1, 2, 3, 5];

1.4 函数范例

TypeScript 中函数范例有多种定义体式格局，排列以下：

1.函数声明中范例定义

function add(x: number, y: number): number {
  return x + y;
}

2.函数表达式中范例定义

let myAdd = function(x: number, y: number): number {
  return x + y;
}

3.箭头函数中范例定义

let myAdd = (x: number, y: number): number => {
  return x + y;
}

4.接口定义范例

interface Add {
  (x: number, y: number): number;
}
let myAdd: Add = function(num1, num2) {
  return num1 + num2;
}

1.5 对象范例

TypeScript 中对象范例有多种定义体式格局，排列以下：

1.object

let obj: object = {test: 1};

2.接口定义范例

interface SquareConfig {
  color: string;
  width: number;
}
let newSquare: SquareConfig = {
  color: "white",
  width: 100
};

1.6 团结范例

团结范例示意值为多种范例中的一种，用 | 举行范例团结

1.7 泛型

泛型指在定义函数、接口、类时，不预先指定范例，在运用时再指定。泛型经由过程在函数、接口、类变量名后运用 <> 定义。（范例断言中 <> 位于变量名前）

function identity<T>(arg: T): T {
    return arg;
}

identity<string>('myString')

2. 范例操纵

2.1 范例推论

在没有指定范例时，Typescript 会依据范例推论推断出范例。

// 推论范例为 number
let x = 1;

// 推论范例为 any
let y;

2.2 范例断言

范例断言指对变量指定一个比如今范例更明白的范例。

范例断言有两种情势。

1.”尖括号”语法：

// 声明 someValue
let someValue: any = "this is a string";

// 对 someValue 范例断言，范例为 string，比本来 any 范例更明白
let strLength: number = (<string>someValue).length;

2.”as” 语法（在 tsx 中只能运用 as 语法，由于 jsx 中 <> 会和”尖括号”语法殽杂）

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

2.3 范例别号

范例别号不会新建范例，是经由过程新建名字来援用已有范例。经由过程 type 举行别号定义。

type Name = string;
let x: Name = '1';

3. 类和接口

3.1 类

类的观点是 ES6 中提出的，类的实质是组织函数的语法糖，经由过程 class 来建立。

TypeScript 中供应了 public、private 和 protected 三种润饰符，离别代表属性或要领是共有的、私有的、受庇护的。

TypeScript 中 static 润饰符润饰属性或要领，代表属性或要领是静态的，即无需实例化，能够直接经由过程类挪用。

TypeScript 中 readonly 润饰符润饰属性，代表属性只读，即初始化以后不可修正。

3.2 笼统类

笼统类指对类或类中部份要领举行笼统，作为其他类继续的基类，不能直接实例化。派生类必需完成笼统类中的笼统要领。

经由过程 abstract 关键字定义笼统类和笼统类内部定义的笼统要领，extends 来继续类。

abstract class Animal {
  // 必需在派生类中完成
  abstract makeSound(): void;
  // 无须在派生类中完成
  move(): void {
    console.log('roaming the earch...');
  }
}

class Dog extends Animal {
  makeSound (): void {
    console.log('barking');
  }
}

3.3 接口

接口和笼统类有些相似，接口是对属性和要领的笼统，不能直接实例化。接口和笼统类的区分以下：

  1. 接口是 100% 的笼统，不能含有详细的完成。笼统类能够包含详细完成
  2. 一个类只能继续一个类，然则能够完成多个接口。接口能够继续接口、类。

接口经由过程 interface 定义，implements 完成。

interface ClockInterface {
  alert(): void;
}

class Clock implements ClockInterface {
  alert() {
    console.log('Clock alert');
  }
}

4. 其他

4.1 内置对象

TypeScript 依据 JavaScript 供应了相干的内置对象，如 Date、Document、HTMLElement、Event、NodeList 等。详细可参考定义文件。

4.2 声明文件

以 npm 包为例，将第三方包装置到 TypeScript 项目时，须要声明文件，声明该第三方包中导出内容的相干范例，如许 TypeScript 才举行编译搜检。声明文件以 .d.ts 末端的文件，有以下3个泉源：

1.@types
TypeScript 2.0 默许检察 ./node_modules/@types 文件夹，猎取模块的范例定义。比方能够经由过程装置 npm install --save-dev @types/node 猎取 node 范例相干声明。该开源项目 DefinitelyTyped 现在由社区举行保护。

2.第三方包已有声明文件
第三方包已有声明文件，则不须要再分外装置包，能够直接运用。一般经由过程 package.json 中的 types 字段，或许 index.d.ts 声明文件举行声明。

3.誊写声明文件
当前面两种要领都无效时，能够在项目中誊写声明文件，如建立 types 目次，用来治理声明文件。声明文件写法能够参考 DefinitelyTyped 中相干示例，以下为个中一个示例：

// 声明 createABigTriangle 要领
declare function createABigTriangle(gl: WebGLRenderingContext): void;

// 第三方库是 commonjs 范例的，导出声明运用 export= 这类语法
// 第三方库是 ES6 范例的，导出声明运用 export default 和 export 这类语法
export = createABigTriangle;

本文首发于个人博客：https://www.aquatalking.com/b…

（完）

    原文作者：阿夸AQUA
    原文地址: https://segmentfault.com/a/1190000018480120
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞