Typescript Intro
引言
动态一时爽 重构火葬场
先看一个例子: Demo0
而 Javascript 刚好就是一门弱类型语言。
Javascript 是网景公司发明的
Typescript 是由微软发明的
每一门语言都是由人发明的 人总会犯错
所以 Typescript 就是为了解决 Javascript 的一些错误 或者说认为他不好的地方
比如在编写 Javascript 代码时的智能补全功能等
Typescript 由微软开发(微软拥抱开源)并且开源, Typescript 的官网地址是: typescriptlang.org, 中文镜像站: tslang.cn 但建议访问第一个网址。
因为官网对 Typescript 是这样描述的:
Typescript is a typed superset of Javascript
中文镜像网站是这样翻译的:
Typescript 是 Javascript 类型的超集
emmm， 显然在理解的时候会造成一些偏差
- 官网
- 中文镜像站
划重点:
1. Typescript 是 Javascript 的超集。
2. Typescript 可以被编译成纯 Javascript
可以看到 Typescript 与 React, node, vue, angular 还有 微信都有非常好的兼容性
并且你可以非常好的将你的 Javascript 项目移植到 Typescript 上
总结:
1. Typescript 是带类型的 Javascript
2. Typescript 可以编译成纯 Javascript
3. Typescript 对各种框架支持性非常友好
但是, 以上都是官网的一面之词，究竟事实如何， 我们今天探讨一下两个方面:
1. Typescript 能否解决一些 Javascript 弱类型所带来的问题
2. Vue 与 Typescript 的配合 到底香不香
起手式:
-
配置淘宝源
npm config set registry https://registry.npm.taobao.org/ (公司网络下可以选择不配置) npm config delete registry (撤销配置的淘宝源) -
安装 nodejs
-
安装 typescript
- typescript@3.3.3
npm i typescript -g // typescript (yarn global add typescript) // C:\Users\wanghongkun\AppData\Roaming\npm\tsserver // C:\Users\wanghongkun\AppData\Roaming\npm\tsc-> C:\Users\wanghongkun\AppData\Roaming\npm\node_modules\typescript\bin\tsc - ts-node
npm install ts-node@7.0.0 -g // 让 node 支持 Typescript // 因为 node 没办法直接运行 Typescript //C:\Users\wanghongkun\AppData\Roaming\npm\ts-node -> C:\Users\wanghongkun\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js-
做一个测试
- 编写 greeter.ts
- node greeter.ts
- npm i typescript
- node greeter.ts
- npm i ts-node
- node greeter.ts
-
为什么要提供 tsc
- 浏览器 不能运行 Typescript
- 浏览器 可以直接运行 Javascript
- 所以我需要将 Typescript 变成 Javascript 才可以在浏览器中运行
-
tsc demo1
-
那么我们现在执行 ts 的过程就是先 tsc 再 node, 能不能点一下就执行呢？
- typescript@3.3.3
-
配置调试环境
- debug demo0 js
- 复制 demo0 文件夹 将 ts 改为 js debug
- 新开一个目录执行
npm init -y npm i -D ts-node typescript- 创建 tsdemo/.vscode/launch.json 文件，内容如下
{ "configurations": [ { "name": "ts-node", "type": "node", "request": "launch", "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js", "args": [ "${relativeFile}" ], "cwd": "${workspaceRoot}", "protocol": "inspector" } ] }
目前: 1. 我们可以编写 ts, 并可以使用 tsc 将 Typescript 编译成为 Javascript 2. 我们经过配置可以使用 vscode 的 debug 功能对 ts 文件进行一键 debug
通过一个官网 5min 来看 Typescript 的使用 / 以及是否解决了 JavaScript 的不足
- Demo2
- ts 文件里面的代码 完全就是 Javascript
- 其实这个例子就是做了我们之前的功能, 演示 ts 可以转成 js
- 你直接在 ts 里面写 js 也不会有什么问题, 毕竟是超集嘛
- Demo3
- 所以在第一个例子上添加一些 javascript 不支持的功能
- 首先 我们强制规定 person 必须是一个字符串
- 加完之后 还是 JavaScript 嘛？ 显然不是了, 因为 Js 不支持这种语法。
- 然后 tsc 这个文件 发现编译出来的东西没有什么不一样
- 我们目前是把一个 不是ts 的东西 变得 ts一点了 加了类型
- 然后我们做一下死
let user = {姓: 'gua', 名: 'kun'}- vscode 会提示
- tsc 会报错
- 我们来想，假如没有 Typescript 我们要怎么解决我只能传 string 的问题
if (typeof person !== 'string') { throw new Error('person 必须是一个字符串') }- 而这样的写法 只有在运行到这一行的时候才会发现这个错误
- Typescript 则会在编译的时候就会告诉你这个错误
- 能在编译时发现的错误不要留到运行时(用户感知的到)发现
- 变量加了 String 类型之后 只能传 string 和 undefinded
- 那么我们如何让 person 接受 一个对象呐
- 声明接口(interface)
- Demo4
- 接口里的属性 可以多 不能少
- 可以多传 但没法调用
- typescript 真的十分严格
- 类
- Demo5
- 为什么会有类
- 因为接口不支持函数呀
- 解释一下 public
firstName: string middleInitial: string lastName: string constructor(firstName, middleInitial, lastName) { this.firstName = firstName this.middleInitial = middleInitial this.lastName = lastName this.全名 = firstName + " " + middleInitial + " " + lastName; }
第一个问题总结:
1. Typescript 可以解决 javascript 是一门弱类型语言带来的问题 因为：
Typescript x Vue 香嘛
1. 能不能用 能用
- vue-cli@3 提供了 typescript 选项可以一键搭建可以使用可以使用 Typescript 开发的项目
- 演示
- 好不好用 还没那么好用
- 那为啥还是要学
2. 目前 vue + typescript 不香
3. 会香的
不管怎么说, 学习 typescript 的时候到了。
参考资料:
Todo
可以考虑把每个例子的代码粘过来
