typescript 类型体操 之 初始化环境搭建

1,921 阅读3分钟

「这是我参与2022首次更文挑战的第9天,活动详情查看:2022首次更文挑战

前言

在学习typescript的过程当中,有一个github库对其类型的学习特别有帮助,是一个有点类似于leetcode的刷题项目,能够在里面刷各种关于typescript类型的题目,本片文章先来搭建一下刷题所需要的环境,并且拿最简单的hello-world来测试一下,下次开始正式刷题。

type-challenges/type-challenges: Collection of TypeScript type challenges with online judge (github.com)

初始化搭建ts项目

首先这个库是能够支持在线做题的,但是还是比较推荐自己搭建一个项目,把做的题放到自己的项目当中去,就像是一个学习笔记,日后碰到类似的问题也比较方便回来翻阅。

1. 首先创建项目,我这里命名为 tsTypeExe

mkdir tsTypeExe
cd tsTypeExe

2. 然后进入文件夹中,初始化npm

npm init

3. 安装typescript/tslint和NodeJS的类型声明

npm install --save-dev typescript tslint @types/node

4. 配置tsconfig.json

./node_modules/.bin/tsc --init

在tsconfig.json当中,配置决定了之后的ts代码会被如何编译:

配置项目说明:

  • include ts文件在哪个文件夹中
  • lib 运行环境包括哪些api
  • module ts代码编译成什么模块系统
  • outDir 编译后的js代码存放位置
  • stirct 是否开启严格模式
  • target ts编译成js的标准
  • 更多的详细配置可以查阅资料 typescript - npm (npmjs.com)

5. 配置tslint.json

./node_modules/.bin/tslint --init

tslint 是一个可扩展的静态分析工具,用于检查 TypeScript 代码的可读性、可维护性和功能错误

更多关于tslint的详细配置可以查看文档 - Configuring TSLint (palantir.github.io)

6. 创建我们的刷题文件夹 type-challenges 和测试文件 index.ts 并输入内容

mkdir type-challenges
touch type-challenges/index.ts

现在整体目录如下:

tsTypeExe 
│ node_modules
│ type-challenges
│ └───index.ts
│ package.json
│ tsconfig.json
│ tslint.json

然后我们在 index.ts 中输入内容:

console.log("hello TypeScript")

7.编译

./node_modules/.bin/tsc

image.png 成功生成了ts文件的js版本

8.运行

node ./dist/index.js
PS F:\tsTypeExe> node ./dist/index.js
hello TypeScript

成功输出“hello Typescript",那么说明我们第一个typescript项目配置成功

第一题 - hello-world

做题方法

image.png 每道题目就是自己的一个文件夹,主要就是由 md,template.ts 和 test-cases.ts 组成,我们可以直接把template.ts 和 test-cases.ts 中的代码拷到自己的本地,再去做一个练习。

image.png

这里还要去安装一下项目测试所需要的一个库 - @type-challenges/utils,里面提供一些工具函数,现在暂时不用去管里面的实现,我们可以看函数的名称来大概猜它的意思:

type cases = [
  Expect<NotAny<HelloWorld>>,
  Expect<Equal<HelloWorld, string>>
]

第一句断言说 HelloWorld 不是一个 any 类型,第二句断言说 HelloWorld 是 string 类型,一开始我们会发现这两句话是一个爆红,也就是报错状态:

image.png

然后我们回到我们的做题的地方 - template.ts,它里面原本的 HelloWorld 类型是 any,按照刚刚的判断我们要给他改成 string 类型:

image.png

这样之后,测试文件那边也就不会爆红色了,这就说明我们的编译能够通过了。

然后以上大概就是在本地进行一个做题的方法,通过一个最简单的 hello-world 来进行了一个热身。

总结

本系列会慢慢力所能及的刷一部分typescript 类型体操的题目,并且从下一篇开始会从简单题一题题进行,讲解题目所用到的知识点,以及解决方法。