乐趣区

为vue3学点typescript1-体验typescript

jiezi

看了 vue conf 2019 的视频, 特别兴奋, vue3 要来了!
vue3 是用 typescript 开发的, 我揣测在 vue 的带领下 typescript 会成为主流呢, 要不先学点.

19 年最酷的前端技术

我是 19 年初开始使用的typescript, 自从开始用上了就喜欢上了, 真的爱不释手, 最爱他几点:

  1. 很多小错误比如: 对象的 字段不存 在或者字段名字 拼写错误, 编辑器会在写代码的时候就提示你, 降低出低级错误的几率.
  2. 标注了类型的变量, 使用的时候编辑器都会列出变量上的方法和属性, 开发体验更舒服.
  3. 很多大神的项目都用 typescript 开发, 看源码的时候因为有了类型标注, 更容易理解.
  4. 让自己写的代码看起来很厉害的样子????.

我也希望更多的同行都开始用 typescript, 让他成为前端涨工资的又一个工具 (回想下 webpack 和 vue 给你带来什么, 最早 ” 吃螃蟹 “ 的人, 肯定 享受最大的红利).

放几个我学习 typescript 过程中写的项目, 自从用了 typescript 就特别喜欢造轮子, 写的不好, 就是有份热情, 抛砖引玉, 大家肯定能写出更好的.

手势库: https://github.com/any86/any-…

命令式调用 vue 组件: https://github.com/any86/vue-…

工作中常用的一些代码片段: https://github.com/any86/usef…

一个 mini 的事件管理器: https://github.com/any86/any-…

typescript 工作原理

通过 typescript 命令行工具, 把 typescript 转成javascript, 从而支持在浏览器运行.

注: 后面的文章中 typescript 简称 ts, javascript 简称js.

typescript 特性

ts 和 js 最大的区别就是 ts 多了 类型注解 功能, 通过名字中的 ”type“ 也能看出语言的重点在 ”类型 “ 上. 这个类型分为 基础类型 和高级类型 , 高级类型就是通过 基础类型 组成的 自定义类型.

基础类型

ts 中包含了 boolean / number / string / object / 数组 (数组的表示有多种, 后续文章会展开) / 元组 / 枚举 / any / Undefined / Null / Void / Never

any是本文的重点, 一会会对他着重讲解.

高级类型

大部分情况是对 object 类型做更细的标注, 此处不多讲, 先放个例子了解即可, 知道关键词 interface 即可, 中文名 ”接口“, 后续章节会展开.

interface Article {
    title: string;
    count: number;
    content: string;
    tags: string[]; // 数组里的元素都是字符串}
聪明的 vscode

当我们使用 vscode 编辑器的时候, 编辑器会根据我们的 ”类型注解 “ 进行 代码提示 和错误提示:

类型写错了, 也会提示:

动手开始, 安装

  1. 安装 nodejs
  2. 在命令行运行 npm i -g typescript, 安装 编译器 到全局.
  3. 安装 vscode 编辑器.

开始写代码

生成 js
  1. 建立一个文件夹, 在里面新建一个 hello.ts 文件, 注意扩展名是ts.
  2. 用 vscode 打开 hello.ts 文件.
  3. 输入如下代码, 让我们体验下 ts:
interface A {
    a:number,
    b:string
}
let obj:A = {a:123,b:'456'};
  1. 命令行进入文件夹, 执行命令
npx tsc hello.ts

好了我们可以看下文件内部多了一个hello.js, 打开看看:

var obj = {a: 123, b: '456'};

代码中的 ”类型注解“ 不见了 , 我们的 ts 被编译成 js 了, 是不是很神奇.

错误提示
interface A {
    a:number,
    b:string
}
// 错误, 会提示 b 的类型错误, 应该为 string 类型
let obj:A = {a:123,b:456};

any 类型

any 代表任意类型, 这个类型特别适合 ts 新手, 初期有些类型不知道如何表达, 我们就可以 暂时 使用 any 表达, 等熟练 ts 后再标注精准的类型.

下面的情况新手可能就不会了, 以为 n 标记为 number, 但是循环中 i 大于 5 的时候就是字符串了, 所以 ts 就会提示错误.

let n:number;
for(let i = 0;i<10;i++) {if(i <= 5) n = 10;
    else n = '100';
}
// ts 提示: 不能将类型“"100"”分配给类型“number”

作为新手如果初期你不知道 ”联合类型 “ 这个概念, 你就可以直接把n 标记为any:

// 熟练后会是这么标记的 
// let n:string|number
let n:any;
for(let i = 0;i<10;i++) {if(i <= 5) n = 10;
    else n = '100';
}

总结

19 年 ts 一定大火, 请大家放心学 ts 吧, 初期开发可以先用 any 体验 ts, 慢慢学习 1 个月左右其实就可以实战了, 这篇后我也会在 本月陆续更新完本 typescript 的教程, 保证大家在一个月内学会.

退出移动版