typeScript的安装及基础使用示例

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

最后在终端成功执行：