typescript 代码提示-学习一些 Vue3 的 TypeScript 并体验 TypeScript

直接的

第1课，体验打字稿

第2课，基本类型和入门类型

第 3 课，泛型

第 4 课，解释中间类型

第五课，什么是命名空间？

专题文章typescript 代码提示，从vue3源码学习typescript——“是”

第6课、什么是声明文件（declare）？ - 全球宣言

vue3来了

看完vue conf 2019的视频，我很兴奋，vue3来了！ vue3是用typescript开发的，我猜typescript会在vue的带领下成为主流，不如先学点东西吧。

2019年最酷后端技术

我从 2019 年初开始使用 Typescript。自从使用它以来我就爱上了它。 我实在是放不下。 以下是我最喜欢的一些事情：

很多小错误比如：对象数组不存在或者数组名拼写错误，编辑器在写代码的时候都会提示你，减少出现低级错误的概率。 标记了类型的变量，在使用编辑器时会列出变量上的技能和属性，开发体验更加舒适。 许多高级项目都是用 typescript 开发的。 当查看源代码时，由于类型标记，更容易理解。 让你写的代码看起来很强大。

也希望更多的同事开始使用TypeScript，让它成为后端加薪的另一个工具（回想一下webpack和vue给你带来了什么，第一个“吃龙虾”肯定会享受到最大的红利）。

以下是我在学习 Typescript 期间编写的一些项目。 自从使用 typescript 以来，我真的很喜欢造轮子。 如果写得不好，我只是有一些热情。 抛砖引玉，大家一定能写出更好的文章。

手势库：github.com/any86/any-t...

命令式调用vue组件：github.com/any86/vue-c...

工作中常用的一些代码片段：github.com/any86/usefu...

迷你风暴管理器：github.com/any86/any-e...

打字稿如何工作

使用typescript命令行工具将typescript转换为javascript以支持在浏览器中运行。

注：以下文章中，typescript 简称为 tstypescript 代码提示，javascript 简称为 js。

打字稿功能

ts和js最大的区别就是ts多了类型注释功能。 从名称中的“类型”，我们也可以看出语言的重点是“类型”。 该类型分为基本类型和中级类型，高级类型是通过基本类型组成的自定义类型。

基本型

ts 包含 boolean / number / string / object / array (数组的表示方式有很多种，后续文章会展开) / tuple / enumeration / any / Undefined / Null / Void / Never

Any是本文的重点，稍后我会详细解释。

高级型

在大多数情况下，对象类型会被更详细地标记。 我这里就不讲了。 举个例子就明白了。 了解关键字接口。 中文名为“接口”，后续章节会展开。

interface Article {
    title: string;
    count: number;
    content: string;
    tags: string[]; // 数组里的元素都是字符串
}
复制代码

智能VSCode

当我们使用vscode编辑器时，编辑器会根据我们的“类型注释”提供代码提示和错误提示：

如果类型错误也会提示：

开始，安装nodejs并在命令行运行npm i -g typescript，全局安装编译器。 安装 vscode 编辑器。 开始编写代码生成js 建一个文件夹，在里面创建一个hello.ts文件。 请注意，扩展名是 ts。 使用 vscode 打开 hello.ts 文件。 输入以下代码，让我们体验一下ts：

interface A {
    a:number,
    b:string
}
let obj:A = {a:123,b:'456'};
复制代码

从命令行进入该文件夹并执行命令

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代表任意类型，这个类型非常适合ts菜鸟，有些类型一开始不知道怎么表达，我们可以暂时用any来表达，等我们熟练了ts后再标注精确类型。

菜鸟可能不太理解下面的情况，以为n标记为数字，但是循环中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"
    ]
}
复制代码

总结

2019年ts一定要火，请放心学习ts。 初期开发时可以使用any先体验一下ts。 慢慢学习一个月左右就可以练习了。 这篇文章之后，这个月我会陆续更新这个打字稿。 教程，保证你一个月内学会。