关于学习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
自动编译
- 生成tsconfig.json配置文件
npx tsc --init
- 修改 tsconfig.json 配置文件
"outDir": "./js" /* 指定编译后的输出目录 */
- 测试
VsCode中
终端 –> 运行任务 –> 选择 tsc:监视-tsconfig.json
这样在修改 ts 文件内容,保存时会自动编译。