TypeScript的基本认识和基本语法和运算符

别指望了
184 阅读5分钟

TypeScript的基本认识

TypeScript是做什么的？

TypeScript 是由微软开发的开源编程语言，它是 JavaScript 的一个超集。这意味着 TypeScript 添加了可选的静态类型和基于类的面向对象编程。TypeScript 代码最终会被编译（或称为转译）成普通的 JavaScript 代码

在这里，我认为TypeScript相当于JavaScript的关系相当于高级编程语言和汇编语言的关系。

TypeScript的应用场景？

TypeScript 的应用场景非常广泛，涵盖了前端开发、后端开发、大型项目开发、库和框架开发、工具与构建系统等多个方面。

TypeScript与html和css的关系？

TypeScript、HTML和CSS在Web开发中共同协作，构建出丰富、动态和响应式的网页应用。TypeScript通过编译成JavaScript来与HTML和CSS交互，控制网页的行为和样式变化；HTML定义了网页的结构和内容；CSS则负责网页的样式和布局。

在这里，我可以理解为html规定了网页中有什么，css规定了网页的样式，typescripe规定了网页的动态响应

TypeScript的基本语法

number：双精度 64 位浮点值。它可以用来表示整数和浮点数。TS中没有int和float，只有一个number

第一种：直接赋值，系统会直接创建整数和浮点数变量

image.png

第二种：显式类型注解

`let num_3 :number=10;

let num_4 :number=100.36;`

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

image.png image.png

在反引号中嵌套表达式

image.png

image.png

boolean：表示逻辑值：true 和 false。

image.png

image.png

枚举（enum）类型用于定义一个命名的常量集合

image.png

image.png

image.png

void：用于标识方法返回值的类型，表示该方法没有返回值

function logMessage(message: string): void {  
    console.log(message);  
    // 这里没有 return 语句，因为返回类型是 void  
    // 如果尝试返回一个值（如 return 1;），TypeScript 编译器会报错  
} 
// 调用 logMessage 函数  
logMessage("Hello, TypeScript!");

以上是常用的物种数据类型，其中感觉枚举类型像是加了映射关系的数组。其余的四种数据类型不太重要

变量的声明

let、const或var都可以用来声明变量

let(const或var同理)

数组类型

数组类型可以通过在元素类型后面加上[]来指定。

	let myNumbers: number[] = [1, 2, 3];

或者使用泛型语法：

	let myNumbers: Array<number> = [1, 2, 3];
元组类型

元组类型允许你表示一个已知元素数量和类型的数组，各元素的类型不必相同。

	let myTuple: [string, number];  
	myTuple = ["Alice", 30]; // 正确

** 变量的作用域**

  • 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
  • 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
  • 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用

image.png

image.png 全局变量就是在那里都可用的变量，局部变量就是在一个方法和代码段中可用变量，在代码端外是无法识别局部变量的

其次，因为类中是可以包扩方法，所以变量的范围的大小因该排： 全局变量>类变量域>局部变量

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)

运算符

    • 算术运算符
    • 逻辑运算符
    • 关系运算符
    • 按位运算符
    • 赋值运算符
    • 三元/条件运算符
    • 字符串运算符
    • 类型运算符

算术运算符

image.png

逻辑运算符

&& 运算符只有在左右两个表达式都为 true 时才返回 true

|| 运算符只有在左右两个表达式都为 false 时才返回 false

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);

image.png

三元运算有 3 个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。

Test ? expr1 : expr2
  • Test − 指定的条件语句
  • expr1 − 如果条件语句 Test 返回 true 则返回该值
  • expr2 − 如果条件语句 Test 返回 false 则返回该值
var num:number = -2 
var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
console.log(result)

字符串运算符: 连接运算符 (+)

  • 运算符可以拼接两个字符串
var msg:string = "hello "+"world" 
console.log(msg)

类型运算符

typeof 运算符

typeof 是一元运算符，返回操作数的数据类型。

var num = 12 
console.log(typeof num);   //输出结果: number

经过这次学习我简单了解TypeScript的一些基本语法和运算符，收获丰富，但我更希望学习和了解ts是怎么维持一个动态的网页的。也更希望经过这次完整系统的学习，我可以更好的掌握js语言。

avatar
文章
阅读
粉丝