资讯专栏INFORMATION COLUMN

一篇文章带你过一遍 TypeScript

AlphaWallet / 3520人阅读

摘要:泛型通过在函数接口类变量名后使用定义。抽象类可以包括具体实现一个类只能继承一个类,但是可以实现多个接口。该开源项目目前由社区进行维护。通常通过中的字段,或者声明文件进行声明。

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 = [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(arg: T): T {
    return arg;
}

identity("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 = (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 中提供了 publicprivateprotected 三种修饰符,分别代表属性或方法是共有的、私有的、受保护的。

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 接口

接口和抽象类有些类似,接口是对属性和方法的抽象,不能直接实例化。接口和抽象类的区别如下:

接口是 100% 的抽象,不能含有具体的实现。抽象类可以包括具体实现

一个类只能继承一个类,但是可以实现多个接口。接口可以继承接口、类。

接口通过 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...

(完)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109155.html

相关文章

  • STM32入门学习经验总结

    摘要:严格地说,应该是模仿实验。为什么觉得无从下手,看资料没有头绪经验总结看资料需要计划耐心和速度这里所谓的资料包括书籍文档。建议有报销条件的同学自己设计一块板子学习。无法报销的同学,可以选购一款开发板学习。 STM32系列基于专为要求高性能、低成本、低功耗的嵌入式应用专门设计的ARMCortex...

    biaoxiaoduan 评论0 收藏0
  • vue + typescript 进阶篇

    摘要:进阶篇本文是继新项目起手式之后的进阶踩坑配置,所以推荐先行阅读前文完整阅读完之后,基本可以顺利在新项目中使用了另外特别注意不推荐在已有项目上强加,因写法的组件跟之前的组件不兼容,若上的话需要修改之前写的组件配置完整版可参考,若没配置出来 vue + typescript 进阶篇 本文是继 Vue + TypeScript 新项目起手式 之后的进阶+踩坑配置,所以推荐先行阅读前文 ...

    lemanli 评论0 收藏0
  • 【译】使用TypeScript两年后-值得吗?

    摘要:弄了一个持续更新的笔记,可以去看看,链接地址此篇文章的地址使用两年后值得吗基础笔记的地址可以也可以。使用,你可以使用抽象类等功能。有关抽象类的更多信息支持,和方法,只读属性。 弄了一个持续更新的github笔记,可以去看看,链接地址:Front-End-Basics 此篇文章的地址:使用TypeScript两年后-值得吗? 基础笔记的github地址:https://githu...

    RyanQ 评论0 收藏0
  • Deno 并不是下代 Node.js

    摘要:长文预警字,图。开发并不是因为,也不是为了取代。不知道从官方介绍来看,可以认为它是下一代是如何脑补出来的。只是一个原型或实验性产品。所以,不是要取代,也不是下一代,也不是要放弃重建生态。的目前是要拥抱浏览器生态。 这几天前端圈最火的事件莫过于 ry(Ryan Dahl) 的新项目 deno 了,很多 IT 新闻和媒体都用了标题:下一代 Node.js。这周末读了一遍 deno 的源码,...

    mmy123456 评论0 收藏0
  • 小光光谈前端

    摘要:这个问题应该是百度或者知乎都能知道答案的,以上是自己亲身学习的一些途径方便少走一点弯路入门。 问题1:前端的学习路线 基础的html,css,js,推荐慕课网免费课程:前端工程师路径,极客学院免费课程:前端工程师路径 大概刷过就可以了,不用死记硬背某个知识点,css跟js还需要加深学习的,在实战过程中不懂就去查文档 基础的ps切图能力 慕课网ps基础课程 拥有自己的虚拟主机 传送...

    canopus4u 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<