TypeScript 从入门到精通

最新推荐文章于 2025-07-07 21:30:28 发布

原创

最新推荐文章于 2025-07-07 21:30:28 发布 · 3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#TypeScript #TS #入门

一、什么是 TypeScript

先看一下官网上对 TypeScript 的介绍。

图1.png

关键词：超集
言外之意 JavaScript 的所有用法 TypeScript 都支持。

关键词：Type
TypeScript 强调也是其优点之意是【类型】

为什么需要 Ts 呢？举个小例子：
一个杯子可以装水，也可以当笔筒装杂物。但是，拿装杂物的杯子些许显得不太干净。物有所用，各司其职。
Js 是弱类型可以定义 number 类型，可以定义 string 类型，这就并未各司其职。
所以，这就诞生了 Ts

【前端经常遇见的类型问题]

##二、TypeScript 的安装及运行
安装：npm install -g typescript 或者 yarn add global typescript
确认是否安装成功: tsc -v

在官网中（中文网 – 练习）可以将 Ts 转换为 Js

图2.png

浏览器会识别 html / css / js。识别不了 ts，所以 ts 编译转变为为 js。
https://jkchao.github.io/typescript-book-chinese/compiler/overview.html#%E6%96%87%E4%BB%B6%EF%BC%9Autilities

打开编辑器（确保在node/npm/typescript都成功的前提下）
第一步：新建文件夹 TS-APP
第二步：TS-APP下面新建一个index.html文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="./app.js"></script>
</body>
</html>

在若src="./app.ts"会报错

图3.png

第三步：在TS-APP下面新建一个app.ts文件

class Greeter {
  greeting: string;
  constructor(message: string) {
      this.greeting = message;
  }
  greet() {
      return "Hello, " + this.greeting;
  }
}

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
  alert(greeter.greet());
}

document.body.appendChild(button);

要想在浏览器运行起来，需要将 app.ts 编译转换为 app.js。此时就要进行此命令: tsc app.ts
✅运行完此命令之后，会自动生成一个 app.js 文件。此时浏览器打开，效果如下：

图4.png

问答区：如果想同时运行多个 ts 文件该如何操作。
此时需要进行此命令 tsc --init
命令执行成功之后，会自动生成一个 tsConfig.json 文件，此文件则会将帮助所有的 ts 文件编译转换为相应的 js 文件。
✅运行所有 ts 文件，tsc 即可，则会全部转换

图6.png

在此处，插播推荐两个插件：
Live Server（能够保存的时候，自动更改）
TypeScript Auto Compiler（能够保存之后，不需要执行 tsc 命令，自动会生成相应的 js 文件）

##三、TypeScript 入门

（一）TypeScript – 基本数据类型和报错解析

为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

// 基本数据类型
let num = 25;
let float =

最低0.47元/天解锁文章

200万优质内容无限畅学