TypeScript基础知识

2023-12-13 13:12:00

目录

关键字

JavaScript关键字

TypeScript关键字

TypeScript 基础类型

声明变量

声明变量的方式

变量命名规则

变量作用域

TypeScript 运算符

算术运算符

关系运算符

逻辑运算符

位运算符

赋值运算符

三元运算符

类型运算符

关键字

JavaScript关键字

abstract

else

instanceof

super

boolean

enum

int

switch

break

export

interface

synchronized

byte

extends

let

this

case

false

long

throw

catch

final

native

throws

char

finally

new

transient

class

float

null

true

const

for

package

try

continue

function

private

typeof

debugger

goto

protected

var

default

if

public

void

delete

implements

return

volatile

do

import

short

while

double

in

static

with

TypeScript关键字

break

as

catch

switch

case

if

throw

else

var

number

string

get

module

type

instanceof

typeof

public

private

enum

export

finally

for

while

void

null

super

this

new

in

return

true

false

any

extends

static

let

package

implements

interface

function

new

try

yield

const

continue

do

TypeScript 基础类型

数据类型

关键字

描述

任意类型

any

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

数字类型

number

双精度 64 位浮点值。它可以用来表示整数和分数。TypeScript 和 JavaScript 没有整数类型

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

void

void

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

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

null

null

表示对象值缺失。

在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。用 typeof 检测 null 返回是 object。

undefined

undefined

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

在 JavaScript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined；

而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型；

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined; ? ?// 编译错误
x = null; ? ?// 编译错误

// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined; ? ?// 编译正确
x = null; ? ?// 编译正确

never

never

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

let x: never;
let y: number;

// 编译错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
? ? throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
? ? while (true) {}
}

声明变量

声明变量的方式

在?JavaScript?中可以通过关键字?var?、?let?、?const?来声明变量，当然 TypeScript 中同样也可以。

这三种声明变量的方式各有不同，如下所示：

  • var 关键字声明变量，其作用于为该语句所在的函数内， 且存在变量提升现象。
  • let 的声明类似于 var，但是它的作用域为该语句所在的代码块内，不存在变量提升。注意它们一个是函数内，一个是代码块内，代码块就是直接使用 {} 括起来的代码。
  • const 是 let 的一个扩展，它可以防止重新分配变量，一般用来声明常量，在后面出现的代码中不能再修改常量的值。

变量命名规则

在讲如何声明变量之前，我们先来看一下?TypeScript?的变量命名规则，如下所示：

  • 变量名称可以包含数字、字母、下划线 _ 和美元 $ 符号，其他都不可以，例如 a、abc、AA、a_ 都符合命名规范。
  • 变量名不能以数字作为开头，例如 7a 就不符合变量的命名规范，而 a7 是可以的。

使用关键字 var 声明变量

首先在?JavaScript?语言中我们都是使用关键字?var?来声明变量的。那么为什么在?TypeScript?中我们更偏向于使用?let，下面我们会讲到原因。

在?TypeScript?中声明变量其实就和?JavaScript?很类似。但因为一个是强类型语言一个是弱类型语言，所以两者在声明变量的格式上会有一些不同。

在?TypeScript?中声明变量，一共有四种方式：

  • 第一种，声明变量的类型及初始值，需要在变量名后面加上变量类型和初始值

var [变量名] : [类型] = 值; // 例如 var a : number = 1;

  • 第二种，声明变量的类型，但是不赋初始值。在这种情况下，该变量的值默认为?undefined

var [变量名] : [类型]; // 例如 var a：number;

  • 第三种，声明变量并赋初始值，但不声明类型，此时变量类型将被设置为any（任意类型），这种声明方式和 JavaScript 中的类似

var [变量名] = 值; // 例如 var a = 1;

  • 第四种，不声明变量类型，且不赋初始值。在这种情况下，变量的数据类型为 any，初始化值为 undefined

var [变量名]; // 例如 var a;

变量作用域

一个变量的作用域指定了这个变量的定义位置，程序中变量的可用性是由它作用域决定的。变量不可以在作用域以外的地方使用。

TypeScript?的作用域分为下面三种：

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

TypeScripe示例:

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)

JavaScripe示例:

var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 实例变量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部变量
    };
    Numbers.sval = 10; // 静态变量
    return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val);

TypeScript 运算符

TypeScript 主要包含以下几种运算：

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

算术运算符

运算符

描述

例子

x 运算结果

y 运算结果

+

加法

x=y+2

7

5

-

减法

x=y-2

3

5

*

乘法

x=y*2

10

5

/

除法

x=y/2

2.5

5

%

取模（余数）

x=y%2

1

5

++

自增

x=++y

6

6

x=y++

5

6

--

自减

x=--y

4

4

x=y--

5

4

关系运算符

运算符

描述

比较

返回值

==

等于

x==8

false

x==5

true

!=

?不等于

x!=8

true

>

?大于

x>8

false

<

?小于

x<8

true

>=

?大于或等于

x>=8

false

<=

?小于或等于

x<=8

true

逻辑运算符

运算符

描述

例子

&&

and

(x < 10 && y > 1) 为 true

||

or

(x==5 || y==5) 为 false

!

not

!(x==y) 为 true

位运算符

运算符

描述

例子

类似于

结果

十进制

&

AND，按位与处理两个长度相同的二进制数，两个相应的二进位都为 1，该位的结果值才为 1，否则为 0。

x = 5 & 1

0101 & 0001

0001

?1

|

OR，按位或处理两个长度相同的二进制数，两个相应的二进位中只要有一个为 1，该位的结果值为 1。

x = 5 | 1

0101 | 0001

0101

?5

~

取反，取反是一元运算符，对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0，0 成为 1。

x = ~ 5

?~0101

1010

?-6

^

异或，按位异或运算，对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1，否则该位为 0。

x = 5 ^ 1

0101 ^ 0001

0100

?4

<<

左移，把 << 左边的运算数的各二进位全部左移若干位，由 << 右边的数指定移动的位数，高位丢弃，低位补 0。

x = 5 << 1

0101 << 1

1010

?10

>>

右移，把 >> 左边的运算数的各二进位全部右移若干位，>> 右边的数指定移动的位数。

x = 5 >> 1

0101 >> 1

0010

2

>>>

无符号右移，与有符号右移位类似，除了左边一律使用0 补位。

x = 2 >>> 1

0010 >>> 1

0001

1

赋值运算符

运算符

例子

实例

x 值

= (赋值)

x = y

x = y

x = 5

+= (先进行加运算后赋值)

x += y

x = x + y

x = 15

-= (先进行减运算后赋值)

x -= y

x = x - y

x = 5

*= (先进行乘运算后赋值)

x *= y

x = x * y

x = 50

/= (先进行除运算后赋值)

x /= y

x = x / y

x = 2

三元运算符

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

Test ? expr1 : expr2

  • Test ? 指定的条件语句
  • expr1 ? 如果条件语句 Test 返回 true 则返回该值
  • expr2 ? 如果条件语句 Test 返回 false 则返回该值

类型运算符

typeof 运算符

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

instanceof

instanceof 运算符用于判断对象是否为指定的类型。

文章来源:https://blog.csdn.net/duoluo9/article/details/134966885
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。