TypeScript

126 阅读3分钟
  1. 什么是TS?

JavaScript的超集,可以编译成JavaScript。添加了类型系统的JavaScript,可以适用于任何规模的项目。

2.什么是接口?

2.1 接口:用于对对象的形状的描述,相当于是一个约束,让对象遵循约束

主要用于对象或者对象数组的定义

interface objInterFace {
  name:string; //必须属性
  age:number; // 必须属性
  sex?:string; // 可选属性 
  [propName:string]:any; // 任意属性 (往下可以随意添加属性,不限个数)
  readonly id: number; // 只读属性
}

2.2 接口继承 extends

interface intef1 {
  name:string,
}
interface intef2 extends intef1{
  age: number
}   
/*
  相当于 intef2 = {
          name:string,
          age: number
        } 
*/

3.定义变量

变量名 : 数据类型(接口) = 初始值

  let flag:boolean = false; //布尔型
  let num :number = 1 //数字型
  let name:string = 'zyz' //字符串型
  let u:undefined = undefined //undefined型
  let n:null = null //null型
  let data : number | string = '1' // 联合类型定义 值可以是字符串或者数字
  let data:any = '1' // any 任意类型

4.定义数组

let arr:number[] = [1,2,3,4,5] // 基本类型定义
let arr2 :(string|number)[] = [1,2,'1'] // 联合类型定义
//接口
interface obj  {
name:string;
age:number
}
let arr3 :obj[] = [{name:'zyz',age:18}] // 接口类型定义

5.定义对象

通过接口interface来规定对象属性的类型

  const obj:objInterFace = {
        name:'zyz'
        age:25,
    }

6.定义函数

6.1 普通定义:function fn(输入类型):输出类型

    function fn(x: number, y: number):number {
        return x * y
    }

6.2 接口定义

interface INterfn {
    (x:string,y:string):boolean; 
}  // 将函数参数的类型与返回结果的类型定义到接口里

let f1:INterfn = function(x,y) {
    return x === y
}  // 在函数名后面加冒号引入

7.泛型

7.1 泛型:是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性

泛型类型T T表示任何类型

1.定义对象时使用

    interface interF1 <T> {
      name:T,
      data:T[]
    }
    const obj1:interF1<string>= {
      name:'zyz',
      data:['1']
    } // 定义对象时 需要把泛型的类型传过去
    
2.定义函数时使用

interface INterfn { 
    <T> (x:T,y:T):boolean;
}

let f1:INterfn = function(x,y) {
    return x === y
}

f2<string>('1','2') //需要在函数调用时将泛型传过去

7.2 泛型约束

function fn1<T>(x:T):number {
   return x.length
} 
fn1<number>(2) // 报错
// T表示任何类型,这样写的话会报错,因为某些类型是没有length属性的,例number
//可以给泛型T加上约束
interface length  {
  length: number;
}
 function fn1<T extends length>(x:T):number {
   return x.length
} 
/* <T extends length> 意思是所传入的泛型T必须拥有length属性 */

8. TypeScript的内置方法

// 首先定义一个接口类型
 interface Person {
      name: string;
      age: number;
      sex: "男" | "女";
}

Pick : 从已声明的接口类型中选择指定属性生成新的接口类型

const personPick = Pick<Person,'name'|'age'>
// 此时 personPick 接口类型为:
{
    name: string;
    age: number;
}

Partical : 将已声明的接口类型中的属性全部变成可选属性

const personPartical = Partical<Person>
// 此时 personPartical 接口类型为:
{
    name?: string;
    age?: number;
    sex?: "男" | "女";
}

Omit : 从已声明的接口类型中删除指定属性生成新的接口类型

const personOmit = Omit<Person,'name'|'sex'>
// 此时 personOmit 接口类型为:
{
    age: number;
}

Required : 作用与Partical相反,将已声明的接口类型中的属性全部变成必选属性

const personOmit = Required<Person,'name'|'sex'>
// 此时 personOmit 接口类型为:
{
    age: number;
}