Typescript 是一种语言,其目的是为 JavaScript 添加一些它缺乏的功能,更具体地说——静态类型。
静态类型
静态类型阻止了将 var 和 let 变量重新分配给与第一次初始化时不同类型的值的能力。 这是一个重要的方向,因为它允许程序员在编写代码时捕获错误,而在 JavaScript 中,他们只会在运行时意识到这些错误。 让我们看一下这种情况的代码示例:
let num: number = 23; console.log(num); // prints 23num = "twenty-three"; // throws an error immediately: "type string is not assignable to type number"num = 50; // prints 50 => this is acceptable
正如我们所看到的,即使我们的 num 变量是使用 let 关键字声明的,我们仍然不能将它重新分配给不同类型的值。 然而,实际上,打字稿在打字时是可选的。 这意味着您不必在初始化时将变量提交给某种类型; 但是对我来说,通过整个程序这样做似乎会拒绝或不利用 typescript 的静态类型功能,否则它很有用。 “any”是一种数据类型,可用作任何数据类型的参数——不是双关语! 这就是你使用它的方式:
let someContent: any = "String for Now"; // this works!someContent = 47; // this works too. Doesn't throw an error => "any" is dynamic datatype
TypeScript 控制流
TypeScript 控制流在结构和语法上都与 JavaScript 相同。 因此,对于具有 JavaScript 背景的开发人员,本节没有学习曲线。 让我们看一个例子:
const user = {name: "Anna", id: 12, };if (user.name == "Tom") {console.log("Tom is a match");} else if (user.name == "Arthur") {console.log("Arthur is a match");} else if (user.name == "Anna") {console.log("Anna is a match"); // prints Anna is a match} else {console.log("No match found");}
我想引起我们的注意上面的对象用户:它有两个属性:一个数据类型字符串(名称)和一个数据类型数字(id),但是,我们没有在该对象的初始化期间指定类型,我们没有 '不使用任何数据类型,但我们没有错误。 那是因为打字稿也可以使用推理来打字——也就是说,它查看变量的值并在那里确定它们的类型。 有了这个,我们不必总是在初始化变量时显式地写入变量的类型——尽管我认为用显式类型初始化变量是一个好习惯。
接口
接口设置语法以及结构方法和属性,这些方法和属性称为从它们派生的对象应包含的成员。
进入接口声明的语法包括关键字 interface 后跟该接口的标识符以及一个左括号和右括号。 这是它在代码中的样子:
interface Name_of_interface {
};
现在,让我们使用上面的语法来声明一个真实的接口并将其命名为 Demo。
// Defines a structure for an interfaceinterface Demo {demoProp1: string;demoProp2: () => string;};//pass members to the Demo interface and assign to a variableconst demoInstance: Demo = {demoProp1: "Just a demonstration",demoProp2: (): string => {return "To understand better!"},};console.log(demoInstance.demoProp2()); //prints "To understand better!"
在 typescript 编译后,在浏览器运行时,接口不会在编译过程中转换为 vanilla JavaScript——因此,接口对 JavaScript 运行时没有任何影响。
接口继承
接口也可以继承其他接口。 这通常使用 extends 方法来完成,类似于 JavaScript 中的继承模式,也许还有其他语言。 让我们观察一个例子:
interface ParentInterface {height: string;}interface ChildInterface extends ParentInterface {width: string;}const grandChild = <ChildInterface>{};grandChild.height = "1.80 m";grandChild.width = ".5 m";console.log("height: " + grandChild.height);console.log("width: " + grandChild.width);
结论
TypeScript 是一种功能强大的语言,其构建目的是为 JavaScript 添加一些功能,例如可选的静态类型,从而使 JavaScript 更加健壮。 typescript 作为 JavaScript 的超集提供了更多功能,我们将在下一篇文章中讨论其中的一些。
版权声明:本文转载于今日头条,版权归作者所有,如果侵权,请联系本站编辑删除