《Typescript 全面进阶指南》学习笔记

480 阅读1分钟

Hi,我是Yoyo酱。

这是掘金小册Typescript 全面进阶指南的学习笔记。一起摸鱼学习啊哈哈哈,秉承 用输出倒逼输入,我决定:

  1. 在每篇文章中记录每节课的笔记
  2. 该系列完成后,在公司内部进行一次分享

一起来看最后成果吧!

day 1

前提概要

  1. 最佳学习路径:类型-语法-工程

搭建 TypeScript 的开发环境

本节课会学习的内容

  • 插件以及配置项
  • ts-node、ts-node-dev
  • TypeScript Playground

插件

  • TypeScript Importer 搜集项目内所有的类型定义,进行自动补全
  • Move TS 快速修改文件名和其引用
  • ErrorLens 在ts代码旁边出现红色的错误信息

针对vscode Settings的官方内置配置-工作区 搜索'typescript Inlay Hints',开启几个常用的配置

  • Function Like Return Types,显示推导得到的函数返回值类型;
  • Parameter Names,显示函数入参的名称;
  • Parameter Types,显示函数入参的类型;
  • Variable Types,显示变量的类型

ts-node

安装ts-node 和 typescript

npm i ts-node typescript -g

生成 tsconfig.json

tsc --init

快速验证

ts-node index.ts

使用命令行

  • --emit --compilerHost 输出编译产物和sourcemap

ts-node-dev

作用:自动监听文件变更(基于node-dev和ts-node实现,共享TS编译进程)

npm i ts-node-dev -g

快速验证,跳过类型检查过程

ts-node-dev --respawn --transpile-only index.ts

TypeScript Playground

官方提供的 Playground,可以进行可视化配置tsconfig。

遗留问题:

1、ts-node怎么配置 alias 快速启动?

本节单词

  • transpile 转译
  • transpiler 转译器
  • declare 声明,断言

资料参考: What is TypeScript