什么是TypeScript
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,兼容JavaScript,可以载入JS代码然后运行。它与JavaScript相比进步的地方包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销。 而JavaScript只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概念,而TypeScript扩展实现了这些特性。
优势
更多的规则和类型限制,让代码预测性更高,可控性更高,易于维护和调试。
对模块、命名空间和面向对象的支持,更容易组织代码开发大型复杂程序。
TypeScript 的编译步骤可以捕获运行之前的错误。
安装和环境搭建
通过 npm 全局安装 TypeScript:
npm i -g typescript
如何使用
与JavaScript不同 TypeScript需要写在文件后缀名为.ts的文件中,当然 这不代表他就能运行,我们还需要通过终端输入tsc xxx.ts将这个.ts文件编译为js才能运行, 因为浏览器无法解析ts文件的代码,所以我们需要将ts代码编译为js代码。
编译完成后会在当前目录生成名为xxx.js的文件。
我们先来写第一个 TyepScript 代码,就抄官网上的:
function greeter(person) {
return 'Hello, ' + person;
}
let user = 'Jane User';
console.log(user);
保存为 main.ts,然后在终端中编译:(注意!路径不要错了!)
tsc main.ts
function greeter(person) {
return 'Hello, ' + person;
}
let user = 'Jane User';
console.log(user);
此时,tcs 将把 main.ts 翻译成 JavaScript 代码,并在当前目录下保存为同名的 js 文件 main.js。
tsc 还支持一次编译多个文件列表或者使用通配符编译全部文件,例如
tsc main.ts index.ts
还有一个高级的玩法是监听文件变化,当发生改变时自动编译,这样我们在学习 TS 的时候写一下,然后很方便的看看是什么意思:
tsc main.ts --watch
TS的数据类型:(11种)
boolean --布尔类型
关键字:boolean
表示逻辑值:true 和 false。
let flag: boolean = true;
number --数字类型
关键字:number
双精度 64 位浮点值。它可以用来表示整数和分数。
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
string --字符串类型
关键字:string
一个字符系列,使用单引号(’)或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。
let name: string = "Runoob";
let years: number = 5;
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
array --数组类型
声明变量为数组。
// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array<number> = [1, 2];
tuple --元祖类型
元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
let x: [string, number];
x = ['Runoob', 1]; // 运行正常
x = [1, 'Runoob']; // 报错
console.log(x[0]); // 输出 Runoob
enum --枚举类型
关键字:enum
枚举类型用于定义数值集合。
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2
any --任意类型
声明为 any 的变量可以赋予任意类型的值。
null --表示对象值缺失。
关键字:null
undefined --用于初始化变量为一个未定义的值
关键字:undefined
void --用于标识方法返回值的类型,表示该方法没有返回值。
关键字:void
never --never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。
关键字:never
注意:TypeScript 和 JavaScript 没有整数类型。