ts---基础语法及使用

news/2024/11/15 21:05:31/文章来源:https://www.cnblogs.com/e0yu/p/18384068

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: Arrayreturn 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;elsereturn 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 的基础使用!

打完收工!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/788438.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Multipass虚拟机ssh登录(密码方式)

Multipass 虚拟机 ssh 登录(密码方式)Multipass 虚拟机 ssh 登录(密码方式)[!NOTE] 以 Ubuntu 24,04 LTS 为例准备工作为了演示新建一个示例虚拟机。multipass launch --name vm01 -c 4 -m 4G -d 100G --network bridged操作步骤 进入虚拟机 multipass shell vm01设置密码 …

Asp.Net Core中Typed HttpClient高级用法

另一个常见的需求是根据不同的服务接口创建不同的HttpClient实例。为了实现这一点,ASP.NET Core提供了Typed HttpClient的支持。 下面是使用Typed HttpClient的示例代码: public interface IExampleService {Task<string> GetData(); }public class ExampleService : I…

win10的自动更新在哪,怎么打开电脑更新设置

在Windows 10系统中,自动更新的设置位置相对直观,用户可以按照以下步骤找到并配置自动更新设置: 一、通过设置界面找到自动更新 1.打开设置:点击屏幕左下角的“开始”按钮,然后选择“设置”(齿轮形状的图标)或者直接按下Win + I快捷键打开设置应用。 2.进入更新和安全:…

RapidCMS 几个常见漏洞

侵权声明 本文章中的所有内容(包括但不限于文字、图像和其他媒体)仅供教育和参考目的。如果在本文章中使用了任何受版权保护的材料,我们满怀敬意地承认该内容的版权归原作者所有。 如果您是版权持有人,并且认为您的作品被侵犯,请通过以下方式与我们联系: [360619623@qq.c…

Cloud Studio:颠覆传统的云端开发与学习解决方案

Cloud Studio 的推出无疑为开发者和学习者们提供了一种全新的工作和学习体验。作为一款基于浏览器的集成开发环境,它不仅让开发者能够随时随地访问自己的开发工具,还极大地简化了开发过程。无论是初学者还是经验丰富的开发者,Cloud Studio 都通过其全面的功能和丰富的资源,…

Linux上网配置-CentOS7

上网配置思路1.确认虚拟机的网络适配器为桥接模式 2.网卡配置文件是否存在并启用网卡接口 3.网卡配置文件详解:静态IP地址、子网掩码、默认网关、物理地址以及 DNS 4.局域网的其他物理机能远程该虚拟机 5.虚拟机ping通外网一、确认虚拟机的网络适配器为桥接模式问题1.为什么要…

【开源】用香橙派Zero 2W做电视机顶盒

先前用闲置的香橙派3 LTS做了一个电视机顶盒,不需要画电路,加上3D打印的外壳就好了。最近又有闲置的香橙派Zero 2W,功耗低又很小巧,忍不住又想拿来做机顶盒。香橙派Zero 2W算是个核心板,需要配一个扩展板才能得到RJ-45百兆网口、A型USB 2.0接口、红外接收头等接口。官方有…

接口获取文件流VUE转换为blob展示图片

接口获取文件流VUE转换为blob展示图片 vue通过接口获取图片文件流<template><el-image :src="imgurl" alt="资源访问失败" width="80%" height="80%" style="display: block" /> </template> <script …

pygame封装两个常用控件

#coding=utf-8import os,sys,re,time import pygame import random from win32api import GetSystemMetrics from tkinter import messageboxpygame.init() pygame.display.set_caption("我的控件")percent = 0.6 screen_width = GetSystemMetrics(0) screen_height …

pygame封装连个常用控件

#coding=utf-8import os,sys,re,time import pygame import random from win32api import GetSystemMetrics from tkinter import messageboxpygame.init() pygame.display.set_caption("我的控件")percent = 0.6 screen_width = GetSystemMetrics(0) screen_height …

相机产品展示步入3D可视化新纪元

在这个日新月异的数字时代,科技的每一次飞跃都在重新定义着我们的生活方式与创作边界。当摄影艺术邂逅前沿科技,一场关于视觉盛宴的变革正悄然上演,为摄影爱好者与专业人士开启了一扇通往无限创意与沉浸式体验的大门。传统相机展示往往受限于二维平面的局限,难以全方位、多…

探索最佳无代码低代码工具:加速 Web 应用开发

本文从新手友好视角,介绍一些顶级工具,并展示其应用示例,帮助新手开发者更快上手 Web 应用开发。Web 应用无处不在。 从用户友好的在线表单到功能强大的企业级解决方案,Web 应用的多样性和复杂性不断增长。 随着低代码无代码技术的发展,构建一个 Web 应用的门槛正在大大降…