当前位置：首页 > news >正文

TypeScript 简介

news 来源：原创 2024/5/3 2:05:58

参考文章：http://ts.xcatliu.com/

一、简介

什么是 TypeScript
　　添加了类型系统的 JavaScript，适用于任何规模的项目。

TypeScript 的特性。
　　静态类型：在编译阶段就能确定每个变量的类型【JavaScript：动态类型，运行时确定变量的类型】
　　弱类型：允许隐式类型转换【完全兼容JavaScript】

二、基础

1. 原始数据类型 + 任意值 + 类型推论
　　布尔值、数值、字符串、null、undefined、Symbol【ES6】
　　
　　any: 任意值,允许赋值为任意类型
　　　1) 声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值；
　　　2) 变量声明未指定类型时，会被识别为任意值类型
　　　
　　类型推论：如果没有明确的指定类型，ts会依照类型推论（Type Inference）的规则推断出一个类型；

2. 联合类型

    let myFavoriteNumber: string | number;
    myFavoriteNumber = 'seven';
    myFavoriteNumber = 7;

3. 接口：用来定义对象

赋值的时候，变量的形状必须和接口的形状保持一致,多少一些属性都不行；

 interface Person {
    	name: string;
         age: number;
      }
      let tom: Person = {
         name: 'tom',
         age: 25
      }

可选属性（?:）：该属性可以不存在

 interface Person {
    	name: string;
         age: number;
         gender?: string;
      }
      let tom: Person = {
         name: 'tom',
         age: 25
      }

任意属性

interface Person {
    	name: string;
         age: number;
         [propName: string]: any; // 定义了任意属性取 string 类型的值
      }
      let tom: Person = {
         name: 'tom',
         age: 25,
         gender: 'male'
      }

  一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：
  一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

4. 数组的类型

1.常用定义方法
【类型 + 方括号】let arr: number[] = [1,2,3,4];

2.【数组泛型】let arr: Array = [1,2,3,4];

5.函数的类型

函数声明：

// 输入多余的（或者少于要求的）参数，是不被允许的
function sum(x:number,y:number): number{
   return x+y;
}

函数可选参数

//  可选参数后面不允许再出现必需参数了
function buildName(firstName: string, lastName?: string) {
     if (lastName) {
        return firstName + ' ' + lastName;
     } else {
        return firstName;
     }
    }
   let tomcat = buildName('Tom', 'Cat');
   let tom = buildName('Tom');

6.类型断言.
手动指定一个值的类型【语法：值 as 类型】，只会影响 TypeScript 编译时的类型。

 1) 联合类型可以被断言为其中一个类型;    
 2) 父类可以被断言为子类;  
 3) 任何类型都可以被断言为 any;  
   理想情况下，TypeScript 的类型系统运转良好，每个值的类型都具体而精确。
   (Window as any).nub = 1; // 在any类型的变量上，访问任务属性都是可以的。
 4) any 可以被断言为任何类型;
   通过类型断言及时的把 any 断言为精确的类型，亡羊补牢，使我们的代码向着高可维护性的目标发展
 5) 类型断言的限制
   要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可;
 6) !【感叹号】：非null、非undefined的类型断言；
备注：
  1. 使用类型断言时一定要格外小心，尽量避免断言后调用方法或引用深层属性，以减少不必要的运行时错误
  2. 类型断言不是类型转换，它不会真的影响到变量的类型