首页 前端知识 typeScript的安装及基础使用示例

typeScript的安装及基础使用示例

2024-07-08 09:07:50 前端知识 前端哥 663 839 我要收藏

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"
        ]
  }
}

最后在终端成功执行: 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13891.html
标签
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!