TypeScript与面向对象

TypeScript支持面向对象编程

class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();

上述代码定义了一个类Site，其中包含一个方法name()，new为创建类的对象的关键字。

编译后JS代码如下

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();

注意。class是TypeScript独有的，JavaScript中使用构造器(函数)和new关键字来实现对象的创建，而没有类的概念。

JavaScript中的对象

使用let和{}来为对象赋值，一般的键值对叫属性，可以使用.或[]来访问，使用delete删除某一属性。

let user = {
  name: "John",
  age: 30,
}

可以使用for...in...来遍历对象中属性与值。

对象中可以内嵌方法函数，类比C++中的成员函数。

JavaScript中也存在this关键字，不同于C++，这个this不是指向该对象的指针，而代表该对象。

这边对象的构造函数不同于C++，并不是成员函数，而是普通的常规函数，但是其有两个约定：

它们的命名以大写字母开头
它们只能由new操作符来执行

现代JavaScript教程

TypeScript基础类型

Any类型

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况：

变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：
1
2
3
let x: any = 1; // 数字类型
x = 'I am who I am'; // 字符串类型
x = false; // 布尔类型

改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码如下：

1
2
3

let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

定义存储各种类型数据的数组时，示例代码如下：
1
2
let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

NULL和Undefine

null是一个只有一个值的特殊类型，undefine是一个没有设置值的变量。

以上。

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

还有一些常见类型

…

TypeScript变量声明

这下变量的声明终于和其他编程语言相似了。有以下几种方式：

声明变量的类型及初始值

1	let uname:string = "Runoob";

声明变量的类型，但没有初始值，变量值会设置为undefined

1	var uname:string;

声明变量并初始值，但不设置类型，该变量可以是任意类型

1	var uname = "Runoob";

声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined

1	var uname;

对于类型出现的错误，TyprScript会在编译的时候进行报错。

类型断言

即指定某一变量的类型，通常适用于一种类型是类外一种类型的子类型。该语法仅仅是为了在编译时进行判断，对实际的程序没有运行支持，故不能称之为类型转换。

<类型>值

例如：可以将any断言成任何类型，或将任何类型断言成never

类型推断

当某一变量的类型没有给出时，TypeScript编译器会使用类型推断来判断类型。若缺乏依据，则将类型判断成any类型。

变量作用域

变量作用域指定了变量定义的位置。程序中变量的可用性由变量作用域决定。
TypeScript中有三种作用域：

全局作用域
类作用域
声明在类中，在方法外，但是可以通过类的对象来访问。静态对象可以通过类名直接访问。
局部作用域
只能在声明它的代码块中使用
(基本与C++中差不多)

实例：

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)

TypeScript运算符

TypeScript中存在包括typeof在内的所有在C/C++中常见的运算符。

以上。

TypeScript条件语句

if、if-else、if-else if-else
switch

以上。

TypeScript循环

for循环

基本语法和其他几个语言一致。

1
2
3

for ( init; condition; increment ){
    statement(s);
}

for…in

for…in语句用于一组值的集合或列表进行迭代输出。

1
2
3

for (var val in list) { 
    //语句 
}

val需要为string或者any类型
实例：

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

for…of

for…of语句创建一个循环来迭代可迭代的对象。在ES6中引入的for…of循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。

// for...in 循环示例
const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
    console.log(key); // 输出 a、b、c
    console.log(obj[key]); // 输出 1、2、3
}

// for...of 循环示例
const arr = [1, 2, 3];

for (const value of arr) {
    console.log(value); // 输出 1、2、3
}

while、do…while循环

以上。

TypeScript函数

与JavaScript的区别主要在参数和返回值上。

函数返回值

function function_name():return_type { 
    // 语句
    return value; 
}

return_type是返回值的类型。
value的类型应该与return_type一致

带参数函数

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)

剩余参数

即将最后一个形参设置为由剩余参数组成的数组，索引值由0到.length()。
实例：

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为：",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)

匿名函数

即没有函数名的函数，一般用作函数表达式。在函数后直接使用()，即为匿名函数的子调用。

构造函数

感觉用不上，先放着。😢

TypeScript基本语法

kpmark 发布于 2024-03-27

最后更新于 2025-01-17

已访问：次