浅学TypeScript

ts的理解和js的区别

ts是js类型的超集，支持es6的写法，支持面对对象的编程概念。如类、接口、泛型、继承等

是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误

ts需要在编译阶段需要编译成纯js来运行

特性：

类型批注和编译时类型检查：在编译时批注变量类型

类型推断：ts没有批注变量类型会自动推断变量的类型

类型擦除：在编译过程中批注的内容和接口会在运行的时候利用工具擦除

接口：ts中用接口来定义对象类型

枚举：用于取值被限制在一定范围内的场景

Mixin：可以接受任意类型的值

泛型编译：写代码时使用一些以后才指定的类型

元组：元组合并了不同类型的对象，相当于一个可以装不同类型数据的数组

区别：

1，ts是js的超集，拓展了js的语法

2，ts可以处理已有的js代码，并只对其中的ts代码进行编译

3，在编写ts文件时会自动编译成js文件

4，ts文件的后缀名是.ts，js是.js

类型推断：会根据变量的初始值进行类型推导

let str="abc"
str=123 //会报错。Type 'number' is not assignable to type 'string'.

类型注解

let str:string
str="abc"

类型断言 

let numArr=[1,2,3]
const res=numArr.find(item=>item>2) as number //结果断言是number类型
res*5

ts数据类型

基础类型

boolean，number，string，array，tuple（元组），enum（枚举），any，null和undefined，viod，never，object

let v1: string = "abc"
let v2: number = 123
let v3: null = null
let v4: undefined = undefined


let v5: number[] = [1,2,3]
let v6: Array<number> = [1,2,3]

//元组
// 限制了数组元素的类型和个数，修改也必须按照元素类型修改,元素类型不用相同
let t1: [number,string,number] = [1 ,'a',3]

///元组元素也可以可选，不一定非要用，可选值一定要在必选值后面
let t2: [number,string,number?] = [1 ,'a']

//枚举
// 定义一组基本类型数据的类型，让代码更易读和理解
enum Color{
    red,
    green,
    bule
}
const a:Color=Color.red //a输出为0
const b:string=Color[0] //b输出为'red'

//null和undefined
//null是只有一个值的特殊类型，表示一个空对象的引用，undefined表示一个没有设置值的变量
//ts中null和undefined是所有类型的子类型，如果配置了strictNullChecks，就只能赋值给void和他们各自


//never 类型一般用来指定那些总是会抛出异常、无线循环

ts高级类型

1，交叉类型

必须同时满足

interface One{
    name:string
}

interface Two{
    age:number
}

function son(a:One,b:Two) :One & Two {
    const res={
       name:'jack',
       age:12 //必须同时满足one和two的类型
    }
    return res
}

2，类型联合

可以通过竖线分配多个类型，只能一种，不能共存

let V4:string | null =null //可以是null或者字符串
let v5:1 | 2 | 3 =3 //只能是1，2，3其中的一个

3，类型别名type

会给一个类型起一个新名字

和interface区别：interface只能用于定义对象类型， type可以作用在对象，交叉、联合、原始类型等，范围更广

type Some = boolean | number

const a :Some=true
const b: Some=123

//泛型也支持
type Container<T> = { value: T }

4，类型索引keyof

keyof类似Object.keys，可以获取一个类型中的所有键

interface Some {
    name:string,
    age:number
}
type One = keyof Some //"name"和"age"

const Obj:One='name'
console.log(Obj) //"name"

补充typeof ：取某个值的 type

const a: number = 3

const b: typeof a = 4
// 相当于: const b: number = 4

5，类型约束

通过extends进行约束，不同于class中的继承，泛型类使用的主要是对泛型加以约束

type Params= string | boolean | number 

//只能是string、boolean、number类型
function copy<T extends Params>(arg:T):T{
    return arg
}

一般和keyof联合使用。例如：写一个专门获取对象值的方法

function getValue(obj: object, key: string) {
 return obj[key]
} //编译会报错

正确写法

const obj2 = {
	name: 'test',
	age: 18
}
function getValue<T, K extends keyof T> (obj: T, key: K) {
  return obj[key]
}

getValue(obj2, 'name')
getValue(obj2, 'age')

6，映射类型

type User = {
    name:string;
    age:number;
    sex:string;
}
// P in 相当于js循环中的for in
//将user中的属性都映射过来，然后通过readonly变成只读属性
type ReadonlyUser = {readonly [P in keyof User] : User[P]}
 
let people:ReadonlyUser = {
    name:'yyh',
    age:33,
    sex:'woman'
}

7，条件类型

T extends U? X:Y //如果T是U的子集，就是类型X，否者就是类型Y

TS工具类型

1，Partial<T>：将类型 T 中的所有属性变为可选属性

interface people  {
    name:string,
    age:number
}
type User=Partial<people>

const people1:User={name:'jack'}

2，Required<T>：将类型T中的所有可选属性变为必选属性.

用法同上

3，Pick<T，K>：类型T中选择指定的属性K，组成新的类型

interface people  {
    name:string,
    age:number,
    tel:number,
    sex:string
}
 
type YY = Pick<people, 'name' | 'age'>
 
let a:YY = {name:'wangcai',age:18}

4，Omit<T, K>:从类型 T 中删除指定的属性 K，生成一个新的类型。

用法同上

5，Record<K, T>: 它可以生成一个K为属性类型，T为属性值的类型

type People = Record<string, number>
 
let a:People = {
    name:23243,
    age:9990,
    tel:130130
}

接口

定义：接口指对对象内的属性和方法的类型约束，接口中的所有方法和属性都是没有实值的

interface User  {
    name:string,
     age?: number   //可选属性
    sayHello():void;
    readonly isMale: boolean //只读属性
}

接口继承

interface Father{
    prop1:string,
    prop2:number
}

interface Son extends Father{
    prop3:string
}

const myObj:Son = {
    prop1:'acbc',
    prop2:2,
    prop3:"bc"
}

可以继承多个，父类用逗号隔开

类

定义类

  class Person{
      name: string;
      age: number;
  
      constructor(name: string, age: number){
          this.name = name;
          this.age = age;
      }
  
      sayHello(){
          console.log(`大家好，我是${this.name}`);
      }
  }

使用类

  const p = new Person('孙悟空', 18);
  p.sayHello();

继承

可以使用extends继承

class Animal{
    move(m:number =0){
        return `走了${m}米`
    }
}
class Dog extends Animal{
    bark(){
        return "汪汪！"
    } 
}

const dog = new Dog
dog.move(10)
dog.bark()

修饰符

公共public：可以在类、⼦类和对象中修改

私有private：只能在该类的内部访问，实例对象不可访问

受保护protect：除了在类的内部访问，子类中依然可以访问，实例对象不可访问

只读修饰符：readonly，只能读取，不能修改

抽象类

不能去实例化，但是可以被继承，抽象类里有抽象方法

abstract class People {
  name: string
  constructor(name: string) {
    this.name = name
  }
}

class Teacher extends People{
  constructor(name:string){
    super(name)
  }
  speak(){
    console.log('名字是：',this.name);
  }
}

const one=new People() //报错无法创建抽象类的实例。
const two=new Teacher('名字') //正确

接口创建类

// 接⼝ —— Person，只能包含抽象⽅法
interface Person {
 // 属性，不写具体值
 name:string
 age:number
 // ⽅法，不写具体实现
 speak():void
}
// 创建Teacher类实现Person接⼝
class Teacher implements Person {
   name:string
   age:number
 constructor(name:string,age:number){
   this.name = name
   this.age = age
 }
 speak(){
 console.log('我在⻜快的⾏⾛中......')
 }
}

枚举

通俗来讲，枚举就是一个对象的所有可能取值的集合

数字枚举

enum Color {
    red,  //值默认为0
    green, //值默认为1
    blue   //值默认为2
}
console.log(Color.red); //输出0
console.log(Color[0]);  //输出"red"

如果将第一个值进行赋值后，后面的值也会自动加1

enum Color {
    red=10,  //值10
    green, //值默认为11
    blue   //值默认为12
}
console.log(Color.red) //输出10
console.log(Color[10]);//输出red

字符串枚举

enum Color {
    red='red',  
    green='green', 
    blue='blue'   
}
console.log(Color.red); //"red"
console.log(Color['red']); //"red"

应用场景，后端返回的是0-6标记日期，可以用枚举提高代码可读性

函数

可选参数

？

const add = (a: number, b?: number) => a + (b ? b : 0)

剩余参数

const add = (a: number, ...rest:number[]) => rest.reduce(((a,b)=>a+b))

函数重载

允许创建名称相同，但是输入输出不同的函数

function add(a:string,b:string):string
function add(a:number,b:number):number

function add(a:string|number,b:string|number){
    if(typeof a ==="string" && b==="string"){
        return a+b
    }else if(typeof a ==="number" && b==="number"){
        return a+b
    }
}

泛型

在ts中，定义函数、接口的时候，当时不能很好确定数据类型，要在后面使用的时候才能确定，这时候就可以用泛型

function add<T>(a: T): T {
    return a
}

可以定义多个泛型

function add<T,K>(a: T, b:K): [K,T] {
    return [b, a]
}