【JavaScript】TypeScript

TypeScript

TypeScript 介绍

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.（TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。）

TypeScript 是由 Microsoft 开发的一款开源的编程语言。
TypeScript 时 JavaScript 的超集，遵循最新的 ES6、ES5 规范。TypeScript 扩展了 JavaScript 的语法。
TypeScript 更像后端 java、C#这样的面向对象语言，可以让 js 开发大型企业项目。
谷歌也在大力支持 TypeScript 的推广，谷歌的 Angular2.x+就是基于 TypeScript 语法。
最新的 Vue、React 也可以集成 TypeScript。
Nodejs 框架 Nestjs、midway 中用的就是 TypeScript 语法。

使用 TypeScript 的优势

TypeScript 增加了代码的可读性和可维护性
- 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
- 可以在编译阶段就发现大部分错误，这总比在运行时候出错好
- 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等
TypeScript 非常包容
- TypeScript 时 JavaScript 的超集，.js文件可以直接重命名为.ts即可
- 即使不显式的定义类型，也能够自动做出类型推论
- 可以定义从简单到复杂的几乎一切类型
- 即使 TypeScript 编译报错，也可以生成 JavaScript 文件（如果要在报错的时候终止 js 文件的生成，可以在tsconfig.json中配置noEmitOnError即可）
- 兼容第三方库，即使第三方库不使用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取
TypeScript 拥有活跃的社区
- 大部分第三方库都有提供给 TypeScript 的类型定义文件
- Google 开发的 Angular2 就是使用 TypeScript 编写的
- TypeScript 拥抱了 ES6 规范，也支持部分 ESNext 草案的规范

安装

通过 npm 安装 npm install typescript

通过 cnpm 安装 cnpm install typescript

通过 yarn 安装 yarn global add typescript

运行（编译）

tsc <fileName>

配置 vscode 自动编译.ts 文件

运行tsc-init命令生成 tsconfig.json 文件，
修改生成.js 文件的路径 "outDir": "./js"
依次点击终端 --> 运行任务 --> typescript --> tsc:监视- ... - tsconfig.json（老版本 vscode 点击：任务 --> 运行任务 --> tsc:监视- ... - tsconfig.json）然后就可以自动生成代码了

TypeScript 中的数据类型

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

TypeScript 中为了使编写的代码更规范，更有利于维护，增加了类型校验，在 TypeScript 中主要提供了以下的数据类型

布尔类型（boolean）
数字类型（number）
字符串类型（string）
数组类型（array）
元组类型（tuple）
枚举类型（enum）
任意类型（any）

如果是一个普通类型，在赋值过程中改变类型是不被允许的，但如果是 any 类型，则允许被赋值为任意类型。在任意值上访问任何属性都是允许的，也允许调用任何方法。可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

let myFavoriteNumber: string = 'seven'
myFavoriteNumber = 7
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

let myFavoriteNumber: any = 'seven'
myFavoriteNumber = 7

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

let something
something = 'seven'
something = 7

something.setName('Tom')

等价于

let something: any
something = 'seven'
something = 7

something.setName('Tom')

null 和 undefined（与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量）

// 这样不会报错
let num: number = undefined

// 这样也不会报错
let u: undefined
let num: number = u

// 而 void 类型的变量不能赋值给 number 类型的变量：
let u: void
let num: number = u
// Type 'void' is not assignable to type 'number'.

void 类型
never 类型

联合类型

let myFavoriteNumber: string | number
myFavoriteNumber = 'seven'
myFavoriteNumber = 7

let myFavoriteNumber: string | number
myFavoriteNumber = true
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
//   Type 'boolean' is not assignable to type 'number'.

联合类型使用 | 分隔每个类型。
这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型。

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

let myFavoriteNumber = 'seven'
myFavoriteNumber = 7
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

等价于

let myFavoriteNumber: string = 'seven'
myFavoriteNumber = 7
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

对象的类型--接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

interface Person {
  name: string
  age: number
}

let tom: Person = {
  name: 'Tom',
  age: 25,
}

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。

定义的变量比接口少了一些属性是不允许的：

interface Person {
  name: string
  age: number
}

let tom: Person = {
  name: 'Tom',
}
// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的：

interface Person {
  name: string
  age: number
}

let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male',
}
// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性

interface Person {
  name: string
  age?: number
}

let tom: Person = {
  name: 'Tom',
}

interface Person {
  name: string
  age?: number
}

let tom: Person = {
  name: 'Tom',
  age: 25,
}

可选属性的含义是该属性可以不存在。

这时仍然不允许添加未定义的属性：

interface Person {
  name: string
  age?: number
}

let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male',
}
// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式

interface Person {
  name: string
  age?: number
  [propName: string]: any
}

let tom: Person = {
  name: 'Tom',
  gender: 'male',
}

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

interface Person {
  readonly id: number
  name: string
  age?: number
  [propName: string]: any
}

let tom: Person = {
  id: 89757,
  name: 'Tom',
  gender: 'male',
}
tom.id = 9527
// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

interface Person {
  readonly id: number
  name: string
  age?: number
  [propName: string]: any
}

let tom: Person = {
  name: 'Tom',
  gender: 'male',
}
tom.id = 89757
// index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
//   Property 'id' is missing in type '{ name: string; gender: string; }'.
// index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，报错信息有两处，第一处是在对 tom 进行赋值的时候，没有给 id 赋值。

第二处是在给 tom.id 赋值的时候，由于它是只读属性，所以报错了。

其余请参考《TypeScript 入门教程》--阮一峰

posted @ 2020-05-13 16:46 [ABing] 阅读(126) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ABing

MAKE SOMETHING EPIC