TypeScript 从入门到精通

最新推荐文章于 2024-07-29 09:12:45 发布

Danile-丹丹

最新推荐文章于 2024-07-29 09:12:45 发布

阅读量2.6k

点赞数 2

分类专栏：前端文章标签： TypeScript TS 入门

本文链接：https://blog.csdn.net/shirleyqdd/article/details/98218120

版权

一、什么是 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几乎相同的数据类型ÿ

最低0.47元/天解锁文章

Danile-丹丹

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
TypeScript 从入门到精通

一、什么是 TypeScript先看一下官网上对 TypeScript 的介绍。关键词：超集言外之意 JavaScript 的所有用法 TypeScript 都支持。关键词：TypeTypeScript 强调也是其优点之意是【类型】为什么需要 Ts 呢？举个小例子：一个杯子可以装水，也可以当笔筒装杂物。但是，拿装杂物的杯子些许显得不太干净。物有所用，各司其职。Js 是弱类型可以...
复制链接

扫一扫

专栏目录