一、什么是 TypeScript
先看一下官网上对 TypeScript 的介绍。
关键词:超集
言外之意 JavaScript 的所有用法 TypeScript 都支持。
关键词:Type
TypeScript 强调也是其优点之意是【类型】
为什么需要 Ts 呢?举个小例子:
一个杯子可以装水,也可以当笔筒装杂物。但是,拿装杂物的杯子些许显得不太干净。物有所用,各司其职
。
Js 是弱类型可以定义 number 类型,可以定义 string 类型,这就并未各司其职。
所以,这就诞生了 Ts
【前端经常遇见的类型问题]
##二、TypeScript 的安装及运行
安装:npm install -g typescript 或者 yarn add global typescript
确认是否安装成功: tsc -v
在官网中(中文网 – 练习)可以将 Ts 转换为 Js
浏览器会识别 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"会报错
第三步:在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 文件。此时浏览器打开,效果如下:
问答区:如果想同时运行多个 ts 文件该如何操作。
此时需要进行此命令tsc --init
命令执行成功之后,会自动生成一个tsConfig.json
文件,此文件则会将帮助所有的 ts 文件编译转换为相应的 js 文件。
✅运行所有 ts 文件,tsc
即可,则会全部转换
在此处,插播推荐两个插件:
Live Server(能够保存的时候,自动更改)
TypeScript Auto Compiler(能够保存之后,不需要执行 tsc
命令,自动会生成相应的 js 文件)
##三、TypeScript 入门
(一)TypeScript – 基本数据类型和报错解析
为了让程序有价值,我们需要能够处理最简单的数据单元:数字,字符串,结构体,布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型ÿ