likes
comments
collection

ts|基础知识点回顾&&复习入门项目🍄🍄

作者站长头像
站长
· 阅读数 16

对ts的基本认识

A ts是未来的发展语言,为什么这么说,因为Google的Angular、vue源码、React、微信小程序都开始采用这个语言,这足以看出这个语言的重要性

ts的特点:类型系统和完整的面向对象编程,关于这2点我只有后续的学习再去体会了。

ts的包含了es567,可见ts是js的超集,js学的好,ts可能上手更快吧🍿

搭建ts的环境

ts新增的类型和面向对象的方式,浏览器和node.js是不会识别和执行的,因为浏览器和node.js只能运行js代码

这个时候就需要一个工具将ts转成浏览器和node.js能识别的代码,这个工具就是ts环境

所以需要全局安装

npm install -g typescript

检验安装

tsc -v

浏览器和node.js 运行ts程序

浏览器

// 01-hello.ts
function sayHi(name: string): void {
	console.log('hi' + name)
}
let myName: string = 'kvon'
sayHi(myName)

新建一个html文件,引入ts文件,发现控制台会报错,是无法处理这个ts中的代码的,所以需要翻译一步

tsc 01-hello.ts

这个时候会自动生成一个js文件

// 01-hello.js
function sayHi(name) {
    console.log('hi' + name);
}
var myName = 'kvon';
sayHi(myName);

这个时候我们html文件引入的是js文件,而不是ts,控制台也按照预期输出了

node.js

在浏览器运行ts的操作,已经完成了,接下来处理在node.js环境下运行ts

直接运行node 01-hello.ts 是会报错的

但是每次使用tsc去编译就很麻烦。这个时候我们就需要一个插件可以帮我们自动翻译

npm i -g ts-node

之后直接运行ts-node 01-hello.ts就可以在控制台输出值了

但是我在操作这步的时候,遇到了bug 报错

Error: Cannot find module '@types/node/package.json........'

解决方案:

npm install -g tslib @types/node

学习文件目录:

ts|基础知识点回顾&&复习入门项目🍄🍄