打字快速入门(打字稿基础)
打字快速入门(打字稿基础)TS中的对象可以用适当的结构来定义,这样没有人可以进一步改变基本结构[LOG]: “Fries”let username: string = "User";let age: number = 25;let Isworking: boolean = true;TS中的字符串数组可以定义为string[]let food: string[];food = ["Pizza" "Burger" "Fries"]; for(let item of food){console.log(item);}[LOG]: “Pizza”[LOG]: “Burger”
帮助你开始使用 Angular 的 TypeScript 基础知识
在你跳入像 Angular 这样使用 TypeScript 但时间紧迫的大型框架之前,可以使用这篇文章。 我试图涵盖所有基本概念,并使用即使是 12 岁的孩子也能理解的例子来解释它们。
注意:在本文中,我将把 TypeScript 称为 TS。 要练习,您可以使用 TS Playground
原始类型:字符串、数字和布尔值很容易理解和定义。
let username: string = "User";let age: number = 25;let Isworking: boolean = true;
TS中的字符串数组可以定义为string[]
let food: string[];food = ["Pizza" "Burger" "Fries"];
for(let item of food){console.log(item);}
[LOG]: “Pizza”
[LOG]: “Burger”
[LOG]: “Fries”
TS中的对象可以用适当的结构来定义,这样没有人可以进一步改变基本结构
let person : {name: string age: number hobbies: string};
person = {name: "User" age: 25 hobbies: "eating"}console.log(person.name);
[LOG]: “User”
但是如果有人试图改变对象的结构如下:
person = {isEmployee: false}
TS 会抛出错误:Type ‘{ isEmployee: boolean; }' 不能分配给类型'{ name: string; 年龄:数字; 爱好:弦乐; }'。
我们甚至可以将这两种复杂类型与一个包含一系列爱好的对象结合起来
let person : {name: string age: number hobbies: string[]};
person = {name: "User" age: 25 hobbies: ["Eating" "Sleeping" "Coding"]}
现在,如果我记录爱好,输出将如下所示:
console.log(person.hobbies)
[LOG]: [“Eating” “Sleeping” “Coding”]
此外,我们可以有对象数组:
let person : {name: string age: number }[];
person = [{name: "User1" age: 25} {name:"User2" "age": 26}]
for(let per of person){console.log(per);}
[LOG]: { “name”: “User1” “age”: 25 }
[LOG]: { “name”: “User2” “age”: 26 }
TS 中的类型推断
在 TS 中,有几个地方在没有显式类型注释的情况下使用类型推断来提供类型信息。
例如:
let data = "Username";data = 123;
这样做会引发错误,因为 TS 在首次定义时试图将数据类型推断为字符串,即使我们没有特别提及它。
这是一个很棒的功能,我们应该大部分时间都坚持使用 TS 推断的类型。
TS 中的联合类型
联合类型是由两种或多种其他类型组成的类型,表示可能是这些类型中的任何一种的值。 我们将这些类型中的每一种都称为工会的成员。
早些时候,当我们重新定义 data = 123 时遇到问题,因为 TS 类型推断已经将数据类型设置为字符串。
这可以通过使用联合类型来解决,如下所示:
let data: string | number = "User";data = 123;console.log(data);
[LOG]: 123
类型别名
我们一直通过直接在类型注释中编写对象类型和联合类型来使用它们。 这很方便,但通常希望多次使用同一个类型并用一个名称引用它。
而不是一次又一次地定义类似的类型,例如:
let person : {
name: string
age: number
};let people : {
name: string
age: number
}[];
类型别名就是这样——任何类型的名称。 类型别名的语法是:
type Person = {
name:string
age: number
}let person: Person;let people: Person[];
所以我们只在一个地方定义了它,并且可以在其他地方重复使用,从而为我们节省了大量时间。
功能和类型
函数是在 JavaScript 中传递数据的主要方式。 TypeScript 允许您指定函数的输入和输出值的类型。
例如:
function addData(x:number y: number) {
return x y;
}let res = addData(1 2);
这里 x 和 y 参数我们指定为数字,但返回类型被 TS 推断为数字。
在将鼠标悬停在 addData 上时,它显示:
function addData(x: number y: number): number
如您所见:函数 addData(x: number y: number) 后的数字不是来自我们,而是由 TS 推断的。
我想在这里提到的另一件事是使用 any 作为类型:
function printData(val: any){
console.log(val);
}printData("Hi There!");
这里推断的返回类型将是 void,因为该函数不返回任何内容,并且提供给该函数的任何内容都会记录下来:因此我们使用了任何类型。
TS 中的泛型
根据 typescript.org:软件工程的一个主要部分是构建组件,这些组件不仅具有良好定义和一致的 API,而且还可以重用。
能够处理今天和明天的数据的组件将为您提供构建大型软件系统的最灵活的能力。
让我们尝试创建一个可重用的函数,它在数组末尾添加一个新提供的值并返回一个新数组。
function AddValueToEnd(myArray: any[] value: any) {
const newArray = [...myArray value];
return newArray;
}const res = AddValueToEnd([1 2 3] 5);
但是在这里我的 res 也被推断为任何不是很有用的类型,因为我们可以对字符串执行 res[0].split('') 但在对数字执行时会出现运行时错误。 所以这里泛型扮演了非常重要的角色。
通过使用泛型,我们可以将函数编写为:
function AddElements<T>(myArray: T[] value: T) {const newArray = [...myArray value];return newArray;
}
现在我们可以将它与数字一起使用:
let res = AddElements<number>([1 2 3] 5);console.log(res);
[LOG]: [1 2 3 5]
将其与字符串一起使用:
let res = AddElements<string>(['Welcome' 'Hie There' 'Hello!'] 'Thanks for reading!');console.log(res);
[LOG]: [“Welcome” “Hie There” “Hello!” “Thanks for reading!”]
这里我的 newArray 占用类型: T[] 因此返回类型变为 number[] 或 string[] 基于提供的内容。