02.TypeScript 语法进阶

最新推荐文章于 2024-08-21 00:42:31 发布
最新推荐文章于 2024-08-21 00:42:31 发布
阅读量606 收藏
点赞数 2
分类专栏： TypeScript 文章标签： typescript 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45196863/article/details/124952125
版权

TypeScript 语法进阶

1. TypeScript 中的配置文件

1.1 初始化 TS 项目和配置项

初始化
tsc --init

执行后会在当前目录生成 TS 配置文件 tsconfig.json。

指定文件夹/文件编译

只有直接使用 tsc 编译，不指明编译的文件，才会根据配置文件的配置项来进行编译。

如果 tsc 指定要编译的文件，如 tsc xxx.ts，就不会去看配置项直接编译。

注意下，ts-node 是会看配置项进行编译的。

如果要指定编译的文件，又要用配置文件的配置项，在配置文件中配置要编译/不想编译的 TS 文件，然后 tsc 即可。

{
  "include": [
    // src 下的任何目录下的任何文件
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [...],
  "compilerOptions": {
    ......
}
compilerOptions

常用的配置：

"removeComments": true // 编译后去除注释

"noImplicitAny": true // 不允许 ts 有 any 类型，避免成为 AnyScript 有效方式

"strictNullChecks": true // null 校验，变量不能被赋值为 null

"rootDir": "./",  // 指定代码的根文件夹

"outDir": "./build",  // 指定编译的文件放在哪个文件夹

"incremental": true, // 只编译没编译后的内容

"allowJs": true,  // 支持编译 JS，适用于 TS 项目里有 JS 文件的情况
"checkJs": true,  // 支持 JS 语法检查

2. 联合类型和类型保护

联合类型

如果输入的类型可以是两种类型，那就用到了联合类型：

interface Bird {
  fly: boolean;
  sing: () => {};
}

interface Dog {
  fly: boolean;
  bark: () => {};
}

function trainAnimal(animal: Bird | Dog) {
  // animal.sing 会报错，因为 animal 并不一定是 Bird 的实例
}

联合类型会对后边 TS 的静态分析造成一定的问题，因此需要人工操作进行类型保护。

例如，上面的代码比较难受了，只会提示 fly，其他的两个方法则会报错，因为万一是 Bird 调用的 bark 方法就肯定执行不了了。

通过断言进行类型保护

用断言，确信此时的变量确信为 Dog 或者 Bird。这就是类型保护，确保代码不再报错。

function trainAnimal(animal: Bird | Dog) {
  // 会飞是鸟，否则是狗
  if (animal.fly) {
    (animal as Bird).sing();
  } else {
    (animal as Dog).bark();
  }
}
in 语法进行类型保护

判断该实例内是否有某种特定方法

function trainAnimal(animal: Bird | Dog) {
  // 有 sing 是 Bird，否则是 Dog
  if ("sing" in animal) {
    (animal as Bird).sing();
  } else {
    (animal as Dog).bark();
  }
}
typeof 语法进行类型保护

以下的情况，如果参数可能是字符串也有可能是数字的情况下，TS 会因为不知道如何进行加法如何处理而报错。

function add(first: string | number, second: string | number) {
  return first + add; // 会报错
}

用 typeof 来判断基本数据类型，可以避免这个问题：

function add(first: string | number, second: string | number) {
  // 如果至少有一个变量是字符串类型，则进行拼接即可
  if (typeof first === "string" || typeof second === "string") {
    return `${first}${second}`;
  }
  return first + second;
}
instanceof 语法进行类型保护

JS 基础，就不多说了。typeof 适用于基础类型判断，而 instance 适用于引用类型判断。

class numberObj {
  public count: number;

  constructor(count: number) {
    this.count = count;
  }
}

function add2(first: object | numberObj, second: object | numberObj) {
  if (first instanceof numberObj && second instanceof numberObj) {
    return first.count + second.count;
  }
  return 0;
}

3. Enum 枚举类型

现在有一个需求，根据状态码标识返回一个结果，方法可以这样写：

function getResult(status: number) {
  if (status === 0) {
    return "offline";
  } else if (status === 1) {
    return "online";
  } else if (status === 2) {
    return "deleted";
  }
  return "error";
}

但是这方法未免太憨了，可读性很低，而且用数字容易搞混。这时就需要用到枚举类型。

enum Status {
  OFFLINE,
  ONLINE,
  DELETED,
}

function getResult(status: number) {
  if (status === Status.OFFLINE) {
    return "offline";
  } else if (status === Status.ONLINE) {
    return "online";
  } else if (status === Status.DELETED) {
    return "deleted";
  }
  return "error";
}

const result = getResult(0);
console.log(result);

这里的返回结果为 offline，因为默认值为 index。index 为 0 的时候是 OFFLINE。当然，枚举成员的值可以自己设置。

enum Status {
  OFFLINE = 4,
  ONLINE = 5,
  DELETED = 6,
}

function getResult(status: number) {
  if (status === Status.OFFLINE) {
    return "offline";
  } else if (status === Status.ONLINE) {
    return "online";
  } else if (status === Status.DELETED) {
    return "deleted";
  }
  return "error";
}

const result = getResult(5);
console.log(result); // 返回 online

还有一个用法，反查枚举里的成员:

enum Status {
  OFFLINE = 4,
  ONLINE = 5,
  DELETED = 6,
}

console.log(Status[6]); // DELETED

4. 函数泛型

泛型指的是泛指的类型，等调用函数的时候指定类型才知道参数要什么类型的。说土一点，类型是一个变量，调用的时候需要传入类型。

function join<T>(first: T, second: T): T {
  return `${first}${second}`;
}

join<string>("1", "1");

如上代码，上面的函数的类型是不确定的，但是可以确定两个参数的类型必须要一样。这时候用泛型就很合适了，两个参数都是 T 泛型，但是 T 是什么，等函数调用的时候才知道。

泛型可以继续加工：

// 参数类型填 T[] 也
function map<T>(params: Array<T>) {
  return params;
}

map<string>(["123"]);

这里传入的参数必须是泛型数组。

函数泛型可以指定多个：

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}

// TS 能推断出传入的参数是否正确
join(1, "1");

5. 类中的泛型

同样的，不仅函数有泛型，类也有泛型。毕竟类中也需要存储数据结构。

示例代码如下：

class DataManager<T> {
  constructor(private data: T[]) {}

  getItem(index: number): T {
    return this.data[index];
  }
}

const data= new DataManager<string>(["hello", "world"]);

不确定存入的类型是啥样的，但是确信 data 里的元素只能是同种类型，类的泛型就用得上了。

泛型继承

现在有个需求，要获取 item 里的 name 属性，那么表明了，传入的参数必须是携带有 name 属性的对象，那么搭配泛型应该怎么解决呢？

interface Item {
  name: string;
}

class DataManager<T extends Item> {
  constructor(private data: T[]) {}

  getItemName(index: number): string {
    return this.data[index].name;
  }
}

const data= new DataManager([{name: "sjh"}]);

声明一个 Item 接口，指明必须要有 name 属性，然后 T 继承 Item 后，T 也必须要有 name 属性了。

6. 命名空间 namespace

过多的全局变量会使得代码难以维护，如以下代码：

class Header {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "this is a header";
    document.body.appendChild(elem);
  }
}

class Content {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "this is a content";
    document.body.appendChild(elem);
  }
}

class Footer {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "this is a footer";
    document.body.appendChild(elem);
  }
}

class Page {
  constructor() {
    new Header();
    new Content();
    new Footer();
  }
}

new Page();

全局真正用到的类就只有 Page，但是 Header、Content、Footer 都变成了全局变量。

这里就需要有模块化的思想，每个模块相互独立，不会生成全局变量。

// 声明一个命名空间
namespace Home {
  class Header {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "this is a header";
      document.body.appendChild(elem);
    }
  }

  class Content {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "this is a content";
      document.body.appendChild(elem);
    }
  }

  class Footer {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "this is a footer";
      document.body.appendChild(elem);
    }
  }

  // 只想暴露 Page 到外界
  export class Page {
    constructor() {
      new Header();
      new Content();
      new Footer();
    }
  }
}

new Home.Page();

7. 使用 Parcel 打包 TS 代码

Parcel 我们可以当做是轻量版的 webpack，将写的兼容性较差的代码转化为浏览器可以理解的 JS 文件。

安装 parcel：

yarn global add parcel-bundler

在 scripts 里用 Parcel 运行 html 文件：

  "scripts": {
    "test": "parcel ./src/index.html"
  }

表示用 Parcel 对 HTML 的内容进行编译，使得浏览器能够理解。此时，HTML 可以直接引入 TS 文件而不会报错。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./page.ts"></script>
</head>

<body>
</body>

</html>

运行的时候会提供一个服务器地址来显示网页：

8. 描述文件中的全局类型

写 .d.ts 类型定义文件，用来适配 JS 库。

例如，现在在 TS 文件里写 jQuery 代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="./page.ts"></script>
</head>

<body>
</body>

</html>

// page.ts
$(function () {
  alert(123);
});

用 Parcel 来运行，是能够成功运行代码的。

但是问题是，因为是通过 JS 文件引入，TS 不能够正确的识别。

image-20220524165030100

此时不靠安装，自己手动写一个类型定义文件，帮助 TS 理解 jQuery。

创建 jquery.d.ts 类型定义文件。

定义全局变量
declare var $: (params: () => void) => void;

表示有一个全局变量 $，是一个函数，接收一个返回为空的函数，返回为空。

现在下面的的代码就不会报错了，因为可以识别。

$(function () {
  alert(123);
});
定义全局函数
declare function $(params: () => void): void;

定义一个全局函数，意思和上面的一样。

函数的重载

jQuery 用 $ 函数可以获取节点，并且链式调用：

$(function () {
  $("body").html("<div>123</div>")
});

此时，$ 函数需要接收一个 string 类型。因此得多写一个声明来适配。

declare function $(params: () => void): void;

declare function $(params: string): {
  html: (string) => {};
};

第二个声明表示，$ 函数接收一个 string 类型，返回一个对象，里边有 html 方法，html 方法里边需要接收一个 string 类型。

代码优化

链式调用方法一股脑放在函数声明里可读性较差，链式调用的灵魂也没表示出来，另外，参数名也得写的形象化一点。因此可以这样写：

interface JqueryInstance {
  html: (html: string) => JqueryInstance;
}

// 函数重载
declare function $(readyFunc: () => void): void;
declare function $(selector: string): JqueryInstance;
interface 实现函数重载的定义
interface JqueryInstance {
  html: (html: string) => JqueryInstance;
}

interface JQuery {
  (readyFunc: () => void): void;
  (selector: string): JqueryInstance;
}

declare var $: JQuery;
命名空间定义对象，以及和类的类型定义方法

jquery 比较原生的写法如下：

$(function () {
  new $.fn.init();
});

如果要让 TS 识别，可以这样写：

declare function $(readyFunc: () => void): void;

declare namespace $ {
  namespace fn {
    class init {}
  }
}

表示有个 $，里面有 fn，fn 里有 init 的构造函数可以 new 出一个对象。

9. 模块代码的类型描述文件

现在用 yarn add jquery 的方式来安装 jQuery，此时就用 ES6 的 import 语法直接引入 jQuery 即可。

import $ from "jquery";

$(function () {
  new $.fn.init();
});

现在类型描述文件的写法就得变化了。

// ES6 模块化
declare module "jquery" {
  interface JqueryInstance {
    html: (html: string) => JqueryInstance;
  }

  function $(readyFunc: () => void): void;
  function $(selector: string): JqueryInstance;

  namespace $ {
    namespace fn {
      class init {}
    }
  }

  export = $;
}

里边代表了 jquery 模块的类型描述，并暴露了 $。

10. 泛型中 keyof 语法的使用

interface Person {
  name: string;
  age: number;
  gender: string;
}

class Teacher {
  constructor(private info: Person) {}
  getInfo(key: string) {
    // 这一行 TS 报错了
    return this.info[key];
  }
}

const teacher = new Teacher({
  name: "John",
  age: 18,
  gender: "male",
});

const info = teacher.getInfo("name");
console.log(info);

这个代码是能正常运行的，但是 TS 会报错，原因在于，getInfo 传进来的参数 key 并不能保证是 Person 接口内指定的属性。TS 认为这样是不安全的。

泛型结合 keyof 解决问题
getInfo<T extends keyof Person>(key: T): Person[T]

用 keyof 对 Person 里的属性进行遍历。

等价于：

getInfo<T extends "name">(key: T): Person[T] // T = "name"
getInfo<T extends "age">(key: T): Person[T] // T = "age"
getInfo<T extends "gender">(key: T): Person[T] // T = "gender"

此时的 T 是一个确切的字符串，避免了风险。现在可以得知，类型可以精确为固定的字符串。

总而言之，功能是，keyof 要求参数是指定的 interface 里面的属性。

John是橘红
关注
专栏目录
TypeScript 全面进阶指南
sybh的博客
10-21 1117
从类型编程到工程实践， 迈向 TypeScript 高级玩家 切图小能手 @ 阿里巴巴
TypeScript进阶
01-08
类型断言 类型断言（Type Assertion）是开发者手动指定一个值的类型： 值或值 as 类型 在 tsx 语法（React 的 jsx 语法的 ts 版）中必须使用值 as 类型。 例如：将一个联合类型的变量指定为一个更加具体的类型(但不能指定为联合类型中不存在的类型)： // 使用联合类型时，必须使用这些类型共有的属性才行，但使用类型断言使其确定为某一种类型，就没有了此限制。 function getLength(something: string | number): number { if ((something).length) { //something类型断言
TypeScript 进阶
Grey的博客
11-25 429
枚举类型 enum，枚举。它用来描述一个值，该值只能是 一组命名常量 中的一个 没有type之前，用枚举比较多，现在用的少了。枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值 // 定义枚举类型 enum Direction { Up, Down, Left, Right } // 使用枚举类型 function changeDirection(direction: Direction) { console.log(direction) } // 调用函数时，需要.
ts 自动化编译
最新发布
weixin_64684095的博客
08-21 391
生成一个 tsconfig.json 的配置文件，其中包含很多编译时的配置tsc --init。
typescript 进阶
06-22 390
泛型 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。 简单理解 实现一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值： function createArray(length: number, value: any): Array<any> { let result = []; for (let i = 0; i < length; i++) {
TypeScript极速完全进阶指南视频课程
06-14
TypeScript是JavaScript的加强版，它给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。 不过，你不必担心TypeScript跟浏览器不兼容，因为在编译时，它产生的都是JavaScript代码...
TypeScript进阶语法
七元八元
12-14 1721
初始命令 初始化项目： tsc --init 会创建一个tsconfig.json配置文件。 编译ts文件： tsc demo.ts 将.ts文件转换成demo.js文件。 执行tsc demo.ts并不会读取tsconfig.json文件配置，只有执行tsc才会根据配置文件信息编译ts文件 tsconfig.json配置项： 配置 功能 removeComments 移除注释 noImplicitAny false ：不必指定所有数据类型 (在strict为false的情况下).
Packt.TypeScript.for.Angular.Developers (含源代码)
02-06
总之，《Packt.TypeScript.for.Angular.Developers》是Angular开发者学习TypeScript的宝贵资源，它不仅讲解了TypeScript的基本语法，还深入探讨了在Angular框架中使用TypeScript的最佳实践。配合源代码，读者将能够...
TypeScript进阶二
青鸠的博客
12-15 488
TypeScript进阶二
TypeScript 进阶(泛型)
WangYong_Z的博客
10-11 257
一、类型别名 概念：类型别名用来给一个类型起个新名字，使用type创建类型别名。 例子： type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === 'string') { retur...
Typescript进阶和总结
m0_55980258的博客
12-05 177
Typescript进阶
Typescript （四）进阶
qw2319205chu的博客
04-04 226
字符串字面量类型 type EventNames = 'click' | 'scroll' | 'mousemove'; function handleEvent(ele: Element, event: EventNames) { // do something } handleEvent(document.getElementById('hello'), 'scroll'); // ...
体系化学习Node.js：进阶指南与资源推荐
[体系化学习Node.js：进阶指南与资源推荐](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12f9c7d7e15f4cd5982910f4bc750c4d~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp) # 1. Node.js 基础** Node.js 是...
TS03 TypeScript进阶
多啦的博客
12-20 565
TypeScript进阶
Typescript 进阶使用
mjzhang1993的博客
08-09 354
说明 去年开始入坑 TypeScript , 在这之前公司的项目中用的时 flow, 同样都是做类型检查，明显 TypeScript 更加严格，且社区支持更好一些。 上手 TypeScript 初期会有些不习惯，但是使用一段时间后会发现，TS 带来的类型检查、编辑器提示是真的方便，我也从 “只能写一些简单的类型组合” 慢慢的开始可以使用一些”进阶的技巧“ 原本打算梳理一下自己的学习所得，但是发现这篇文章（TypeScript 的另一面：类型编程）写的很详细，并且很有用，我就不再献丑了，下面文章仅记
三、TypeScript进阶一
weixin_42710036的博客
10-13 493
TypeScript进阶一
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值