双精度 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
1. TypeScript 变量的命名规则：
变量名称可以包含数字和字母
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格
变量名不能以数字开头
我们可以使用以下四种方式来声明变量：
声明变量的类型及初始值：
var [变量名] : [类型] = 值;
例如：
var uname:string = "Runoob";
声明变量的类型，但没有初始值，变量值会设置为 undefined：
var [变量名] : [类型];
例如：
var uname:string;
声明变量并初始值，但不设置类型，该变量可以是任意类型：
var [变量名] = 值;
例如：
var uname = "Runoob";
声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：
var [变量名];
例如：
var uname;
2. 类型断言
类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。
语法格式：
<类型>值
或:
值 as 类型
实例
var str = '1'
var str2:number = <number> <any> str //str、str2 是 string 类型
3. 类型推断
当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。
var num = 2; // 类型推断为 number
console.log("num 变量的值为 "+num);
num = "12"; // 编译错误
console.log(num);
第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。
第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会错误。因为变量已经设置为了 number 类型。
error TS2322: Type '"12"' is not assignable to type 'number'.
4. 变量作用域
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. 运算符
1. 算术运算符
var num1:number = 10
var num2:number = 2
var res:number = 0
res = num1 + num2
console.log("加: "+res);
res = num1 - num2;
console.log("减: "+res)
res = num1*num2
console.log("乘: "+res)
res = num1/num2
console.log("除: "+res)
res = num1%num2
console.log("余数: "+res)
num1++
console.log("num1 自增运算: "+num1)
num2--
console.log("num2 自减运算: "+num2)
2. 逻辑运算符
var avg:number = 20;
var percentage:number = 90;
console.log("avg 值为: "+avg+" ,percentage 值为: "+percentage);
var res:boolean = ((avg>50)&&(percentage>80));
console.log("(avg>50)&&(percentage>80): ",res);
var res:boolean = ((avg>50)||(percentage>80));
console.log("(avg>50)||(percentage>80): ",res);
var res:boolean=!((avg>50)&&(percentage>80));
console.log("!((avg>50)&&(percentage>80)): ",res);
3. 关系运算符
var num1:number = 5;
var num2:number = 9;
console.log("num1 的值为: "+num1);
console.log("num2 的值为:"+num2);
var res = num1>num2
console.log("num1 大于n num2: "+res)
res = num1<num2
console.log("num1 小于 num2: "+res)
res = num1>=num2
console.log("num1 大于或等于 num2: "+res)
res = num1<=num2
console.log("num1 小于或等于 num2: "+res)
res = num1==num2
console.log("num1 等于 num2: "+res)
res = num1!=num2
console.log("num1 不等于 num2: "+res)
4. 按位运算符
var a:number = 2; // 二进制 10
var b:number = 3; // 二进制 11
var result;
result = (a & b);
console.log("(a & b) => ",result)
result = (a | b);
console.log("(a | b) => ",result)
result = (a ^ b);
console.log("(a ^ b) => ",result);
result = (~b);
console.log("(~b) => ",result);
result = (a << b);
console.log("(a << b) => ",result);
result = (a >> b);
console.log("(a >> b) => ",result);
result = (a >>> 1);
console.log("(a >>> 1) => ",result);
5. 赋值运算符
var a: number = 12
var b:number = 10
a = b
console.log("a = b: "+a)
a += b
console.log("a+=b: "+a)
a -= b
console.log("a-=b: "+a)
a *= b
console.log("a*=b: "+a)
a /= b
console.log("a/=b: "+a)
a %= b
console.log("a%=b: "+a)
6. 三元/条件运算符
var num:number = -2
var result = num > 0 ? "大于 0" : "小于 0，或等于 0"
console.log(result)
7. 字符串运算符
负号运算符(-)
更改操作数的符号，查看以下实例：
var x:number = 4
var y = -x;
console.log("x 值为: ",x); // 输出结果 4
console.log("y 值为: ",y); // 输出结果 -4
字符串运算符: 连接运算符 (+)
+ 运算符可以拼接两个字符串，查看以下实例：
var msg:string = "RUNOOB"+".COM"
console.log(msg)
8. 类型运算符
typeof 运算符
typeof 是一元运算符，返回操作数的数据类型。
var num = 12
console.log(typeof num); //输出结果: number
instanceof
instanceof 运算符用于判断对象是否为指定的类型，后面章节我们会具体介绍它。
7. 条件语句
在 TypeScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
1、
var num:number = 5
if (num > 0) {
console.log("数字是正数")
}
2.
var num:number = 12;
if (num % 2==0) {
console.log("偶数");
} else {
console.log("奇数");
}
3.
var num:number = 12;
if (num % 2==0) {
console.log("偶数");
} else {
console.log("奇数");
}
switch 语句的语法：
switch(expression){
case constant-expression :
statement(s);
break; /* 可选的 */
case constant-expression :
statement(s);
break; /* 可选的 */
/* 您可以有任意数量的 case 语句 */
default : /* 可选的 */
statement(s);
}
example:
var grade:string = "A";
switch(grade) {
case "A": {
console.log("优");
break;
}
case "B": {
console.log("良");
break;
}
case "C": {
console.log("及格");
break;
}
case "D": {
console.log("不及格");
break;
}
default: {
console.log("非法输入");
break;
}
}
8. 循环语句
// for
for ( init; condition; increment ){
statement(s);
}
// for ... in
for (var val in list) {
//语句
}
// 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
});
// while
var num:number = 5;
var factorial:number = 1;
while(num >=1) {
factorial = factorial * num;
num--;
}
console.log("5 的阶乘为："+factorial);
// do ... while
var n:number = 10;
do {
console.log(n);
n--;
} while(n>=0);
// break
var i:number = 1
while(i<=10) {
if (i % 5 == 0) {
console.log ("在 1~10 之间第一个被 5 整除的数为 : "+i)
break // 找到一个后退出循环
}
i++
} // 输出 5 然后程序执行结束
// continue
var num:number = 0
var count:number = 0;
for(num=0;num<=20;num++) {
if (num % 2==0) {
continue
}
count++
}
console.log ("0 ~20 之间的奇数个数为: "+count) //输出10个偶数
// 无限循环
for(;;) {
// 语句
}
9. 函数
1. 函数定义及调用
function test() { // 函数定义
console.log("调用函数")
}
test() // 调用函数
2. 函数返回值
// 函数定义
function greet():string { // 返回一个字符串
return "Hello World"
}
function caller() {
var msg = greet() // 调用 greet() 函数
console.log(msg)
}
// 调用函数
caller()
3. 带参数函数
function add(x: number, y: number): number {
return x + y;
}
console.log(add(1,2))
4. 可选参数和默认参数
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr."); // 错误，参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams", "Sr."); // 错误，参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
function calculate_discount(price:number,rate:number = 0.50) {
var discount = price * rate;
console.log("计算结果: ",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)
5. 剩余参数
有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。
剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。
function addNumbers(...nums:number[]) {
var i;
var sum:number = 0;
for(i = 0;i<nums.length;i++) {
sum = sum + nums[i];
}
console.log("和为：",sum)
}
addNumbers(1,2,3)
addNumbers(10,10,10,10,10)
6. 匿名函数
匿名函数是一个没有函数名的函数。
匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。
我们可以将匿名函数赋值给一个变量，这种表达式就成为函数表达式。
var msg = function() {
return "hello world";
}
console.log(msg())
带参数匿名函数：
var res = function(a:number,b:number) {
return a*b;
};
console.log(res(12,2))
匿名函数自调用：
匿名函数自调用在函数后使用 () 即可：
(function () {
var x = "Hello!!";
console.log(x)
})()
构造函数：
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);
Lambda 函数：
Lambda 函数也称之为箭头函数。
箭头函数表达式的语法比函数表达式更短
var foo = (x:number)=>10 + x
console.log(foo(100)) //输出结果为 110
函数重载：
重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。
10. array
初始化：
var sites:string[];
sites = ["Google","Runoob","Taobao"]
console.log(sites[0]);
console.log(sites[1]);
var nums:number[] = [1,2,3,4]
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);
var arr_names:number[] = new Array(4)
for(var i = 0; i<arr_names.length; i++) {
arr_names[i] = i * 2
console.log(arr_names[i])
}
数组解构：
我们也可以把数组元素赋值给变量，如下所示：
var arr:number[] = [12,13]
var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x)
console.log(y)
数组迭代：
我们可以使用 for 语句来循环输出数组的各个元素：
var j:any;
var nums:number[] = [1001,1002,1003,1004]
for(j in nums) {
console.log(nums[j])
}
数组在函数中的使用：
作为参数传递给函数
var sites:string[] = new Array("Google","Runoob","Taobao","Facebook")
function disp(arr_sites:string[]) {
for(var i = 0;i<arr_sites.length;i++) {
console.log(arr_sites[i])
}
}
disp(sites);
作为函数的返回值：
function disp():string[] {
return new Array("Google", "Runoob", "Taobao", "Facebook");
}
var sites:string[] = disp()
for(var i in sites) {
console.log(sites[i])
}
序号
方法 & 描述
实例
1.
concat()连接两个或更多的数组，并返回结果。
var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; var alphaNumeric = alpha.concat(numeric); console.log("alphaNumeric : " + alphaNumeric ); // a,b,c,1,2,3
2.
every()检测数值元素的每个元素是否都符合条件。
function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); console.log("Test Value : " + passed ); // false
3.
filter()检测数值元素，并返回符合条件所有元素的数组。
function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].filter(isBigEnough); console.log("Test Value : " + passed ); // 12,130,44
4.
forEach()数组每个元素都执行一次回调函数。
let num = [7, 8, 9]; num.forEach(function (value) { console.log(value); }); 编译成 JavaScript 代码：var num = [7, 8, 9]; num.forEach(function (value) { console.log(value); // 7 8 9 });
5.
indexOf()搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项。
var index = [12, 5, 8, 130, 44].indexOf(8); console.log("index is : " + index ); // 2
6.
join()把数组的所有元素放入一个字符串。
var arr = new Array("Google","Runoob","Taobao"); var str = arr.join(); console.log("str : " + str ); // Google,Runoob,Taobao var str = arr.join(", "); console.log("str : " + str ); // Google, Runoob, Taobao var str = arr.join(" + "); console.log("str : " + str ); // Google + Runoob + Taobao
var index = [12, 5, 8, 130, 44].lastIndexOf(8); console.log("index is : " + index ); // 2
8.
map()通过指定函数处理数组的每个元素，并返回处理后的数组。
var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); console.log("roots is : " + roots ); // 1,2,3
9.
pop()删除数组的最后一个元素并返回删除的元素。
var numbers = [1, 4, 9]; var element = numbers.pop(); console.log("element is : " + element ); // 9 var element = numbers.pop(); console.log("element is : " + element ); // 4
10.
push()向数组的末尾添加一个或更多元素，并返回新的长度。
var numbers = new Array(1, 4, 9); var length = numbers.push(10); console.log("new numbers is : " + numbers ); // 1,4,9,10 length = numbers.push(20); console.log("new numbers is : " + numbers ); // 1,4,9,10,20
11.
reduce()将数组元素计算为一个值（从左到右）。
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6
12.
reduceRight()将数组元素计算为一个值（从右到左）。
var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6
13.
reverse()反转数组的元素顺序。
var arr = [0, 1, 2, 3].reverse(); console.log("Reversed array is : " + arr ); // 3,2,1,0
14.
shift()删除并返回数组的第一个元素。
var arr = [10, 1, 2, 3].shift(); console.log("Shifted value is : " + arr ); // 10
var arr = new Array("orange", "mango", "banana", "sugar"); var str = arr.toString(); console.log("Returned string is : " + str ); // orange,mango,banana,sugar
20.
unshift()向数组的开头添加一个或更多元素，并返回新的长度。
var arr = new Array("orange", "mango", "banana", "sugar"); var length = arr.unshift("water"); console.log("Returned array is : " + arr ); // water,orange,mango,banana,sugar console.log("Length of the array is : " + length ); // 5
11. map
Map 对象保存键值对，并且能够记住键的原始插入顺序。
初始化：
let myMap = new Map([
["key1", "value1"],
["key2", "value2"]
]);
Map 相关的函数与属性：
map.clear() – 移除 Map 对象的所有键/值对 。
map.set() – 设置键值对，返回该 Map 对象。
map.get() – 返回键对应的值，如果不存在，则返回 undefined。
map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
map.size – 返回 Map 对象键/值对的数量。
map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。
迭代：
let nameSiteMapping = new Map();
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
console.log(key);
}
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
console.log(value);
}
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
console.log(entry[0], entry[1]);
}
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
console.log(key, value);
}
12. 元组
我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。
元组中允许存储不同类型的元素，元组可以作为参数传递给函数。
声明一个元组并初始化：
var mytuple = [10,"Runoob"];
或者我们可以先声明一个空元组，然后再初始化：
var mytuple = [];
mytuple[0] = 120
mytuple[1] = 234
元组运算
我们可以使用以下两个函数向元组添加新元素或者删除元素：
push() 向元组添加元素，添加在最后面。
pop() 从元组中移除元素（最后一个），并返回移除的元素
var mytuple = [10,"Hello","World","typeScript"];
console.log("添加前元素个数："+mytuple.length) // 返回元组的大小
mytuple.push(12) // 添加到元组中
console.log("添加后元素个数："+mytuple.length)
console.log("删除前元素个数："+mytuple.length)
console.log(mytuple.pop() +" 元素从元组中删除") // 删除并返回删除的元素
console.log("删除后元素个数："+mytuple.length)
更新元组
元组是可变的，这意味着我们可以对元组进行更新操作：
var mytuple = [10, "Runoob", "Taobao", "Google"]; // 创建一个元组
console.log("元组的第一个元素为：" + mytuple[0])
// 更新元组元素
mytuple[0] = 121
console.log("元组中的第一个元素更新为："+ mytuple[0])
解构元组
我们也可以把元组元素赋值给变量，如下所示：
var a =[10,"Runoob"]
var [b,c] = a
console.log( b )
console.log( c )
13. 联合类型
联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。
注意：只能赋值指定的类型，如果赋值其它类型就会报错。
var val:string|number
val = 12
console.log("数字为 "+ val)
val = "Runoob"
console.log("字符串为 " + val)
也可以将联合类型作为函数参数使用：
function disp(name:string|string[]) {
if(typeof name == "string") {
console.log(name)
} else {
var i;
for(i = 0;i<name.length;i++) {
console.log(name[i])
}
}
}
disp("Runoob")
console.log("输出数组....")
disp(["Runoob","Google","Taobao","Facebook"])
我们也可以将数组声明为联合类型：
var arr:number[]|string[];
var i:number;
arr = [1,2,4]
console.log("**数字数组**")
for(i = 0;i<arr.length;i++) {
console.log(arr[i])
}
arr = ["Runoob","Google","Taobao"]
console.log("**字符串数组**")
for(i = 0;i<arr.length;i++) {
console.log(arr[i])
}
扫一扫
1935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
