设计网站 常用字体河北专业网站制作

一.安装ts

1.命令行运行如下命令，全局安装 TypeScript：

npm install -g typescript

2.安装完成后，在控制台运行如下命令，检查安装是否成功

tsc -V 

二.创建ts文件

1.创建一个day01.ts文件，随便在里面码一点代码：

console.log("hello ts")

2.在命令行上，运行 TypeScript 编译器（手动编译为js文件）：

tsc day01.ts

输出结果为一个 day01.js 文件，它包含了和输入文件中相同的 JavsScript 代码。

3.在命令行上，通过 Node.js 运行这段代码：

node day01.js

控制台会打印出来

hello ts

4.vscode自动编译ts文件

1.  生成配置文件tsconfig.jsontsc --init
2.  修改tsconfig.json配置"outDir": "./js", //输出文件到当前文件下的js文件夹"strict": false,    
3.  启动监视任务: 终端 -> 运行任务 -> 监视tsconfig.json

三.基本类型的定义规范

1.基础语法：

首先在 TS 中，创建变量时，var、let、const 还是和 JS 中的使用方式一样，但是，在声明变量时需要约束变量的数据类型：

var 变量名: 类型 = 值;

2.基本定义示例：

var a:number = 1
var b:string = "hello"
var c:boolean = true
var d:undefined = undefined
var e:null = null

3.void

void 在 TS 中用来表示没有任何数据类型。通常，当一个函数没有返回值的时候，我们会将返回值的类型设置为 void，如果return了一个返回值会报错。

例如定义一个函数没有返回值：

function f(): void {console.log(123)
}

4.any

any 在 TS 中用来表示任意数据类型。通常，只有当值来自于一些动态的内容，我们在一开始确定不了值的类型，可以选择使用 any。其他情况下都不推荐使用 any：

var g: any = "hello"
g = 123
g = null

5.array

TS 中要求数组中的每一项必须是同一个数据类型。

var h: number[] = [1, 2, 3]
var i: Array<number> = [1,2,3] //定义的数组里只能存在number类型的数据//Array<string> = ["1","2","3"] //只能存在string类型的数据
var j: Array<any> = ["1", 2, true]   //如果存在不同类型推荐使用 any

6.元组

元组中，允许一个数组中保存多个类型的数据。

但是，要求数组中的值与元组类型必须：数量要对应、位置要对应、类型要对应。

var k: [number, string] = [1, "hello"]

7.object

 TS 中定义对象时，需要定义出对象中有哪些属性，每一个属性的值是什么类型。

var l: { id: number, name: string } = {id: 1,name: "逍遥的码农"
}

8.enum枚举

enum num {one,two,three
}
var m:num = num.one
console.log(m) //0

这里会输出0，因为枚举不赋值会取下标

赋值情况下看一下

enum num {one,two = 5,three
}
var m:num = num.three
console.log(m) //6

这里会输出6，这里会递增

（1）普通枚举（编译js会生成对应的代码）

//ts代码
enum num {one,two = 5,three
}
var m:num = num.three
console.log(m)//js代码
// var num;
// (function (num) {
//     num[num["one"] = 0] = "one";
//     num[num["two"] = 5] = "two";
//     num[num["three"] = 6] = "three";
// })(num || (num = {}));
// var m = num.three;
// console.log(m);

（2）常量枚举（编译后不会产生多余的代码）

//ts代码
const enum num {one,two = 5,three
}
var m:num = num.three
console.log(m)//js代码
// var m = 6 /* num.three */;

可以看到就编译了一行

9.never

never类型表示永远不会有值的一种类型。

// 返回never的函数必须存在无法达到的终点
// 因为总是抛出异常，所以 error 将不会有返回值
function error(message: string): never {throw new Error(message);
}
// 因为存在死循环，所以 infiniteLoop 将不会有返回值
function infiniteLoop(): never {while (true) {}
}