禹神：三小时快速上手TypeScript，TS速通教程(上篇、中篇、下篇，3合1笔记)，根据视频整理

TypeScript快速上手

📚一、TypeScript简介

1.TypeScript由微软开发，是其于JavaScript的一个扩展语言.
2.TypeScript包含了JavaScript的所有内容，即：TypeScript是JavaScript的超集
3.TypeScript增加了：静态奖型检查、接口、泛型等很多现代开发特性，因此吏适合大型项目的开发。
4.TypeScript需要编译为JavaScript,然后交给浏览器成其他JavaScript运行环境执行

📚二、为何需要ypeScript

1️⃣今非昔比的JavaScript(了解)

• JavaScript当年诞生时的定位是浏览器脚本语言，用于在网页中嵌入一些简单的逻辑而且代码量很少.
• 随着时间的推移，JavaScript变得越来越流行，如今的JavaScript已经可以全栈编程了.
• 现如今的JavaScript应用场景比当年丰富的多，代码量也比当年大很多，随便一个JavaScript项目的代码量，可以轻松的达到几万行，甚至十几万行1
• 然而JavaScript当年出生简陋，没考虑到如今的应用场景和代码量，逐渐的就出现了很多困扰

2️⃣JavaScript中的困扰
😔1,不清不楚的数据类型

let welcome = 'hello'
welcome()/此行报错：TypeError:welcome is not a function

😔2.有漏涧的逻辑

const str = Date.now() % 2 ? '奇数' : '偶数'
if (str !== '奇数') {
   
   
  alert('hello')
} else if (str === '偶数') {
   
   
  alert('world')
}

😔3.访问不存在的属性

const obj = {
   
   width:10,height:15 }
const area = obj.width * obj.heigth;

😔4.低级的拼写错误

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

3️⃣『静态类型检查』

• 在代码运行前进行检查，发现代码的错误或不合理之处，减小运行时异常的出现的几率，此种检查叫『静态类型检查』，TypeScript和核心就是『静态类型检查』，简言之就是把运行时的错误前置 。
• 同样的功能，TypeScript的代码量要大于JavaScript,但由于TypeScript的代码结构更加清晰，在后期代码的维护中TypeScript却远胜于JavaScript。.

📚三、编译TypeScript

浏览器不能直接运行TypeScript代码，需要编译为JavaScript再交由浏览器解析器执行。

🔖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

• 第二步：监视目录中的.ts文件变化

tsc --watch

• 第三步：小优化，当编译出错时不生成.js文件

tsc --noEmitonError --watch

📚四、类型声明

使用:来对变量或函数形参，进行类型声明：

let a:string     //变量a只能存储字符串
let b:number     //变量b只能存储数值
let c:boolean    //变量c只能存储布尔值
a = 'hello'
a = 100          //警告：不能将类型“number'”分配给类型“string”

b = 666
b = '你好'       //警告：不能将类型“string”分配给类型“number'”

c = true
c = 666         //警制：不能将类型“number”分配给类型“boolean”

//参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x:number,y:number):number{
   
   
  return x + y
}
  demo(100,200)
  demo(100,'200')        //警告：类型“string”的参数不能赋给类型“number”的参数
  demo(100,200,300)      //警告：应有2个参数，但获得3个
  demo(100)              //警告：应有2个参数，但获得1个

在:后也可以写字面量类型，不过实际开发中用的不多

1et a:'你好'  //a的值只能为字符串“你好”
1et b:100    //b的值只能为数字180
a = '欢迎'   //警告：不能将类型"欢迎"”分配给类型"你好"”
b = 200     //警告：不能将类型“200”分配给类