写给自己看的Typescript起步-CSDN博客

Typescript Intro

引言

动态一时爽重构火葬场

先看一个例子: Demo0

而 Javascript 刚好就是一门弱类型语言。

Javascript 是网景公司发明的

Typescript 是由微软发明的

每一门语言都是由人发明的人总会犯错

所以 Typescript 就是为了解决 Javascript 的一些错误或者说认为他不好的地方

比如在编写 Javascript 代码时的智能补全功能等

TypeScript 解决了什么痛点？

Typescript 由微软开发(微软拥抱开源)并且开源, Typescript 的官网地址是: typescriptlang.org, 中文镜像站: tslang.cn 但建议访问第一个网址。

因为官网对 Typescript 是这样描述的:

Typescript is a typed superset of Javascript

中文镜像网站是这样翻译的:

Typescript 是 Javascript 类型的超集

emmm，显然在理解的时候会造成一些偏差

官网
中文镜像站

划重点:

1. Typescript 是 Javascript 的超集。
2. Typescript 可以被编译成纯 Javascript
复制代码

Typescript对框架的支持性

可以看到 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
复制代码

做一个测试
1. 编写 greeter.ts
2. node greeter.ts
3. npm i typescript
4. node greeter.ts
5. npm i ts-node
6. node greeter.ts
为什么要提供 tsc
1. 浏览器不能运行 Typescript
2. 浏览器可以直接运行 Javascript
3. 所以我需要将 Typescript 变成 Javascript 才可以在浏览器中运行
tsc demo1
那么我们现在执行 ts 的过程就是先 tsc 再 node, 能不能点一下就执行呢？

配置调试环境

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 的不足

官网 5min

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 解决了什么痛点？

Typescript x Vue 香嘛

1. 能不能用 能用
    - vue-cli@3 提供了 typescript 选项可以一键搭建可以使用可以使用 Typescript 开发的项目
    - 演示
    - 好不好用 还没那么好用
    - 那为啥还是要学

2. 目前 vue + typescript 不香
复制代码

TypeScript不适合在vue业务开发中使用吗

3. 会香的
复制代码

TypeScript 解决了什么痛点？

TypeScript 不适合在 vue 业务开发中使用吗？

不管怎么说, 学习 typescript 的时候到了。

参考资料:

Vue3.0开发计划

Vue Typscript

Vue Typescript EvanYou blog

vue-class-component

Todo

可以考虑把每个例子的代码粘过来