typescript学习计划（一）--简单介绍typescript

一、 什么是TypeScript？

1. TypeScript 是 具有类型语法的 JavaScript
2. TypeScript 是一种语言，是 JavaScript 的超集。
3. TypeScript 提供了 JavaScript 的所有功能，以及在这些功能之上的附加层。例如：静态类型检查、接⼝、 泛型等很多现代开发特性等。更适合大型项目开发
4. TypeScript 代码转换为 JavaScript，它在 JavaScript 运行的任何地方运行：在浏览器中、在 Node.js 或 Deno 上以及在你的应用程序中。

二、 为何需要 TypeScript

1. 描述

• JavaScript最初是一种用于浏览器的简单脚本语言，用于嵌入网页中的简短代码片段，代码量很少。
• 随着时间的推移，在 “互联网” 漫长而渐进的成长过程，从一个简单的静态页面网络开始，逐渐演变成一个丰富的各类应用平台。 JavaScript已经变得足够流行， 编写的应用代码量越来越多！
• 而随着代码量的增多，JavaScript的卑微起步使得其逐渐就出现了很多困扰。

2. JavaScript 中的困扰

• 不清楚的数据类型

let welcome = 'hello'
welcome() 
// Uncaught TypeError: hello is not a function

• 低级的拼写错误

const message = 'hello,world'
message.toUperCase()

• 访问不存在的属性

const obj = { width: 10, height: 15 };
// Why is this NaN? Spelling is hard!
const area = obj.width * obj.heigth;

• 等等

3.『静态类型检查』
在不运行代码的情况下检测代码中的错误称为静态检查。根据正在操作的值的种类来确定什么是错误，什么不是错误，这被称为『静态类型检查』。TypeScript 和核⼼就是『静态类型检查』，简⾔之就是把运⾏时的错误前置。

TypeScript 在执行前检查程序是否有错误，并根据值的种类进行检查，使其成为静态类型检查器。例如，上面的最后一个例子因为 obj 的类型而出错。这是 TypeScript 发现的错误：

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
// Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?

三、 编译 TypeScript

1. 命令⾏编译
   要把 .ts ⽂件编译为 .js ⽂件，需要配置 TypeScript 的编译环境，步骤如下：

• 第⼀步：创建⼀个 demo.ts ⽂件，例如：

const person = {
 name:'李四',
 age:18
}
console.log(`我叫${person.name}，我今年${person.age}岁了`)

• 第⼆步：全局安装 TypeScript

npm i typescript -g

• 第三步：使⽤命令编译 .ts ⽂件

tsc demo.ts

2. ⾃动化编译

• 第⼀步：创建 TypeScript 编译控制⽂件

tsc --init

过程中会⽣成⼀个 tsconfig.json 配置⽂件，其中包含着很多编译时的配置。

• 第⼆步：监视⽬录中的 .ts ⽂件变化

tsc --watch 或 tsc -w

• 第三步：⼩优化，当编译出错时不⽣成 .js ⽂件

tsc --noEmitOnError --watch