首页 > 其他分享 >ts---基础语法及使用

ts---基础语法及使用

时间:2024-08-28 11:28:28浏览次数:9  
标签:语法 console log ts number --- num var string

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 的基础使用!

打完收工!

标签:语法,console,log,ts,number,---,num,var,string
From: https://www.cnblogs.com/e0yu/p/18384068

相关文章

  • 安装python教程详解-(Linux和Windows11安装python)
    一、Linux编译安装Python3.12.5python官网地址:WelcometoPython.org1.1安装python环境1.1.1安装开发工具包和依赖#yum-ygroupinstall"DevelopmentTools" #yum-yinstallgcczlibzlib-devellibffilibffi-develreadline-developenssl-developenssl11ope......
  • 在低显存GPU上运行PixArt-Σ/Flux.1图像生成:Python简短教程
    由PixArt-Σ在本地生成,所需显存不超过8Gb。图像生成工具的热度从未如此高涨,而且它们也变得越来越强大。像PixArtSigma和Flux.1这样的模型处于领先地位,这得益于它们的开源权重模型和宽松的许可协议。这种设置允许进行创造性的尝试,包括在不共享计算机外部数据的情况下训练LoRA......
  • STM32学习记录-08-USART串口
    1通信接口        通信的目的:将一个设备的数据传送到另一个设备,扩展硬件系统        通信协议:制定通信的规则,通信双方按照协议规则进行数据收发                USART:TX数据发送、RX数据接收        I2C:SCL时钟、SDA数据  ......
  • B. cats 的随机原神
    题意有\(n\)个颜色,每个颜色有\(m\)个球。在这\(nm\)个球中摸球,不放回,问取完每一种颜色的\(m\)个球的期望次数。思路方法:Min-Max容斥我们记$$\binom{a}{b{m}}=\binom{a}{\underbrace{m,m,\cdots,m}_{b个m}}=\frac{a}{(m!)^b}$$为把\(a\)个数分成\(b\)组,每组\(......
  • windows开机不自动挂载磁盘的方法-切记不要使用中文名称
    本人的电脑系统为win11 开机不挂载某块磁盘的理由1.本人电脑上有个仓库盘是机械硬盘,并不是每次开机都要用到,开机不挂载也许有利于增加数据盘的寿命2.挂载了数据盘,有时候打开文件页面会比较慢,不够丝滑3.通过本文的方法实现了:开机不自动挂载,使用中挂载和卸载足够方便步骤一:......
  • VMware Cloud Foundation 9 发布 - 领先的多云平台
    VMwareCloudFoundation9发布-领先的多云平台高效管理虚拟机(VM)和容器工作负载,为本地部署的全栈超融合基础架构(HCI)提供云的优势。请访问原文链接:https://sysin.org/blog/vmware-cloud-foundation-9/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgVMware......
  • Python系列(10)- Python 多线程
    多线程(Multithreading),是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的系统包括对称多处理机、多核心处理器、芯片级多处理或同时多线程处理器。在一个程序中,这些独立运行的程序片段叫作“线程”(Thread),利用它编程的概念就叫作“多线程处理”。多线程是并行化......
  • js练习--用户管理API
    需要node.js运行环境,创建2个文件:user.js,server.jsuser.js:letusers={};module.exports=users;server.js:consthttp=require('http');//导入user模块letusers=require('./user');//创建HTTP服务器constserver=http.createServer((req,res)=......
  • H3C-IMC智能管理中心RCE漏洞复现
    0x01漏洞描述:autoDeploy接口中存在远程代码执行漏洞,未经身份攻击者可通过该漏洞在服务器端任意执行代码,写入后门,获取服务器权限,进而控制整个web服务器。该漏洞利用难度较低,建议受影响的用户尽快修复。0x02搜索语句:Fofa:(title="用户自助服务"&&body="/selfservice/java......
  • Java研学-Shiro安全框架(五)
    七SpringBoot集成Shiro鉴权1Shiro鉴权三种方式  编程式通过写if/else授权代码块完成Subjectsubject=SecurityUtils.getSubject();if(subject.hasRole("hr")){ //有权限}else{ //无权限}  注解式通过在controller的方法上放置相应的注解完成(shiro......