Administrator
发布于 2024-11-11 / 9 阅读
0
0

Ts入门教程

https://www.runoob.com/typescript/ts-variables.html

TypeScript 变量声明

声明变量的类型及初始值:

var [变量名] : [类型] = 值;

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

var [变量名] : [类型];

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

var [变量名] = 值;

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

var [变量名];

类型断言(Type Assertion)

类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型

语法格式:

<类型>值

或:

值 as 类型
var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)
//1

TypeScript 是怎么确定单个断言是否足够

当 S 类型是 T 类型的子集,或者 T 类型是 S 类型的子集时,S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性,完全毫无根据的断言是危险的,如果你想这么做,你可以使用 any。

它之所以不被称为类型转换,是因为转换通常意味着某种运行时的支持。但是,类型断言纯粹是一个编译时语法,同时,它也是一种为编译器提供关于如何分析代码的方法。

编译后,以上代码会生成如下 JavaScript 代码:

var str = '1'; var str2 = str; //str、str2 是 string 类型 console.log(str2);

类型推断

当类型没有给出时,TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态 any 类型。

var num = 2; // 类型推断为 number console.log("num 变量的值为 "+num); num = "12"; // 编译错误 console.log(num);

  • 第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此,程序使用类型推断来确定变量的数据类型,第一次赋值为 2,num 设置为 number 类型。

  • 第三行代码,当我们再次为变量设置字符串类型的值时,这时编译会错误。因为变量已经设置为了 number 类型。

    error TS2322: Type '"12"' is not assignable to type 'number'.

变量作用域

变量作用域指定了变量定义的位置。

程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域:

  • 全局作用域 − 全局变量定义在程序结构的外部,它可以在你代码的任何位置使用。

  • 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头,但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。

  • 局部作用域 − 局部变量,局部变量只能在声明它的一个代码块(如:方法)中使用。

循环

除for和 for in外 还有

for…of 、forEach、every 和 some 循环

此外,TypeScript 还支持 for…of 、forEach、every 和 some 循环。

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。

TypeScript for...of 循环

let someArray = [1, "string", false];

for (let entry of someArray) {

console.log(entry);

// 1, "string", false

}

forEach、every 和 some 是 JavaScript 的循环语法,TypeScript 作为 JavaScript 的语法超集,当然默认也是支持的。

因为 forEach 在 iteration 中是无法返回的,所以可以使用 every 和 some 来取代 forEach。

TypeScript forEach 循环

let list = [4, 5, 6];

list.forEach((val, idx, array) => {

// val: 当前值

// idx:当前index

// array: Array });

TypeScript every 循环

let list = [4, 5, 6];

list.every((val, idx, array) => {

// val: 当前值 // idx:

当前index // array: Array

return true;

// Continues

// Return false will quit the iteration });

TypeScript 函数

函数是一组一起执行一个任务的语句。

您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。

函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。

函数定义

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

语法格式如下所示:

function function_name()
{
    // 执行代码
}

函数只有通过调用才可以执行函数内的代码。

函数返回值

有时,我们会希望函数将执行的结果返回到调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

语法格式如下所示:

function function_name( param1 [:datatype], param2 [:datatype]):return_type { 
    // 语句
    return value; 
}

可选参数和默认参数

可选参数

在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?。

function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; }

默认参数

我们也可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数,语法格式为:

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意:参数不能同时设置为可选和默认

剩余参数

有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入

function buildName(firstName: string, ...restOfName: string[]) { 

return firstName + " " + restOfName.join(" "); 

} 

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

匿名函数

匿名函数是一个没有函数名的函数。

匿名函数在程序运行时动态声明,除了没有函数名外,其他的与标准函数一样。

我们可以将匿名函数赋值给一个变量,这种表达式就成为函数表达式。

语法格式如下:

var res = function( [arguments] ) { ... }

匿名函数自调用

匿名函数自调用在函数后使用 () 即可:

(function () { var x = "Hello!!"; console.log(x) })()

构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数:

语法格式如下:

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

参数说明:

  • arg1, arg2, ... argN:参数列表。

  • functionBody:一个含有包括函数定义的 JavaScript 语句的字符串。

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 

console.log(x);

Lambda 函数

Lambda 函数也称之为箭头函数。

箭头函数表达式的语法比函数表达式更短。

函数只有一行语句:

( [param1, param2,…param n] )=>statement;

实例

以下实例声明了 lambda 表达式函数,函数返回两个数的和:

var foo = (x:number)=>10 + x console.log(foo(100)) //输出结果为 110


评论