1. JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,TypeScript 通过类型注解提供编译时的静态类型检查。
const hello : string = "Hello World!"
console.log(hello)
2. 安装
npm install -g typescript
2.1 查看版本
tsc -v
2.2 第一行helloword
- 扩展文件名是:
.ts
- 新建.ts文件
var message:string = "Hello World"
console.log(message)
- 终端执行:
tsc app.ts
同时编译多个ts
文件:tsc file1.ts file2.ts file3.ts
- 这时候在当前目录下(与 app.ts 同一目录)就会生成一个 app.js 文件,代码如下:
var message = "Hello World";
console.log(message);
- 使用 node 命令来执行 app.js 文件:
node app.js
- TypeScript 通过 TypeScript Compiler 转换为 JavaScript
3. TypeScript 基础语法
- 区分大小写
- 分号可选(同一行使用;不同行可以不使用)
- 面向对象
4. TypeScript 基础类型
TypeScript 包含的数据类型如下:
- any:声明为 any 的变量可以赋予任意类型的值。
任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。//1. 变量的值会动态改变时,任意值类型可以让这些变量跳过编译阶段的类型检查 let x: any = 1; // 数字类型 x = 'I am who I am'; // 字符串类型 x = false; // 布尔类型 //2. 改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查 let x: any = 4; x.ifItExists(); // 正确,ifItExists方法在运行时可能存在,但这里并不会检查 x.toFixed(); // 正确 //3. 定义存储各种类型数据的数组时 let arrayList: any[] = [1, false, 'fine']; arrayList[1] = 100;
- number:双精度 64 位浮点值。它可以用来表示整数和分数
let hexLiteral: number = 0xf00d; // 十六进制
- string:一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
- boolean
- 数组类型
// 在元素类型后面加上[] 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 x = ['Runoob2', 2]; console.log(x[1]); //输出 Runoob2 2
- enum:枚举类型用于定义数值集合。
- void:用于标识方法返回值的类型,表示该方法没有返回值。
function hello(): void { alert("Hello Runoob"); }
- null:表示对象值缺失。用 typeof 检测 null 返回是 object。
- undefined:用于初始化变量为一个未定义的值,typeof 一个没有值的变量会返回 undefined。
//Null 和 Undefined 是其他任何类型(包括 void)的子类型,可以赋值给其它类型,如数字类型,此时,赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验(--strictNullChecks)特性,就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型 // 启用 --strictNullChecks let x: number; x = 1; // 编译正确 x = undefined; // 编译错误 x = null; // 编译错误 //用 | 来支持多种类型 // 启用 --strictNullChecks let x: number | null | undefined; x = 1; // 编译正确 x = undefined; // 编译正确 x = null; // 编译正确
- 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) {} }
5.TypeScript 变量声明
TypeScript 变量的命名规则:
变量名称可以包含数字和字母。
除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。
变量名不能以数字开头。
四种方式来声明变量:
//声明变量的类型及初始值
var [变量名] : [类型] = 值;
//声明变量的类型,但没有初始值,变量值会设置为 undefined:
var [变量名] : [类型];
//声明变量并初始值,但不设置类型,该变量可以是任意类型:
var [变量名] = 值;
//声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined:
var [变量名];
注意:变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。
类型断言(Type Assertion):允许变量从一种类型更改为另一种类型。
类型断言是一个编译时语法,不涉及运行时【而类型转换是运行时语法】类型断言不是类型转换,它不会真的影响到变量的类型
值 as 类型(推荐)或 <类型>值
形如 <Foo>
的语法在 ts
中除了表示类型断言之外,也可能是表示一个泛型,故建议在使用类型断言时,使用 值 as 类型
语法
断言参考
类型断言是有限制的,并不是任何一个类型都可以被断言为任何另一个类型。具体来说,若 A 兼容 B,那么 A 能够被断言为 B,B 也能被断言为 A
双重断言
使用双重断言,则可以打破要使得A能够被断言为 B,只需A 兼容 B 或B兼容A即可的限制,可以使用双重断言 as any as Foo ,将任何一个类型断言为任何另一个类型
类型推断
当类型没有给出时,TypeScript 编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态 any 类型。
var num = 2; // 类型推断为 number
console.log("num 变量的值为 "+num);
num = "12"; // 编译错误
console.log(num);
变量作用域
-
全局作用域 − 全局变量定义在程序结构的外部,它可以在你代码的任何位置使用。
-
类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头,但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。
-
局部作用域 − 局部变量,局部变量只能在声明它的一个代码块(如:方法)中使用。
var global_num = 12 // 全局变量
class Numbers {
num_val = 13; // 实例变量
static sval = 10; // 静态变量
storeNum():void {
var local_num = 14; // 局部变量
}
}
console.log("全局变量为: "+global_num)
console.log(Numbers.sval) // 静态变量
var obj = new Numbers();
console.log("实例变量: "+obj.num_val)
6 TypeScript 运算符
算术运算符
逻辑运算符
关系运算符
按位运算符
赋值运算符
三元/条件运算符
字符串运算符
类型运算符
typeof 是一元运算符,返回操作数的数据类型。
其他运算符
- 负号运算符(-)
- 字符串运算符: 连接运算符 (+)
7. TypeScript 条件语句
- if
- if…else
- if…else if…else
- switch…case
8 TypeScript 循环
- for( ; ; ){}
- for(i in list){}
- for(i of list){}
- forEach
- every
- some
- while(){}
- do{}where()
break:语句会停止执行最内层的循环
continue:会跳过当前循环中的代码,强迫开始下一次循环
//for in
var j:any;
var n:any = "a b c"
for(j in n) {
console.log(n[j])
}
//for of
let someArray = [1, "string", false];
for (let entry of someArray) {
console.log(entry); // 1, "string", false
}
//foreach
let list = [4, 5, 6];
list.forEach((val, idx, array) => {
// val: 当前值
// idx:当前index
// array: Array
});
//every
let list = [4, 5, 6];
list.every((val, idx, array) => {
// val: 当前值
// idx:当前index
// array: Array
return true; // Continues
// Return false will quit the iteration
});