当前位置：网站首页>TypeScript入门知识总结

TypeScript入门知识总结

2022-08-07 05:11:00 【初辰ge】

安装TypeScript

通过npm（Node.js包管理器）

npm install -g typescript

构建第一个TypeScript文件

创建1.ts文件并将下面代码粘贴到文件中

function greeter(person) {
  return "Hello, " + person;
}
let user = "初辰";
console.log(greeter(user));

编译代码

在命令行上，运行TypeScript编译器

tsc 1.ts

输出结果为一个1.js文件，它包含了和输入文件中相同的JavsScript代码。一切准备就绪，就可以运行这个使用TypeScript写的JavaScript应用了
在这里插入图片描述

类型注解

给 person函数的参数添加: string类型注解，并将user变量赋值为数组，如下：

function greeter(person: string) {
  return "Hello, " + person;
}
let user = [0, 1, 2];
console.log(greeter(user));

重新编译，会产生一个如下错误：
在这里插入图片描述
尽管代码里有错误，但仍然可以使用TypeScript。但在这种情况下，TypeScript会警告可能不会按预期执行。

接口

在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的。这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements语句。

interface Person {
  firstName: string;
  lastName: string;
}
function greeter(person: Person) {
  return "Hello, " + person.firstName + person.lastName;
}
let user = { firstName: "初", lastName: "辰" };
console.log(greeter(user));

在这里插入图片描述

类

TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。
创建一个Student类，它带有一个构造函数和一些公共字段。
类和接口可以一起工作，在构造函数的参数上使用public等同于创建了同名的成员变量。

class Student {
  fullName: string;
  constructor(
    public firstName,
    public middleInitial,
    public lastName
  ) {
    this.fullName = firstName + middleInitial + lastName;
  }
}
interface Person {
  firstName: string;
  lastName: string;
}
function greeter(person: Person) {
  return "Hello," + person.firstName + person.lastName;
}
let user = new Student("初", "and", "辰");
console.log(greeter(user));

重新运行tsc 1.ts，你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。
在这里插入图片描述

运行TypeScript Web应用

新建1.html文件并引入1.js文件即可运行tsweb应用

<body>
  <script src="1.js"></script>
</body>

document.body.innerHTML = greeter(user);

在这里插入图片描述

原网站

版权声明
本文为[初辰ge]所创，转载请带上原文链接，感谢
https://blog.csdn.net/chuenst/article/details/118079076