TypeScript学习总结

基础预览

ts可以声明一个变量的类型，此后该变量只能为该类型

let a: number;
a = 10;

如果声明和变量同时进行，ts自动对变量进行类型声明

let a = 10;

对函数的参数进行类型限制

function sum(a: number,b: number) {
  return a + b;
}

函数返回值类型限制

function sum(a: number,b: number): number {
  return a + b;
}

类型介绍

any类型

let a: any;
let b;

上面两种写法都表示该类型为any，任何a,b可以为任何类型

ts中的字面量

let a: 10;

这样写了之后a的值就只能为10不能为其他值，相当于const

这样写可以采用以下用法

let b: "male" | "female";
b = "male";
b = "female";

联合类型

let c: boolean | string;

unknow类型

unknow相当于一个安全的any，unknow类型的值不能赋给别的类型的值

let a: number;
a = 10;
let w: unknown;
w = 10;

a = w;//显示错误

w是不能赋值给a的

object类型

let c: {name: string}//对象里面只能有一个name属性
c = {name: 'sss'}

let r: {name: string, age?: number}//age可有可无
r = {name: 'sss'}

let f: {name: string, [propName: string]: any}//后面接任意类型的属性

//表示d得是一个函数，函数的两个参数得是number,返回值得是number
let d: (a: number, b: number) => number
d = function(n1: number, n2: number) {
  return n1 + n2
}

array类型

let e: string[];
e = ['a','s']

let v: Array<number>//数组类型

tuple类型

let tuple: [string, string]//数组的长度是固定的
tuple = ['a', 's']

enum类型

枚举类型主要就是将多种值全部列举出来

//enum
enum Gender {
  Male = 0,
  Female = 1
}
let i: {name: string, gender: Gender};

i = {
  name: '钱钱钱',
  gender: Gender.Male
}

console.log(i.gender === Gender.Male)

类型的别名

type myType = 1 | 2 | 3
let o: myType;//o只能是123中的一个
o = 3

类型总结

• number
• string
• boolean
• object
• array
• function
• void(空值)
• never(没有值)
• tuple(固定长度的数组)
• enum(枚举)
• unknown

编译选项

编译单个ts文件

tsc app.ts

编译单个ts文件并监视

tsc app.ts -w

编译所有ts文件

需要先在项目中创建,tsconfig.json文件

tsc

官方文档：

https://www.tslang.cn/docs/handbook/tsconfig-json.html

类

类的基本使用

class Dog {
  name: string
  age: number
  constructor(name: string, age: number) {
    //this表示当前实例
    //在构造函数里面对属性进行赋值
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}
const dog = new Dog('aaa', 12)

//继承
class Cat extends Dog {
  age: number
  constructor(name: string, age: number) {
    super(name, age)//在父类中使用constructor必须写super，调用父类的构造函数
    this.age = age
  }
  run() {
    super.say()//super相当于调用父类的say方法
  }
  //子类添加了与父类相同的方法，子类的方法会覆盖父类的方法
}

const cat = new Cat('sss', 22)


//抽象类
abstract class Name {//抽象类不能用来创建对象，只能用来继承
  constructor(parameters) {
    
  }
  abstract sayHello();//抽象方法，子类必须得抽象方法进行重写
}

接口

//接口
/**
 * 接口可以定义类的时候去限制类的结构
 * 接口中的所有的属性都不能有实际的值
 * 接口只定义对象的结构，而不考虑实际值
 * 在接口中所有的方法都是抽象方法
 */
interface myInter {
  name: string
  sayHello():void;
}

//使用接口
class MyClass implements myInter {
  name: string
  constructor(name: string) {
    this.name = name
  }
  sayHello() {
    console.log('111');
    
  }
}

属性的封装

/**
 * 属性的封装
 * public修饰的属性可以在任意位置访问
 * private私有属性，私有属性只能在类内部进行访问
 * protected受保护的属性，只能在当前类和当前类的子类中使用
 * 可以通过在类中添加方法使得私有属性可以被外部访问
 */
class Person {
  private _name: string
  private _age: number
  constructor(name: string, age: number) {
    this._name = name
    this._age = age
  }

  // getName() {//访问
  //   return this.name
  // }
  // setName(value: string) {//设置
  //   this.name = value
  // }
  // getAge() {
  //   return this.age
  // }
  // setAge(value: number) {
  //   if(value >= 0) {
  //     this.age = value
  //   }
  // }


  //以上可进行简写
  get name() {
    return this._name
  }

  set age(value: number) {
    this._age = value
  }
}

const per = new Person('sad', 22)

// per.setName('dgd')


per.age = 22

泛型

/**
 * 在定义函数或是类时，如果遇到类型不明确就可以使用泛型
 */
function fn<T>(a: T): T {
  return a
}
fn(10)
fn<string>('222')//指定泛型

//指定多个泛型
function fn2<t,k>(a: t, b: k) {
  return a
}

fn2<number, string>(123, 'asd')


interface Inter {
  length: number
}

function fn3<t extends Inter>(a: t) {
  return a.length
}