电子商务网站中的信息技术阿里巴巴,网易云服务器,大学生求职创业补贴,学校做网站#x1f64b; 一日之际在于晨 ⭐本期内容#xff1a;TypeScript基础语法详解 #x1f3c6;系列专栏#xff1a;鸿蒙HarmonyOS4NEXT#xff1a;探索未来智能生态新纪元 文章目录 前言变量与类型函数类与接口类#xff08;Class#xff09;接口#xff08;Interface 一日之际在于晨 ⭐本期内容TypeScript基础语法详解 系列专栏鸿蒙HarmonyOS4NEXT探索未来智能生态新纪元 文章目录 前言变量与类型函数类与接口类Class接口Interface函数与接口的使用对象的创建与函数的使用 泛型总结 前言
TypeScript是一种由微软开发的开源编程语言它是JavaScript的一个超集添加了静态类型、类、接口和泛型等特性。这些特性使得TypeScript在大型项目中具有更好的可维护性和可扩展性。本文将对TypeScript的基础语法进行详细讲解帮助读者快速入门。 变量与类型
TypeScript的核心特性之一就是静态类型系统。这意味着在声明变量时我们可以为其指定一个类型这样TypeScript编译器就可以在编译时检查类型错误。 例如let msg:string‘hello world’ 其中let为声明变量的关键字const则代表常量 msg为变量名是自定义的 string是变量的数据类型 常见的类型有
string字符串可以用单引号或者双引号
let greeting: string Hello, World!;
let quote: string To be or not to be, that is the question.;number数值、整数、浮点数都可以
let age: number 30;
let price: number 19.99;any不确定类型可以是任意类型
let notSure: any 4;
notSure maybe a string instead;
notSure false;- union联合类型可以是多个指定类型中的一种
let greet: string | number;
greet Hello; // OK
greet 42; // OK
// greet true; // Error, boolean is not string or number
Object对象注意在TypeScript中使用 {} 来表示一个空对象类型而 Object 实际上指向的是非原始类型
let person: object { name: Alice, age: 25
};Array数组、元素可以是任意其他类型
let numbers: number[] [1, 2, 3, 4, 5];
let strings: string[] [red, green, blue];
let mixed: (number | string)[] [1, two, 3, four];
注意对于 object 类型实际上在TypeScript中使用 {} 来定义一个空对象类型可能更加精确因为它不会接受原始值如 string、number 等。而 Object 类型在TypeScript中是一个特殊的类型它是所有类型的超类型包括原始类型。因此使用 Object 类型作为变量类型时可以为其分配任何类型的值。
在定义数组时我们通常使用类型后跟方括号的语法例如 number[] 表示数字数组。如果需要数组中的元素可以是多种类型可以使用联合类型例如 (number | string)[] 表示数组中的元素可以是数字或字符串。
函数
在TypeScript中我们可以为函数参数和返回值指定类型。这有助于我们在编写函数时明确函数的输入和输出从而提高代码的可读性和可维护性。 如下我们定义了一个名为greeter的函数它接受一个string类型的参数person并返回一个string类型的结果。然后我们调用这个函数并传入一个字符串变量user作为参数。 注意在TypeScript中空字符串、数字0、null、undefined都被认为是false其它值则为true。
function greeter(person: string): string { return Hello, person;
} let user Jane;
console.log(greeter(user));类与接口
在 TypeScript 中类和接口是面向对象编程的两个核心概念。类Class是一种用户自定义的数据类型它包含属性和方法可以用来创建对象。接口Interface定义了一个对象的结构它规定了一个对象应该有哪些属性和方法但不提供具体的实现。
类Class
在这个 Animal 类中 name 是一个属性用来存储动物的名字。 constructor 是类的构造函数用于创建类的实例并初始化 name 属性。 move 是一个方法用于描述动物移动的行为。注意move 方法有一个默认参数 distanceInMeters其默认值为 0。
class Animal { name: string; // 类的属性 constructor(theName: string) { // 类的构造函数 this.name theName; // 在构造函数中初始化属性 } move(distanceInMeters: number 0) { // 类的方法 console.log(${this.name} moved ${distanceInMeters}m.); }
}接口Interface
Person 接口定义了一个对象应该具有 firstName 和 lastName 两个属性并且这两个属性都是字符串类型。
interface Person { firstName: string; // 接口的属性 lastName: string; // 接口的属性
}函数与接口的使用
greeter 函数接受一个参数 person该参数的类型是 Person 接口。这意味着任何传递给 greeter 函数的对象都必须具有 firstName 和 lastName 属性。
function greeter(person: Person) { // 函数接受一个符合Person接口的对象 return Hello, person.firstName person.lastName; // 使用接口的属性
}对象的创建与函数的使用
这里创建了一个对象 user它符合 Person 接口的规范即具有 firstName 和 lastName 属性。然后我们将 user 对象传递给 greeter 函数并打印返回的问候字符串。
let user { firstName: Jane, lastName: User }; // 创建一个符合Person接口的对象
console.log(greeter(user)); // 调用greeter函数并打印结果泛型
在 TypeScript 中泛型Generics是一种创建可重用组件的方式这些组件可以处理多种数据类型而不是单一的数据类型。泛型允许我们定义函数、接口或类其中的类型参数可以在使用这些组件时指定。这使得代码更加灵活和可维护因为我们可以编写一次代码然后在多种数据类型上重复使用。
如下例子identity 函数是一个泛型函数它接受一个类型为 T 的参数并返回相同类型的值。这里的 T 是一个类型参数它代表了在函数被调用时可以指定的任意类型。 让我们详细分析一下这个代码
function identityT(arg: T): T { return arg;
}在上面的代码中 T定义了类型参数 T。这告诉 TypeScript我们打算在函数中使用一个或多个类型作为参数。 arg: T函数参数 arg 的类型被指定为 T意味着它可以是任何类型。 return arg;函数返回与参数相同的值其类型也是 T。 接着创建了一个 myIdentity 变量并将 identity 函数赋值给它。这里使用了另一种语法来指定泛型类型参数。
let myIdentity: T(arg: T) T identity;这里myIdentity 的类型被定义为接受一个类型为 T 的参数并返回相同类型的函数。它实际上是对 identity 函数的一个引用因此我们可以通过 myIdentity 来调用 identity 函数。 最后使用 myIdentity 函数来处理不同类型的值
console.log(myIdentitystring(hello)); // 输出 hello
console.log(myIdentitynumber(42)); // 输出 42myIdentity string(“hello”)在这里显式地指定了 T 为 string 类型并传递了一个字符串 “hello” 作为参数。函数返回这个字符串并输出到控制台。 myIdentity number(42)类似地指定了 T 为 number 类型并传递了一个数字 42。函数返回这个数字并输出到控制台。 总结
今日之学习篇章已然落笔愿诸君有所收获。 倘若您对此深感兴趣不妨关注此专栏新知将持续涌现与您共舞思维的华章。 期待下次再会愿我们于知识的海洋中再度相聚共赏智慧之花绽放。
