为vue3学点typescript(1), 体验typescript

更新啦

第一课, 体验typescript

第二课, 基础类型和入门高级类型

第三课, 泛型

第四课, 解读高级类型

第五课, 什么是命名空间(namespace)?

vue3要来了

看了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';
}

补充

忽然想起若是咱们的配置不同,可能会看到不同的提示, 因此补充下个人ts配置, 请你们学习的时候按照这个配置来学习本课程, 每一个配置我都加了注释, 若是译文请在下方留言, 知无不言.

用法也很简单, tsconfig.json放在你项目的根目录便可:

// tsconfig.json
{
    "compilerOptions": {
        // 不报告执行不到的代码错误。
        "allowUnreachableCode": true,
        // 必须标注为null类型,才能够赋值为null
        "strictNullChecks": true,
        // 严格模式, 强烈建议开启
        "strict": true,
        // 支持别名导入:
        // import * as React from "react"
        "esModuleInterop": true,
        // 目标js的版本
        "target": "es5",
        // 目标代码的模块结构版本
        "module": "es6",
        // 在表达式和声明上有隐含的 any类型时报错。
        "noImplicitAny": true,
        // 删除注释
        "removeComments": true,
        // 保留 const和 enum声明
        "preserveConstEnums": false,
        // 生成sourceMap    
        "sourceMap": true,
        // 目标文件所在路径
        "outDir": "./lib",
        // 编译过程当中须要引入的库文件的列表
        "lib": [
            "dom",
            "es7"
        ],
        // 额外支持解构/forof等功能
        "downlevelIteration": true,
        // 是否生成声明文件
        "declaration": true,
        // 声明文件路径
        "declarationDir": "./lib",
        // 此处设置为node,才能解析import xx from 'xx'
        "moduleResolution": "node"
    },
    // 入口文件
    "include": [
        "src/main.ts"
    ]
}

总结

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