TypeScript教程(二)基础语法与基础类型
一、基础语法
TypeScript由以下几个部分组成
1.模块
2.函数
3.变量
4.语句和表达式
5.注释
示例:
Runoob.ts 文件代码:
const hello : string = "Hello World!"
console.log(hello)
以上代码首先通过 tsc 命令编译:
tsc Runoob.ts
Runoob.js 文件代码:
var hello = "Hello World!";
console.log(hello);
最后我们使用 node 命令来执行该 js 代码。
$ node Runoob.js
Hello World
tsc 常用编译参数如下表所示:
序号 | 编译参数说明 |
---|---|
1. | --help 显示帮助信息 |
2. | --module 载入扩展模块 |
3. | --target 设置 ECMA 版本 |
4. | --declaration 额外生成一个 .d.ts 扩展名的文件。 tsc ts-hw.ts --declaration 以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。 |
5. | --removeComments 删除文件的注释 |
6. | --out 编译多个文件并合并到一个输出的文件 |
7. | --sourcemap 生成一个 sourcemap (.map) 文件。 sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。 |
8. | --module noImplicitAny 在表达式和声明上有隐含的 any 类型时报错 |
9. | --watch 在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。 |
TypeScript 保留关键字:
break | as | catch | switch |
case | if | throw | else |
var | number | string | get |
module | type | instanceof | typeof |
public | private | enum | export |
finally | for | while | void |
null | super | this | new |
in | return | true | false |
any | extends | static | let |
package | implements | interface | function |
do | try | yield | const |
continue |
空白和换行:
TypeScript会忽略程序中出现的空格,制表符和换行符
空格,制表符通常用来缩进代码,使代码易于阅读和理解
TypeScript区分大小写字符
分号是可选的
单行指令都是一段语句,可以使用分号或不使用,建议使用
TypeScript与面向对象
面向对象是一种对现实世界理解和抽象的方法
TypeScript是一种面向对象的编程语言
面向对象主要有两个概念:对象和块
对象:对象是类的一个实例,有状态和行为
类:类是一个模板,描述的是一类对象的行为和状态
方法:方法是类的操作的实现步骤
示例:
TypeScript面向对象编程
class Site {
name():void {
console.log("Runoob")
}
}
var obj = new Site();
obj.name();
以上示例定义了一个类Site,该类有一个方法name(),该方法在终端上输出字符串Runoob
new关键字创建类的对象,该对象调用方法name(),
编译后生成的JavaScript
var Site = /** @class */ (function () {
function Site() {
}
Site.prototype.name = function () {
console.log("Runoob");
};
return Site;
}());
var obj = new Site();
obj.name();
二、基础类型
数据类型 | 关键字 | 描述 |
---|---|---|
任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
数字类型 | number | 双精度 64 位浮点值。它可以用来表示整数和分数。 let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制 |
字符串类型 | string | 一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。 let name: string = "Runoob"; let years: number = 5; let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`; |
布尔类型 | boolean | 表示逻辑值:true 和 false。 let flag: boolean = true; |
数组类型 | 无 | 声明变量为数组。 // 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2]; |
元组 | 无 | 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。 let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob |
枚举 | enum | 枚举类型用于定义数值集合。 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2 |
void | void | 用于标识方法返回值的类型,表示该方法没有返回值。 function hello(): void { alert("Hello Runoob"); } |
null | null | 表示对象值缺失。 |
undefined | undefined | 用于初始化变量为一个未定义的值 |
never | never | never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。 |
注:TypeScript和JavaScript没有整数类型
1.Any类型
任意值是TypeScript针对编程时类型不明确的变量使用的一种数据类型
1.变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译器阶段的类型检查
let x: any = 1; // 数字类型
x = 'I am who I am'; // 字符串类型
x = false; // 布尔类型
2.改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查
let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;
2.Null和Undefined
null
在JavaScript中null表示"什么都没有",是一个只有一个值的特殊类型,表示一个空对象的引用
用TypeScript检测null返回是object
undefined
在JavaScript中,underfined是一个没有设置值的变量
typeof一个没有值的变量会返回undefined
null和undefined是其他任何类型(包括void)的子类型,可以赋值给其他类型,
而在JavaScript中,启用严格的空校验(--strictNullChecks)特性,就可以使得null和underfined只能被赋值给void或本身对应的类型:
// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined; // 编译错误
x = null; // 编译错误
上面例子的变量x只能是number类型,如果一个类型可能出现null或undefined,可以用 | 来支持多种类型
// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined; // 编译正确
x = null; // 编译正确
3.never类型
never是其他类型(包括null和undefined)的子类型,代表从不会出现的值,这意味着never只能被never类型所赋值,在函数中通常表现为抛出异常或无法执行到终点(例如无限循环)
let x: never;
let y: number;
// 编译错误,数字类型不能转为 never 类型
x = 123;
// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();
// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
while (true) {}
}