官网是最好的学习方法，这点毋庸置疑，奈何英文水平不咋地，也不能去埋怨为什么没有中文文档，文字看不很懂，代码看得懂日子也还过得下去这样子。

要去了解TS之前，对于JS还是要有一定深度的理解，这个理解我想说的是对于语言本身的理解，而非一些框架的理解，框架今天这个流行，明天那个落后的，但是这些框架所用的语言JS/TS，落伍的可能性远远要比框架要低，框架变来变去，所以对于语言的学习理解，是不亏的，磨刀不误砍柴工的道理吧。

工具的学习和使用，VsCode无需多言，前端御用，至少目前在编写TS这块，WebStorm不如VsCode，VsCode的基础用法以及工作区的概念，不过也无需过多深入，能用就行，简单用来写写学习的Demo挺简单。

一些环境，Node的安装，npm的配置，pnpm（推荐用这个）的配置，不配置也能用，配置了用的话也许会好点，配置包管理器的缓存地址会缓解Win系统C盘的占用问题，配置镜像是为了不去穿那层墙，以获取更快的包下载速度。如果有人能够忍受？？

前端工具一条龙

遇到问题的话，优先去官网查看，或者通过关于界面中我的信息找到我问问我即可（随缘）。

一切准备就绪完成，在D盘根目录或者别的目录新建一个名为ts_study的文件夹，然后使用VsCode打开。

好的，我们把这个文件夹当成VsCode的一个工作区，这个概念我不知道怎么解释，VsCode有个工作区的概念，一般我们正常使用就是一个文件夹一个工作区，有些时候我们需要一个一个目录中有多个文件夹，每个文件夹也是个独立的工作区时，我们就需要VsCode中工作空间（WorkSpace），感兴趣可以自行去了解了解。

新建study.ts文件，编写如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface User {
    name: string;
    age: number;
    sax: string;
}

class UserAccunt {
    name: string;
    age: number;
    sax: string;

    constructor(name: string, age: number, sax: string) {
        this.name = name;
        this.age = age;
        this.sax = sax;
    }
}
const user: User = new UserAccunt("charAt", 24, "男");
console.log('23333');

初始化项目依赖。

1
2
3
4
5
6
7
8
# 进入的创建的文件夹下初始化package.json
pnmm init

# 安装对应的依赖
pnpm install -D typescript
pnpm install -D tslib @types/node
pnpm install -D ts-node

TS编译成JS并运行

1
2
# 如果是全局安装则可省略npx
npx tsc study.ts

不报错会在目录下生成同名的js文件

1
2
3
4
5
6
7
8
9
10
11
var UserAccunt = /** @class */ (function () {
    function UserAccunt(name, age, sax) {
        this.name = name;
        this.age = age;
        this.sax = sax;
    }
    return UserAccunt;
}());
var user = new UserAccunt("charAt", 24, "男");
console.log('23333');

1
2
3
# 运行文件
node study.js
# 输出`23333`说明环境正常

不编译直接运行

1
npx ts-node study.ts

自动编译

  1. 生成tsconfig.json配置文件
1
npx tsc --init
  1. 修改 tsconfig.json 配置文件
1
"outDir": "./js" /* 指定编译后的输出目录 */
  1. 测试

VsCode中

终端 –> 运行任务 –> 选择 tsc:监视-tsconfig.json

这样在修改 ts 文件内容，保存时会自动编译。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~