一、定义
TS全称是Typescript是由微软开发的一种开源编程语言，它是JavaScript的一个超集，通过在JavaScript的基础上添加静态类型定义来增强其功能，官方文档中文版：www.typescriptlang.org/zh/
二、TS 与 JS的区别
| JavaScript语言 | TypeScript语言 |
|---|---|
| 动态弱类型语言 | 静态强类型语言 |
| 冗余代码 | 无冗余代码 |
| 可以对变量进行类型更改 | 不允许改变变量的数据类型 |
| 代码无静态检查，运行报错 | 代码先编译（静态检查），编译报错 |
1、语言类型介绍
- 静态类型：一个变量声明时它的类型就是明确的，声明过后不允许在修改
- 动态类型：运行阶段才明确变量的类型，而且可以修改（或者说变量没有类型，变量存放的值有类型）
2、JS混合类型（可变）
Javascript 是一种弱类型语言，变量是没有明确类型的，JavaScript 引擎在代码编译时会自动进行隐式类型转换将一种数据类型转换为另一种数据类型
let a = 10
a=function(){
console.log('a')
}
a='string' //js 弱类型语言,比较灵活
3、Ts变量类型（不可变）
比如，当我们创建一个test.ts文件，代码如下，我们会发现编译器会报错，告诉我们类型错误，这就展示了ts的一个作用。类型限制，因为js本来是一个弱类型语言，而ts是js的超集，完全兼容js，并且我们可以将变量写成强类型
function addTen(n:number){
return n+10
}
addTen(10)
addTen('10') //提示报错
let b= 'abc'
b=88 //报错，无法赋值
4、业务应用对比
-
场景1 : 阅读Js代码时，只能通过注释或深入函数代码细节，才能判断函数所需的参数类型和返回类型；Ts语言是直接查看类型注释即可，ts提供的类型系统如同文档说明，可直接查看
-
场景2 : Js 遇到cannot read property ....undefined导致页面崩溃，并且会增加冗余的代码，运行时候才能发现 错误，如果使用ts,该语言编译阶段就会产生提示错误，不用运行查找
-
场景3 : 为保证代码的健硕性，通常会对一个函数输入参数进行各种假设
"use strict";
function addTen(n){
return n+10
}
addTen(10)
addTen('10')
console.log(addTen(10)) // 20
console.log(addTen('10')) // 1010
function addTen2(n){
if(typeof n !== 'number'){
throw Error('n is not a number')
}
return n+10
}
addTen2(10) // 20
addTen2('10') // Error: n is not a number 无错误提示
三、TS的优势
1. 语言扩展
TypeScript 是一种给 JavaScript 添加特性的语言扩展，增加的功能包括：
- 接口
- 枚举
- Mixin
- 元组
- Await
- 类
- 模块
- lambda 函数的箭头语法
2. 类型推断机制
TypeScript的类型推断机制基于变量的初始值或上下文信息来推断其类型。当声明一个变量并为其赋值时，TypeScript编译器会分析该值的类型，并将其作为变量的类型。如果后续对该变量进行赋值时，新的值与推断出的类型不兼容，编译器也会抛出错误
let name = "Alice"; // 推断出name的类型为string
name = 123; // 报错：不能将类型 'number' 分配给类型 'string'
3. 类型兼容性
当一个类型 Y 可以被赋值给另一个类型 X 时，我们就可以说类型 X 兼容类型 Yx = y 即是左侧有的属性右侧也有
// X = Y , X兼容Y ,需要 y至少具有跟X相同的属性
let X = { name: '张三'}
let Y = { name: '王五', age: 18}
X = Y //X兼容Y
//Y = X //Y不兼容X
interface Animal{
name:string,
age:number
}
interface Dog extends Animal{
bread:string
}
let myDog : Dog = {
name: '小黑',
age: 1,
bread: '哈士奇'
}
let myAnimal:Animal =myDog //接口兼容性 myAnimal = myDog
4. 类型守卫
类型守卫是TypeScript中的一种特殊机制，它允许开发者通过运行时检查来缩小变量的类型范围。类型守卫通常用于处理可能是多种类型的变量，并根据某些条件确定变量的确切类型
- typeof 类型保护
- instanceof 类型保护
- in 类型保护
- 自定义类型保护
//typeof 基本数据类型
function handle (idCard: number | string) {
if (typeof idCard === 'string') { //通过typeof建立保护区块
return idCard.length
}else {
return idCard.toFixed(2)
}
}
console.log( handle('12345'))
//instanceof 类与对象
class Cat {
helloCat(){
console.log('我是猫...')
}
}
class Dog {
helloDog(){
console.log('我是狗...')
}
}
function handleAnimal(pet:any) {
if (pet instanceof Cat) {
pet.helloCat()
}else if(pet instanceof Dog) { //通过instanceof建立类跟对象保护区块
pet.helloDog()
}
else
{
console.log('可能是其他动物...')
}
}
handleAnimal(new Cat())
//in 判断属性是不是在一个对象内
type Animal = Cat | Dog
function getPet(pet:Animal)
{
if ('helloCat' in pet) {
//属于猫类
pet.helloCat()
}else if('helloDog' in pet) {
//属于狗类
pet.helloDog()
}
}
getPet(new Dog())
//自定义类型保护 类型谓词
function isCat(pet:Animal) : pet is Cat { //自定义函数
return (pet as Cat).helloCat!== undefined
}
function getPet2(pet:Animal)
{
if (isCat(pet)) {
//属于猫类
pet.helloCat()
}else {
//属于狗类
pet.helloDog()
}
}
getPet2(new Cat())
