1.安装typescript npm 包:
npm install -g typescript
2.查看安装好的版本检验:
tsc -v
3.编译一个typescript 文件:tsc hello.ts
4.运行一个ts文件:
首先安装ts-node ,ts-node需要在全局去安装。这里要用 npm 去全局安装
npm install -g ts-node
安装好后就可以开始运行ts文件了,示例如下:
//hello.ts
//布尔型类型
let b:boolean = false
//字符串类型
let output:string = 'Hello World'
//数字类型
let num:number = 1
//数组类型
let arr1:number[] = [1,2,3]
let arrStr:string[] = ['a','b']
let arr2:Array<string> = ['a','b']
//元组
let tuple: [string, number, boolean] = ['a',1,false]
console.log('boolean布尔型类型:',b,'--string字符串类型:',output,'--number数字类型:',num,'--数组类型==>number[]:',arr1,'--string[]:',arrStr,'--Array<string>:',arr2,'--[string, number, boolean]元组:',tuple)
//接口
interface IUser { //关键字
name:string
age:number
}
let user:IUser = {name:'wu',age:10}
//接口的继承
interface IStudent extends IUser {
readonly DNA:string //readonly只可读,不可修改
CET4:Boolean
CET6?:Boolean //接口中的可选属性 加个?
}
let student1:IStudent = {DNA:'111',name:'wu',age:10,CET4:true}
let student2:IStudent = {DNA:'222',name:'wu',age:10,CET4:true,CET6:true}
console.log('interface接口:',user,'--extends接口的继承1:',student1,'--extends接口的继承2:',student2)
//接口的类型:
//函数型接口
interface IFunc {
(name:string):void
}
let f:IFunc = (a:string):void => {
console.log('--函数型接口:',a)
}
f('aa')
//可索引类型得接口
interface IIndex{
[index:string]:string
}
let index:IIndex = {username:'Tom',nickname:'haha'}
console.log('--可索引类型得接口[index:string]:string:',index)
在控制台下输入:
ts-node index.ts(要运行的文件)
此时遇到一个问题如下:
解决办法如下:
error TS2584: Cannot find name ‘console‘. Do you need to change your target library?_丶乘风破浪丶的博客-CSDN博客
npm install -D tslib @types/node
原因:
console 不属于 EcmaScript 标准。DOM 里面的 console 是浏览器环境下的,属于浏览器BOM API,Node 里面的 console 是 Node.js 里面的,由nodejs自己定义的API,两者虽然有同样的功能,但是并不是同一个东西
解决:
npm install -D tslib @types/node
该命令是安装TypeScript助手的运行时库,包含所有TypeScript辅助函数
安装好如下依赖
npm install -D typescript | yarn add typescript -D
npm install -D ts-node | yarn add ts-node -D
npm install -D tslib @types/node | yarn add tslib @types/node -D
最后就可以照常运行,输出如下:
ts的基础了解:
下尝试一个ts项目小例子 :
1.目录下创建handle-themes-file文件夹作为项目根目录
2.yarn init 或者npm init初始化项目,按照控制台提示依次填写项目相关信息:包括项目名称,版本号,项目描述,作者,项目所采用的是否开源协议,是否为私有状态等。
3.在根目录下创建tsconfig.json文件,如下所示:
4.更目录下新建lib文件夹和main.ts
5.在lib文件下新增HandleThemes.ts,编写一个获取文件下所有文件的方法,代码如下所示:
6.接着,在main.ts下导入HandleThemes.ts,实例化后,调用getFolderFiles方法,如下所示:
7.在ts-node的文档中,我们知道了在终端/命令行进入我们的项目根目录,执行ts-node xxx.ts
就能执行了,此处我们运行文件是main.ts
文件,然而,事情并没我们现象的那么顺利,命令执行后,会看到如下所示的报错:
看报错提示,让在package.json
中添加一个type
类型为module
的字段,那么我们就声明下,如下所示:
{
"type": "module"
}
当我再次运行时,它又换了新的报错。
还是不行,最后的解决方案是上述配置不在package.json里修改,删掉刚在里边的配置的type,改在tsconfig.json里配置才行,修改里边如下这两个配置
{
"compilerOptions": {
"module": "CommonJS",
"types": [
"node"
]
}
}
最后在终端成功执行: