ts---基础语法及使用

ts的使用:

第一步:安装

npm config set registry https://registry.npmmirror.com
npm install -g typescript

安装成功后,可以检查是否安装成功:

tsc -v

一、变量的类型

1、任意类型 any 声明为 any 的变量可以赋予任意类型的值。

2、数字类型 number 双精度 64 位浮点值。它可以用来表示整数和分数。

3、字符串类型 string 一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。

4、布尔类型 boolean 表示逻辑值:true 和 false。

5、数组类型 无 声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array<number> = [1, 2];

6、元组 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

7、枚举 enum 枚举类型用于定义数值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

8、void void 用于标识方法返回值的类型,表示该方法没有返回值。

function hello(): void {
    alert("Hello Runoob");
}

9、null null 表示对象值缺失。

10、undefined undefined 用于初始化变量为一个未定义的值。

11、never never never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

二、类

类在ts里面,可以使用 class 来定义

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)

三、循环

1、常见的for循环

var num:number = 5; 
var i:number; 
var factorial = 1;  
for(i = num;i>=1;i--) {
   factorial *= i;
}
console.log(factorial)

还有 for in 循环

var j:any; 
var n:any = "a b c"  
for(j in n) {
    console.log(n[j])  
}

2、新增的 for of 

let someArray = [1, "string", false]; 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

3、forEach 循环

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx:当前index
    // array: Array
});

4、every 循环

因为 forEach 在 iteration 中是无法返回的,所以可以使用 every 和 some 来取代 forEach。

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx:当前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});

5、some 循环

6、while 循环

var num:number = 5; 
var factorial:number = 1;  
while(num >=1) { 
    factorial = factorial * num; 
    num--; 
} 
console.log("5 的阶乘为:"+factorial);

7、do while 循环

var n:number = 10;
do { 
    console.log(n); 
    n--; 
} while(n>=0);

四、函数

1、普通函数

// 函数定义
function greet():string { // 返回一个字符串
    return "Hello World" 
} 

2、带参数的函数

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

可选参数:

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)

剩余参数:

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

3、递归函数

在函数内调用函数

function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 调用自身
    } 
}; 
console.log(factorial(6));      // 输出 720

4、箭头函数

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

五、Number

var num = new Number(value);

1、toExponential() 把对象的值转换为指数计数法。

//toExponential() 
var num1 = 1225.30 
var val = num1.toExponential(); 
console.log(val) // 输出: 1.2253e+3

2、toFixed() 把数字转换为字符串,并对小数点指定位数。

var num3 = 177.234 
console.log("num3.toFixed() 为 "+num3.toFixed())    // 输出:177
console.log("num3.toFixed(2) 为 "+num3.toFixed(2))  // 输出:177.23
console.log("num3.toFixed(6) 为 "+num3.toFixed(6))  // 输出:177.234000

3、toLocaleString() 把数字转换为字符串,使用本地数字格式顺序。

var num = new Number(177.1234); 
console.log( num.toLocaleString());  // 输出:177.1234

4、toPrecision() 把数字格式化为指定的长度。

var num = new Number(7.123456); 
console.log(num.toPrecision());  // 输出:7.123456 
console.log(num.toPrecision(1)); // 输出:7
console.log(num.toPrecision(2)); // 输出:7.1

5、toString() 把数字转换为字符串,使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。

var num = new Number(10); 
console.log(num.toString());  // 输出10进制:10
console.log(num.toString(2)); // 输出2进制:1010
console.log(num.toString(8)); // 输出8进制:12

6、valueOf() 返回一个 Number 对象的原始数字值。

var num = new Number(10); 
console.log(num.valueOf()); // 输出:10

六、String

var txt = new String("string");
或者更简单方式:
var txt = "string";

1、charAt() 返回在指定位置的字符。
2、charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
3、concat() 连接两个或更多字符串,并返回新的字符串。
4、indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
5、lastIndexOf() 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。、
6、match() 查找找到一个或多个正则表达式的匹配。
7、replace() 替换与正则表达式匹配的子串
8、search() 检索与正则表达式相匹配的值
9、slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
10、split() 把字符串分割为子字符串数组。
11、substr() 从起始索引号提取字符串中指定数目的字符。
12、substring() 提取字符串中两个指定的索引号之间的字符。
13、toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写
14、toLocaleUpperCase() 据主机的语言环境把字符串转换为大写
15、toString() 返回字符串。
16、valueOf() 返回指定字符串对象的原始值。

七、Array

var sites:string[];
var numlist:number[] = [2,4,6,8]
var arr_names:number[] = new Array(4)  

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() 数组每个元素都执行一次回调函数。

5、indexOf() 搜索数组中的元素,并返回它所在的位置。如果搜索不到,返回值 -1,代表没有此项。
6、join() 把数组的所有元素放入一个字符串。
7、lastIndexOf() 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
8、map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
9、pop() 删除数组的最后一个元素并返回删除的元素。
10、push() 向数组的末尾添加一个或更多元素,并返回新的长度。
11、reduce() 将数组元素计算为一个值(从左到右)。
12、reduceRight() 将数组元素计算为一个值(从右到左)。
13、reverse() 反转数组的元素顺序。
14、shift() 删除并返回数组的第一个元素。
15、slice() 选取数组的的一部分,并返回一个新数组。
16、some() 检测数组元素中是否有元素符合指定条件。
17、sort() 对数组的元素进行排序。
18、splice() 从数组中添加或删除元素。
19、toString() 把数组转换为字符串,并返回结果。
20、unshift() 向数组的开头添加一个或更多元素,并返回新的长度。

八、Map

Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

let myMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]); 

1、map.clear() – 移除 Map 对象的所有键/值对 。
2、map.set() – 设置键值对,返回该 Map 对象。
3、map.get() – 返回键对应的值,如果不存在,则返回 undefined。
4、map.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
5、map.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。
6、map.size – 返回 Map 对象键/值对的数量。

九、元组

存储不同类型的元素,就需要用到元组。

let tuple: [类型1, 类型2, 类型3, ...];

实例:

let mytuple: [number, string];
mytuple = [42,"Runoob"];

实例:

let mytuple: [number, string, boolean] = [42, "Runoob", true];
 
// 访问元组中的元素
let num = mytuple[0]; // 访问第一个元素,值为 42,类型为 number
let str = mytuple[1]; // 访问第二个元素,值为 "Runoob",类型为 string
let bool = mytuple[2]; // 访问第三个元素,值为 true,类型为 boolean
 
console.log(num);  // 输出: 42
console.log(str);  // 输出: Runoob
console.log(bool); // 输出: true

十、联合类型

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。

Type1|Type2|Type3 

实例:

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]) 
}

以上就是 ts 的基础使用!

打完收工!

posted @ 2024-08-28 11:22  帅到要去报警  阅读(441)  评论(0编辑  收藏  举报