
TypeScript
文章平均质量分 69
TypeScript
Distance^o^
这个作者很懒,什么都没留下…
展开
-
20-声明合并
声明合并如果定义了两个相同名字的函数、接口或类,那么它们会合并成一个类型:函数的合并§之前学习过,我们可以使用重载定义多个函数类型:function reverse(x: number): number;function reverse(x: string): string;function reverse(x: number | string): number | string { if (typeof x === 'number') { return Number(x原创 2021-10-19 10:04:03 · 155 阅读 · 0 评论 -
18-类与接口
18-类与接口之前学习过,接口(Interfaces)可以用于对「对象的形状(Shape)」进行描述。这一章主要介绍接口的另一个用途,对类的一部分行为进行抽象。类实现接口§实现(implements)是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。举例来说,门是一个类,防盗门是门的子类。如果防盗门有一个报警器的功能,原创 2021-10-19 10:02:55 · 139 阅读 · 0 评论 -
17- 类
类传统方法中,JavaScript 通过构造函数实现类的概念,通过原型链实现继承。而在 ES6 中,我们终于迎来了 class。TypeScript 除了实现了所有 ES6 中的类的功能以外,还添加了一些新的用法。这一节主要介绍类的用法,下一节再介绍如何定义类的类型。类的概念§虽然 JavaScript 中有类的概念,但是可能大多数 JavaScript 程序员并不是非常熟悉类,这里对类相关的概念做一个简单的介绍。类(Class):定义了一件事物的抽象特点,包含它的属性和方法对象(Objec原创 2021-10-19 10:02:36 · 357 阅读 · 0 评论 -
16-枚举
枚举枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。简单的例子§枚举使用 enum 关键字来定义:enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射:enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};console.log(Days["Sun"] === 0); // truecon原创 2021-10-19 10:01:54 · 147 阅读 · 0 评论 -
15-字符串字面量类型
字符串字面量类型字符串字面量类型用来约束取值只能是某几个字符串中的一个。简单的例子§type EventNames = 'click' | 'scroll' | 'mousemove';function handleEvent(ele: Element, event: EventNames) { // do something}handleEvent(document.getElementById('hello'), 'scroll'); // 没问题handleEvent(doc原创 2021-10-19 10:01:14 · 270 阅读 · 0 评论 -
14-类型别名
类型别名类型别名用来给一个类型起个新名字。简单的例子§type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else { return n()原创 2021-10-19 10:00:41 · 124 阅读 · 0 评论 -
13-内置对象
内置对象JavaScript 中有很多内置对象,它们可以直接在 TypeScript 中当做定义好了的类型。内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指 ECMAScript 和其他环境(比如 DOM)的标准。ECMAScript 的内置对象§ECMAScript 标准提供的内置对象有:Boolean、Error、Date、RegExp 等。我们可以在 TypeScript 中将变量定义为这些类型:let b: Boolean = new Boolean(1);原创 2021-10-19 10:00:14 · 141 阅读 · 0 评论 -
12-声明文件
声明文件当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。新语法索引§由于本章涉及大量新语法,故在本章开头列出新语法的索引,方便大家在使用这些新语法时能快速查找到对应的讲解:declare var 声明全局变量declare function 声明全局方法declare class 声明全局类declare enum 声明全局枚举类型declare namespace 声明(含有子属性的)全局对象interface 和 type 声明全局类型expor原创 2021-10-19 09:59:36 · 217 阅读 · 0 评论 -
11-类型断言
类型断言类型断言(Type Assertion)可以用来手动指定一个值的类型。语法§值 as 类型或<类型>值在 tsx 语法(React 的 jsx 语法的 ts 版)中必须使用前者,即 值 as 类型。形如 `` 的语法在 tsx 中表示的是一个 ReactNode,在 ts 中除了表示类型断言之外,也可能是表示一个泛型。故建议大家在使用类型断言时,统一使用 值 as 类型 这样的语法,本书中也会贯彻这一思想。类型断言的用途§类型断言的常见用途有以下几种:将一个联合原创 2021-10-19 09:58:48 · 372 阅读 · 0 评论 -
10-函数的类型
函数的类型函数是 JavaScript 中的一等公民函数声明§在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression):// 函数声明(Function Declaration)function sum(x, y) { return x + y;}// 函数表达式(Function Expression)let mySum = function (x, y) {原创 2021-10-18 10:10:55 · 148 阅读 · 0 评论 -
09-数组的类型
数组的类型在 TypeScript 中,数组类型有多种定义方式,比较灵活。「类型 + 方括号」表示法§最简单的方法是使用「类型 + 方括号」来表示数组:let fibonacci: number[] = [1, 1, 2, 3, 5];数组的项中不允许出现其他的类型:let fibonacci: number[] = [1, '1', 2, 3, 5];// Type 'string' is not assignable to type 'number'.数组的一些方法的参数也会根据数原创 2021-10-18 10:10:19 · 175 阅读 · 0 评论 -
08-接口
对象的类型——接口在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。什么是接口§在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。简单的例子§interface Person { name: string;原创 2021-10-18 10:09:48 · 150 阅读 · 0 评论 -
07-联合类型 2021-10-18
联合类型联合类型(Union Types)表示取值可以为多种类型中的一种。简单的例子§let myFavoriteNumber: string | number;myFavoriteNumber = 'seven';myFavoriteNumber = 7;let myFavoriteNumber: string | number;myFavoriteNumber = true;// index.ts(2,1): error TS2322: Type 'boolean' is not as原创 2021-10-18 10:08:22 · 132 阅读 · 0 评论 -
06-类型推断
类型推论如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。什么是类型推论§以下代码虽然没有指定类型,但是会在编译的时候报错:let myFavoriteNumber = 'seven';myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.事实上,它等价于:let myF原创 2021-10-18 10:07:23 · 122 阅读 · 0 评论 -
05-任意值
任意值任意值(Any)用来表示允许赋值为任意类型。什么是任意值类型§如果是一个普通类型,在赋值过程中改变类型是不被允许的:let myFavoriteNumber: string = 'seven';myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.但如果是 any 类型,则允许被赋值为任意类型。let myFavoriteNumber原创 2021-10-18 10:06:36 · 272 阅读 · 0 评论 -
03-helloworld
Hello TypeScript我们从一个简单的例子开始。将以下代码复制到 hello.ts 中:function sayHello(person: string) { return 'Hello, ' + person;}let user = 'Tom';console.log(sayHello(user));然后执行tsc hello.ts这时候会生成一个编译好的文件 hello.js:function sayHello(person) { return 'He原创 2021-10-18 10:06:10 · 87 阅读 · 0 评论 -
04-原始数据类型
原始数据类型JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。本节主要介绍前五种原始数据类型在 TypeScript 中的应用。布尔值§布尔值是最基础的数据类型,在 TypeScript 中,使用 boolean 定义布尔值类型:let isDone: boolean = false;// 编译通过原创 2021-10-18 10:05:32 · 154 阅读 · 0 评论 -
02-安装TypeScript 2021-10-18
安装 TypeScriptTypeScript 的命令行工具安装方法如下:npm install -g typescript以上命令会在全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。编译一个 TypeScript 文件很简单:tsc hello.ts我们约定使用 TypeScript 编写的文件以 .ts 为后缀,用 TypeScript 编写 React 时,以 .tsx 为后缀。tsc --outFile ./dist/abc.js hello.原创 2021-10-18 10:04:04 · 87 阅读 · 0 评论 -
01-什么是typescript
什么是 TypeScript首先,我对 TypeScript 的理解如下:TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上。其次引用官网的定义:TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.原创 2021-10-18 10:00:13 · 119 阅读 · 0 评论