You are here
宁皓网 TypeScript
TypeScript 赋予 JavaScript 超能力。
封面摄影：Timothy Poulton
来自 https://ninghao.net/course/6298#toc
准备
1)安装 TypeScript 编译工具与配置 Atom 编辑器
我们需要把 TypeScript 代码编译成普通的 JavaScript 的代码 .. 需要用到一个命令行 .. 先去安装一下这个命令行工具 .. 打开系统的终端 .. 确定我们的系统上安装了 Node .. 还有 Npm 以后 .. 执行一下 npm install 安装一下 typescript ... 加上一个 --global .. 表示要在全局范围安装一下它 ..
npm install typescript --global
完成以后我们就可以在任何地方使用一个叫 tsc 的命令 ..
tsc --help
它可以帮我们把 TypeScript 代码编译成普通的 JavaScript ..
下面去创建一个目录，在里面可以试一下 TypeScript 的用法 .. 在我的桌面上 .. 新建一个目录 .. 名字是 ninghao-typescript .. 进入到这个目录的下面 ..
再用编辑器打开这个目录 ... 我用的是 Atom 编辑器 .. 为了让 Atom 编辑器更好的支持 TypeScript 需要再去安装两个包 ..
打开 设置 ... Install ... 搜索一下 typescript ... 找到这个 atom-typescript 包以后，安装一下它 ..
另外还需要再安装一个包 .. 搜索一下 atom-ide-ui ... 这个插件里面有 atom-typescript 依赖的一些功能 ..
如果你用的是 VS Code 编辑器，不需要特别的配置，可以直接在项目里使用 TypeScript ..
来自 https://ninghao.net/video/6300#info
2)版本控制
先去找一个 .gitignore 文件 .. 先打开这个仓库地址
https://github.com/github/gitignore
.. 然后搜索一下 node ... 打开这个为 Node 项目准备的 gitignore ...
https://github.com/github/gitignore/blob/master/Node.gitignore
复制一下这个文件里面的内容 ... 回到项目 .. 新建一个文件，名字是 .gitignore .. 把复制的代码粘贴过来 ..
然后回到命令行 ... 在项目下面初始化一个仓库 ..
git init
... 再做一次提交 ..
git add .
git commit -m 'init'
下面可以给项目添加一个远程仓库 .. 打开 github 网站 ... 新建一个仓库 ... 输入仓库的名字 ... ninghao-typescript ..
创建仓库 ...
复制一下添加远程仓库的命令 ...
git remote add origin git@github.com:shipingzhong/ninghao-typescript.git 回到项目 ... 执行一下 ...
再把项目的 master 分支推送到刚才创建的远程上面 ..
git push origin master
...
课程里对项目的修改都会保存在这个仓库里面 .. 到时候你可以查看这个仓库，看一下每次提交都做了哪些修改 ..
国内有时候访问 github 有点慢 .. 我们可以使用国内的代码托管服务 .. 比如 coding.net
... 打开 coding.net .. 登录以后 .. 新建一个项目 ....
名字是 ninghao-typescript ... 选择公开源代码 ...
再回到命令行 ... 给项目添加一个新的远程 .. git remote add .. 远程的名字可以是 coding .. 后面加上仓库的地址 ... 这里可以选择 ssh 类型的地址 ..
git remote add coding git@git.coding.net:ninghao/ninghao-typescript.git
复制一下 ... 粘贴过来 ... 再执行一下 ..
然后把项目的 master 分支推送到 coding 这个远程 ...
git push coding master
回到项目页面 ... 刷新一下 .. 如果你访问 github 网站遇到了问题，可以试一下这个 coding.net ..
来自 https://ninghao.net/video/6301#toc
编译
3)用 tsc 命令编译 .ts 文件
在项目里面，新建一个 TypeScript 文件 ... 可以放在 src 目录的下面，表示 source .. 就是源的意思 .. 文件的名字是 app.ts ... TypeScript 类型的文件的扩展名就是这个 .ts ..
TypeScript 不强制我们使用它提供的东西，所以你可以在 ts 文件里使用普通的 JavaScript 代码 .. 随便先输入点东西 ... 添加一个注释 ... TypeScript ...
下面定义一个变量 ... let lastNight ... 它的值是一串表情符号 .. TypeScript 最终会被编译成普通的 JavaScript ..
回到命令行 .. 在项目下面可以使用 tsc 这个命令去编译 TypeScript 文件 ... 要编译的是 src 目录下面的 app.ts ... 编译之后的文件可以选择单独放在一个地方 .. 加上一个 --outFile ... 放在 dist 下面 .. 名字是 app.js ...
tsc ./src/app.ts --outFile ./dist/app.js
编译之后会生成一个 .js 类型的文件 ...
我们也可以编译整个目录 .. tsc ，要编译的是 src 下面的所有的东西 ... /*
然后用一个 --outDir 选项，把编译之后的文件，放在 dist 这个目录的下面 ...
tsc ./src/* --outDir ./dist
我们还可以监视文件的变化 .. 有变化以后可以立即编译修改之后的文件 .. 在这行命令行后面加上一个 --watch 选项 ..
tsc ./src/* --outDir ./dist --watch
修改一下 ts 文件里面的内容 ... 保存一下 ... 文件发生变化以后会立即被重新编译 ..
来自 https://ninghao.net/video/6303#toc
4)tsconfig.json 配置文件
要编译的文件，要排除编译的文件，还有一些编译选项，这些东西可以放在一个配置文件里面 .. tsc 命令会自动搜索项目下面的这个配置文件，根据里面的配置给我们编译 TypeScript 项目 .. 这个配置文件是 json 格式的，默认的名字是 tsconfig.json .. 使用 tsc 命令可以生成这个配置文件 ..
在项目的下面，执行一下 tsc 后面加上一个 --init 选项 ..
tsc --init
这样会在项目根目录下面创建一个 tsconfig.json 文件 .. 打开它看一下 ..
如果你发现文件的显示有些问题，是因为这个 json 文件里面包含了一些注释内容，我们可以把文件的格式修改成 javascript ，或者其它相关的格式 .. 也可以给 atom 安装一个 language-json-comments 插件，
这里的 compilerOptions 里面的东西就是 TypeScript 编译器使用的一些选项 .. 大部分选项都被注释掉了 ..
现在我想设置一下编译之后的文件的位置 .. 可以用一下这个 outDir 选项 .. 把编译之后的文件放在当前目录下面的 dist 这个目录的下面 ..
然后再去添加点东西 .. 添加一个 include .. 设置一下要编译的文件 .. 要编译的是当前目录下面的 src 目录里面的所有的文件.. ./src/**/*
回到命令行 ... 先停止一下之前执行的使用了 watch 选项的 tsc 命令 ..
现在我们不需要特别设置要编译的东西，还有编译器的选项，可以直接执行一下 tsc 这个命令 .. 要监视文件的变化，可以再加上一个 --watch 选项 ..
tsc --watch
再回到项目看一下 .. 打开编译之后的 dist 下面的 app.js ..
你会发现文件的顶部多了一个 use strict .. 这个是因为在 tsconfig.json 文件里面，把这个 strict 设置成了 true，意思就是要使用 strict 模式 ..
在我们的 ts 文件里，也可以加上这个 use strict ...
来自 https://ninghao.net/video/6304#info
快速起步
5)类型标注
现在我们还没有给这个变量设置它的值的类型 .. TypeScript 会推断出这个变量的值是一个 String 类型的值，也就是字符串类型的值 .. String，Number，Boolean 这些东西都是 JavaScript 里面内置的一些值的类型 ..
我们可以明确的标示一下这个变量的值的类型 .. 标示值的类型可能使用冒号，后面加上类型的名字这种写法 .. 后面加上一个冒号 .. 然后是它的类型 .. 这里应该就是 string ..
下面重新设置一下这个变量的值，比如让它等于一个数字类型的值 .. TypeScript 会给我们提示 .. 说这个 3 不是一个 string 类型的值 .. 它的意思相当于是，你之前说过 lastNight 这个变量的值的类型是 string， 不过这里你分配给 lastNight 的值的类型并不是一个 string，所以应该就是哪里出了问题 ..
作为开发者，使用了 TypeScript 以后，我们可以更容易修复这一类的问题 ..
再把它的值换成一个字符串 .. 之前的提示就不见了 ..
Boolean 是布尔类型的值 .. 标注的的时候使用 boolean .. 这样它的值应该是 true 或者 false .. 如果是其它的值，TypeScript 就会提示我们 .. let isDone: boolean = true;
如果值的类型是数字，可以使用 number 标注一下 .. 这样它的值应该是个数字，如果是其它类型的值，Typescript 就会给我们提示 ..
值的类型还可以是数组 .. 标注的时候可以这样 .. 先说明一下这个数组里面的项目的值的类型，比如数组里面的项目的值的类型都是字符串，标注这个数组的时候就是 string[] .. 添加一个数组 .. 这个数组里的项目必须都是字符串类型的 ... 如果有其它类型的项目，TypeScript 会给我们提示 ..
要是不确定值到底是什么类型的，可以使用 any 这种类型 .. 这样这个 ghost 的值，可以是任何类型 ..
来自 https://ninghao.net/video/6306#info
6)函数
先写个简单的函数 .. 名字叫 greet .. 具体要做的事可以先在控制台上输出一个 hello .. 鼠标放在这个函数的名字的上面 .. 你会发现 TypeScript 推断出这个函数返回的值是 void .. 意思就是什么也没有 ..
我们也可以具体的说明一下函数返回的值的类型 .. 可以在函数名字的后面加上冒号，然后是值的类型，这里就是 void ..
修改一下函数要做的事情 .. 让它 return 一个字符串 ..
这样 TypeScript 会警告我们这行代码出了问题 .. 鼠标放上去会显示具体的提示 .. 因为我们明确标注了这个函数返回的值的类型是 void ，但是实际它返回的是一个字符串 ..
修改一下，标注这个函数返回的是个 string 类型的值 .. 这样刚才的警告就不见了 ..
函数里面可以再定义一个参数 .. 比如 user ... 这个参数也可以设置一下它的值的类型 ... 先设置成 string .. 再修改一下函数里面的东西 .. 用一个字符模板 ... 在 hello 的后面加上这个 user 参数的值 ...
在下面再用一下定义的这个 greet() 函数 ... TypeScript 会警告我们，说这个函数需要一个参数 .. 鼠标放在这个函数的上面，编辑器会告诉我们这个函数的相关的定义 .. 它需要一个 user 参数，参数的值应该是个 string ..
先给它一个数字类型的参数值 .. 会警告我们，说参数的值的类型应该是字符串 ..
再给函数一个字符串类型的值 ... TypeScript 的警告就会不见了 .. 你会发现，在项目里使用了 TypeScript，编辑器会变得更聪明了，我们也更容易发现问题 ...
来自 https://ninghao.net/video/6307
7)接口：Interfaces
Interface，接口 .. 接口就像是一种合同，使用了某个接口就要遵守这个接口定义的合同 .. 其实接口定义的就是对象的形状，比如说明一下对象里面应该有什么样的属性，属性的类型是什么，有什么样的行为等等 ..
在 TypeScript 里面，用接口可以定义新的类型 .. 假设我们的应用里有一种文章数据 .. 我们可以使用 Post 来表示 .. 先定义一个接口 .. 用的是 interface 这个关键词 .. 接口的名字是 Post .. 表示文章 .. 里面是这个接口里的一些数据属性还有行为 .. 文章数据应该有一个 title 属性 .. 对应的值是 string，还需要一个 content .. 对应的值也是 string ..
下面定义一个变量 .. 名字是 post .. 可以设置一下它的类型，使用一下 Post 这种类型，就是上面定义的这个 Post 接口 .. 这样这个 post 里面就必须有一个 string 类型的 title 属性，还需要一个 string 类型的 content 属性 ..
先添加一个 title .. 它的值是个字符串 .. 现在，TypeScript 会提示我们，说这个 post 里面少了一个 content 属性 .. 在这个 post 里面可以再添加一个 content 属性 ..
这样警告就会消失 ...
或者也可以在 Post 这个接口上，把 content 属性标记成一个可选的属性 ..
可选属性的名字的后面可以添加一个 ? 号 .. 这样即使在 post 这个对象里面没有 content 属性，也不会出现警告 ..
再打开编译之后的这个 js 文件看一下 ... 你会发现里面并没有 interface 相关的代码 .. 这个是因为 TypeScript 编译器再把 TypeScript 代码编译成 JavaScript 的时候，会去掉里面定义的所有的 Interface ..
也就是接口只是一种辅助我们编写代码的工具 .. 代码真正运行的时候就不需要它们了 ..
来自 https://ninghao.net/video/6308#info
8)Enums
Enum 就是 enumeration .. 比如在 Post 里面，可能有一个表示文章发布状态的属性 .. 起个名字可以叫 status .. 它的值的类型是数字 .. 比如数字 0 可以表示未发布的状态，数字 1 表示已发布的状态 ..数字2 表示 draft 草稿
这样下面这个 post 里面就需要再添加一个 stauts 属性，它的值是个数字 .. 这种代码不太容易明白 .. 因为别人不能马上知道不同的数字表示的真正的意义是什么 .. 我们可以用一些注释来说明一下 ..
或者可以使用 TypeScript 里面提供的 enum 功能 ..
先去定义一个 enum，用一下 enum 这个关键词 .. 里面是一些数据 .. Unpublished .. Published ... 再添加一个 Draft ..
有了这个 enum 以后，可以让 Post 里面的这个 status 属性的类型是这个 PostStatus .. 就是上面定义的这个 enum ..
这样设置 status 属性的值的时候就不用直接使用数字了，可以使用更友好的名字 .. 比如这个 post 它的发布状态是未发布 .. 这个值就是 PostStatus 这个 enum 里的 UnPublished .. 输入 PostStatus，加上一个点以后，编辑器会出现提示 .. 告诉我们这个 enum 里面的一些数据的名字，还有它具体表示的那个值 ..Draft 是数字 2 .. Published 是数字 1 ，UnPublished 是数字 0 ... 先用一下这个 UnPublished ..
下面在控制台上输出这个 post .. 保存一下文件 ... 再打开编译之后的 .js 文件看一下 .. 我们刚才定义的 enum 会被编译成这样的 JavaScript 代码 ..
回到命令行 .. 用 node 运行一下 dist 下面的 app.js ... 会输出 post 里的内容 .. 你会看到，它里面的 status 这个属性的值就是数字 0 ..
回到项目再试一下 .. 在控制台上输出 PostStatus[0] ... 再回到命令行，运行一下 dist/app.js .. PostStatus[0]，输出的值会是 Unpublished ..
来自 https://ninghao.net/video/6309
基本类型
9)准备
先进入到桌面上这个 ninghao-typescript 项目 .. 进来以后可以使用编辑器打开它 ... 我用的是 VS Code 编辑器 .. 这款编辑器对 TypeScript 支持的更好一些 ..
在 src 目录下面的这个 app.ts 是一个 TypeScript 文件 .. 先删除掉里面的代码 ..
回到终端 .. 在全局范围安装了 typescript 以后，可以使用一个 tsc 命令 .. 执行一下 tsc --watch ..
它会监视指定 TypeScript 文件的变化，有变化就会重新编译它 ..
我这里就是把这个 src 下面的 app.ts 文件编译成一个普通的 js 文件，放在 dist 目录的下面 ..
来自 https://ninghao.net/video/6785
10)基本类型
在 TypeScript 里面，数据都有个特定的类型，先了解几种不同的数据类型 ... 添加一个变量 .. isDone ，变量名右边用一个冒号，冒号的右边是它的类型，比如 boolean ，意思就是 isDone 是个布尔类型的值，就是它的值只能是 true 或者 false ..
让 isDone 等于字符串 true .. 因为在声明 isDone 这个数据的时候我们设置了它的类型是 boolean，所以当我们给它分配一个其它类型的值的时候，TypeScript 会给我们提示 .. 说 true 这个字符串不能分配给 boolean ..
去掉 true 周围的引号，现在 isDone 的值是 boolean，这样就不会报错了 .. 它的值还可以是 false
number
下面再添加一个变量 .. let age .. 把 age 的类型设置成 number .. 这样 age 的值就只能是数字 .. 如果是其它的类型， TypeScript 就会报错 ..
string
再试一下 string 类型的值 .. let username ，类型是 string，表示字符串 .. 下面可以设置一下这个 username 的值 .. 它的值的类型应该是 string ..
Array
Array 表示数组 .. 添加一个 list .. 我们让它的值的类型是一个 Array .. 就是一个数组 .. 可以这样 .. number[] .. 意思就是 list 的值是一组数字类型的值 .. 就是它的值应该是一个数组，数组里的项目的类型应该是 number，也就是数字 ..
下面可以设置一下 list 的值.. 它的值是一个数组 .. 数组里面添加几个项目 .. 这些项目的类型都应该是数字 .. 如果有项目的值的类型不是数字 .. TypeScript 就会报错 ..
这个 3 是个字符串，所以这里会提示说，它不是一个 nubmer 类型的值 ..
还有一种设置数组类型的方法， Array .. 尖括号 .. 里面是项目的类型 .. 比如 number ... 效果跟 number[] 是一样的 ..
Tuple
如果我们知道一个数据是数组类型的，并且明确的知道数组里的项目的数量还有项目的数据类型，可以使用 Tuple 这种类型 ..
比如 x .. 它的值应该是一个数组 .. 数组里面有两个项目 .. 一个是 stirng 类型的 .. 还有一个是 number 类型的 .. 这种写法就是一个 Tuple ..
下面定义一下这个 x 的值 .. 它是一个数组 .. 第一个项目的值的类型是 string ... 第二个项目的值的类型是 number ... 如果把它设置成其它类型的数据 .. TypeScript 就会给我们提示 ..
这个 x 数组的项目的数量是两个 .. 再添加一个项目 .. TypeScript 会警告我们，说 x 这个数组里面只能有两个项目 ..
访问一下 x 里的第一个项目 .. 会提示说它的值的类型是一个 string .. 再访问一下这个 x 里面的第二个项目 .. 它的值的类型是 number .. 也就是 x 里的第二个项目的值的类型应该是数字 ..
来自 https://ninghao.net/video/6786#info
11)Enum
Enum 类型的数据就是给一组数字值起个更好记的名字 .. 在应用里你可能会用到一组数字值，比如表示内容的发布状态，可以使用数字 0 表示未发布，数字 1 表示已发布 .. 有时候可能会忘掉这些数字表示的意思 .. 这时候我们就可以定义一个 enum 类型的数据 .. 给这些数字值设置一个更好记的名字 ..
定义一个 enum 类型，可以使用 enum 这个关键词 .. 然后是类型的名字 .. 比如 Color ... 大括号里是一些值 .. 中间用逗号分隔一下 ..
这样如果让一个变量的值等于 Color.Red .. 实际上这个变量的值应该是数字 0 .. 如果是 Color.Green ，实际的值是数字 1 ..
下面添加一个 pageColor .. 它的类型是刚才我们定义的这个 Color .. 这个 Color 是一个 enum ..
然后可以设置一下 pageColor 这个变量的值 .. 让它等于 Color .. 注意输入 Color 的时候，编辑器会出现提示 .. 显示里面的可选的几个值 .. Blue .. Green 还有 Red ..
右边还会显示这个数据具体表示的数字值是什么 .. Blue .. 它的值是数字 2 .. 因为它是 Color 这个 enum 里的第三个项目 ..
我们也可以手工设置一下 enum 数据项目具体表示的数字值 .. 比如让 Red 等于 1 .. 这样 Green 表示的数字值会自动变成数字 2 ，Blue 表示的数字值应该是数字 3 ..
来自 https://ninghao.net/video/6787
12)Any
变量的值的类型如果不能确定的话，我们可以把它设置成 any 类型的数据 .. 意思就是任何类型的数据都是可以的 ..
添加一个 data .. 它的类型是 any .. 下面可以设置一下 data 的值 .. 它可以是一个字符串 ..
也可以是一个数字 ... 还可以是 boolean .. 因为定义 data 的时候我们把它标记成了一个 any 类型，所以它的值可以是任何类型的数据 ..
下面再添加一个 list .. 它的值应该是一个数组 .. 但是数组里的项目的类型不能确定，可以这样 .. any 方括号 ..
设置一下 list 的值 .. 它应该是一个数组 .. 数组里面可以包含多个项目 .. 项目的值可以是任何类型的 ..
来自 https://ninghao.net/video/6788
13)Void
Void 类型的意思就是数据没有类型，比如一个函数如果不返回值的话，我们可以设置一下这个函数返回的值的类型是 Void ..
定义一个函数 .. 函数的名字是 hello .. 设置一下函数返回的值的类型 .. 比如 void .. 函数要做的事情是在控制台上输出一个 hello ..
这里如果我们不设置函数返回的值的类型 .. TypeScript 也会推断出，它返回的值的类型应该是 void ...
如果这个函数真的返回了一个值 .. 比如让它返回一个字符串 hello ... 这样 TypeScript 会提示我们，说这个 hello 这个字符串类型的数据不能分配给 void ..
来自 https://ninghao.net/video/6789
Interface：接口
14)Interface
Interface 就是给某种特定形状的数据起个名字 .. 先定义一个函数 .. 名字叫 createPost .. 函数接受一个参数 .. 名字是 post .. 这个 post 参数是一个对象 .. 里面有一个 title 属性 .. 它的类型是 string ..
函数做的事就是在控制台上输出 post 这个参数的值 ..
这个 post 参数的值有一个特定的形状 .. 就是一个对象，对象里面有个 title 属性，属性值的类型是 string ..
这样我们就可以去定义一个 interface .. 定义的时候用一下 interface 关键词 .. 接口的名字叫 Post .. 它里面有一个 title 属性 .. 属性的类型是 string ..
现在我们可以把 post 参数的值的类型设置成 Post 这个接口 ..
下面再用一下这个 createPost 函数 .. 提示它有一个 post 参数 .. 参数的类型是个 Post .. 给它一个对象 .. 会提示接口里面的一些属性 .. 添加一个 title 属性 .. 它的值是一个字符串 .. 如果给 title 的值不是一个字符串，TypeScript 就会给我们警告 ..
来自 https://ninghao.net/video/6791#info
15)Interface：可选属性
在这个 Post Interface 里面，可以再添加一个属性 .. 比如 content .. 它的类型也是一个 string ..
你会发现，下面使用这个 createPost 函数的时候，会报错 .. 提示说函数的 post 这个参数里面少了一个 content 属性 ..
如果这个属性是可选的，可以在这个接口属性名字的后面添加一个 ? 号 .. 这就表示 content 属性是一个可选的属性 .. 这样使用 createPost 的时候，给它的对象参数里面，即使没有 Post 接口里的 content 属性，也不会报错 .. 因为我们这个属性标记成了一个可选的属性 ..
来自 https://ninghao.net/video/6792#info
16)Interface：只读属性
接口里的属性可以设置成只读的，就是一但有了值以后，就不能再改变它的值了 .. 在这个 Post 接口里面，再添加一个 paid 属性 .. 它的类型是 boolean .. 可以再把它标记成一个可选属性 .. 属性名字的后面添加一个问号 ..
下面添加一个变量 .. 名字是 post .. 类型是 Post ..
设置一下 post 变量的值 .. 它的类型是 Post，所以里面需要一个 title 属性 ... 对应的值是一个 string .. content 属性是可选的 ..
再添加一个 paid 属性 .. 它的值是 boolean 类型的 ..
然后我们再试着重新设置一下 post 里的 paid 属性的值，把它改成 false .. 现在 TypeScript 允许我们这样做 ..
在这个 paid 属性的前面 .. 添加一个 readonly ，把这个 paid 标记成一个只读属性 ..
这样我们再重新设置 post 里的 paid 属性值的时候，就会报错了 .. 提示说这个属性是只读的 ..
来自 https://ninghao.net/video/6793#info
17)Interface：函数类型
Interface 也可以描述函数的类型 .. 添加一个 interface .. 名字是 EntityFunction .. 定义函数接口就是设置一下函数支持的参数，参数值的类型，还有函数返回的值的类型 ..
函数需要一个 entity 参数 .. 参数的类型是个 Entity .. 函数返回的值的类型是 string ..
上面可以再定义一个 Entity 接口 .. 里面需要一个 title 属性 .. 类型是 string ..
下面我们再用一下 EntityFunction 这个函数类型的接口 .. 添加一个 createPost .. 类型是 EntityFunction ..
设置一下 createPost 这个函数的主体 .. 函数里面需要一个 entity 参数，这个参数的名字不一定非得跟接口里的参数名字一样 .. 这里我们可以设置成 post .. 不过个参数的类型必须是 Entity ，如果设置成其它的，TypeScript 会给我们警告 . ..
函数返回的值应该跟接口一样，是一个 string ..
函数 return 的东西应该是一个字符串 .. post has been created.
来自 https://ninghao.net/video/6794
18)Interface：Class 类型
类可以实施一个接口 .. 这里有个接口叫 Entity ，里面有个 title 属性 .. 类型是 string .. 下面我们可以去定义一个类 .. 名字是 Post .. 这个类可以实施一下 Entity 这个接口 ..
这样在这个类里面需要添加一个 title 属性 .. 类型是 string .. 添加一个构造函数 .. 有个 title 参数 .. 类型是 string .. 里面让 this.title 等于 title ..
接口里面也可以添加类需要的实施的方法 ... 比如这里我们添加一个 log 方法 .. 方法返回的值的类型是 void .. 就是没值 ..
现在 Post 类会出现提示，让我们在类里面再添加一个 log 方法 .. 随便再设置一下这个方法要做的事情 .. 在控制台上输出 this.title ...
来自 https://ninghao.net/video/6795#info
19)Interface：继承接口
接口可以继承接口，继承了其它接口的接口里面会拥有被继承的接口里面的东西 ..
比如我这里现在有一个接口叫 Entity .. 里面有个 title 属性，类型是 string .. 下面再添加一个接口 .. 名字可以是 Product ..
现在我们让这个接口继承一下上面这个 Entity 接口 .. extends .. Entity ..
在这个 Product 里面，再添加一个 price 属性 ... 类型是 number ..
下面添加一个 product .. 等于一个 Product 类型的对象 ..
然后再输入 product .. 你会发现它里面有两个属性 .. Entity 里的 title 还有 Product 里的 price ..
这是因为 Product 继承了 Entity，所以它里面会有 Entity 里的 title 属性 ..