关于学习TS的一些准备

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

要去了解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文件,编写如下内容

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');

初始化项目依赖。

# 进入的创建的文件夹下初始化package.json
pnmm init

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

TS编译成JS并运行

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

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

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');
# 运行文件
node study.js
# 输出`23333`说明环境正常

不编译直接运行

npx ts-node study.ts

自动编译

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

VsCode中

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

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

4k 美丽海边房子 动漫风景 天空


关于学习TS的一些准备
https://wangijun.com/2023/02/09/vue-06/
作者
无良芳
发布于
2023年2月9日
许可协议