TS基础内容

1.1 TypeScript简介

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

1.2为何需要TypeScript

1.2.1 JavaScript中的困扰

1. 不清不楚的数据类型
2. 有漏洞的逻辑

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

3. 低级的拼写错误

4. 访问不存在的属性

在代码运行前进行检查，发现代码的错误或不合理之处，减小运行时异常的出现的几率，此种检查叫做静态类型检查，Typescript的核心就是【静态类型检查】，简而言之就是把运行时的错误前置

同样的功能，TypeScript的代码量要大于JavaScript，但由于TypeScript的代码结构更加清晰，在后期代码的维护中TypeScript却远胜于JavaScript

1.3 编译TypeScript

.ts文件编译其实还是转成了.js文件

利用TypeScript Complier 编译器
利用tsc命令把ts文件变成js文件（编译.ts文件）
tsc --init   为我生成一个ts的配置文件（这个配置文件里面写了ts文件要如何转化为js）

1.将"target"改成“es2025"  这样版本为ES6
2.输入：tsc --watch index.ts   //检测index.ts文件的变化，只要有一丝丝的变化，都要转化成index.js文件
3.检测当前工程里的所有TS文件：tsc --watch

优化：自动化编译犯错的时候，不要转化成js了

1.3.1 命令行编译

要把.ts文件编译为.js文件，需要配置TypeScript的编译环境，tsc步骤如下

• 第一步：创建一个demo.ts文件，例如：

1.3.2 自动编译

1.4 类型声明（类型注解）

作用：限制变量能赋值的数据类型并给出调用方法的提示

//简单类型的注解完全按照JS的类型（全小写的格式）来书写即可
let age:number =18
let a:string	//变量a只能存储字符串  注意：string是小写，不要写成String
a=9	//报错
a=false	//报错
a='Hello'//正确
let b:number	//变量b只能存储数值
b=-99
let c:boolean	//变量c只能存储布尔值
c=truefunction count(x：number,y:number)：number{//限制函数接受参数的类型return x+y	//返回值也必须是number,由括号后边的：number限制return x+y+"hello"	//报错
}
let result =count(1,2)
count(1)//少传，错误
count(1,2,4)//多传，错误
//注意：定义的函数接受几个参数就需要给他去传入几个参数，多几个少几个都不行，限制的非常严格
console.log(result)

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

let a:'你好'`
let b:100
//a的值存储的是'你好',你可以能会逆推,'你好'是字符串类型，所以a变量也可以存储字符串类型，但是是错误的，a变量只能存储'你好',这就称作是字面量类型

1.5 类型推断

TS会根据我们的代码，进行类型推导，例如下面代码中的变量d,只能存储数字

let d=-99	//TypeScript会推断出变量的类型是数字
d=false		//警告：不能将类型"boolean"分配给类型"number"

但要注意：类型声明不是万能的，面对复杂类型的推断容易出现问题，所以尽量还是明确的编写类型声明！

1.6 类型总览

JavaScript中的数据类型
1.string
2.number
3.boolean
4.null
5.undefined
6.bigint
7.symbol
8.object
备注：其中object包含：Array、Function、Date、Error

TypeScript中的所有数据类型
1.上述所有的JavaScript类型
2.六个新类型
3.TS新增类型：联合类型、类型别名、接口(interface)、字面量类型、泛型、枚举、void、any等

1. any
2. unkonw
3. never
4. void
5. tuple
6. enum

注意：两个用于自定义类型的方式

1. type
2. interface

注意点！

在JavaScript中的这些内置构造函数：Number、String、Boolean、它们用于创建对应的包装类对象、在日常开发时很少使用，在TypeScript中也是同理，所以在TypeScript中进行类型声明，通常都是小写的number、string、boolean

例如下面代码
let str1：string
str1:'hello'
str1=new String('hello')//报错let str2:String
str2= "hello"
str2=new String('hello')console.log(typeof str1)
console.log(typeod str2)

1.6.1 原始类型VS包装类型

• 原始类型：如number、string、boolean,在JavaScript中是最简单的数据类型，它们在内存中占用的空间很少，处理速度快
• 包装对象：如Number对象、String对象、Boolean对象，是复杂的数据类型，在内存中占用更多的空间。在日常的开发中很少由开发人员自己创建包装对象
• 自动装箱：JavaScript在必要时会自动将原始类型包装成对象，以便调用方法或属性

//原始类型字符串
let str='hello'
// str.length//字符串没有length属性，但是怎么取到的呢
//当访问str.length时，JavaScript引擎做了以下工作
let size=(function)() {//1.自动装箱：创建一个临时的String对象包装原始字符串let tempStringObject =new String(str)//2.访问String对象的length属性//3.销毁临时对象，返回长度值//(JavaScript引擎自动处理对象销毁，开发者无感知)return lengthValue
})()
console.log(size)

1.7 常用类型

1. any

any的含义是：任意类型，一旦将变量类型限制为any,那就意味着放弃了对该变量的类型检查

//显式的定义
//明确的表示了a的类型是 any -[显示的any]
let a:any
//以下对a的复制，均无警告
a=99
a='hello'
a=false
//隐式的定义
//以下是对b的赋值，均无警告
let b
b=99
b='hello'
b=false

注意点：any可以赋值给任意类型的变量

"use strict";
let c;
c = 9;
let x;
x = c; //无警告
console.log(x);//输出9

2. unknow

unknow的含义是：未知类型

unkonw可以理解为一个类型安全的any,适用于：不确定·数据的具体类型

unknow和any的差别就是

• unkonw 会强制开发者使用之前进行类型检查，从而提供更强的类型安全性

let a:unknowna=99
a=false
a='hello'let x:string
// x=a
console.log(a)
//第一种手段
if(typeof a==='string'){x=a
}
//第二种方法：用断言
x=a as string//第三种（断言的两种写法）
x=<string>a

• 读取any的任意类型都不会报错，而unkonw刚好恰恰相反

let str1:string
str1='hello'
str1.toUpperCase() //无警告let str2:any
str2;'hello'
str2.toUpperCase() //无警告let str3:unknown
str3='hello'
str3.toUpperCase()//警告：“str3"的类型为”未知",调用不到
//三种方法调用
//if判断，断言
(str3 as string).toUpperCase()

3. never

如果用来限制变量就被我们玩坏了，是没有意义的，never并不是用来限制变量的，是用来限制函数的

function demo():number{//返回值是number类型return 100//有返回值，并且是数值型
}function demo():never{throw new Error('程序异常')}let x=demo()
console.log(x)

never一般是TypeScript自动推断出来的

4. void

• void通常用于函数返回值的声明，含义：【函数不返回任何值，调用者也不应该依赖某返回值进行任何操作】

function logMessage(msg:string):void{console.log(msg)
}
console.log('你好');
//void的空可以接受undefined  >隐式返回值

所以以下都是符合语法规范的

//1.
function logMessage(msg:string):void{console.log(msg)}
console.log('你好');//2.
function logMessage2(msg:string):void{console.log(msg)return;}
console.log('你好');
//3.
function logMessage3(msg:string):void{console.log(msg)return undefined;
}
console.log('你好');

声明成void 和undefined的区别

function demo(msg:string):void{console.log(msg)}
let result =demo("hi")
console.log(result)
if(result)//警告，后续不能进行操作

function demo(msg:string):undefined{console.log(msg)return;}
let result =demo("hi")
console.log(result)
if(result){}//不会报错