ts总结

本文详细总结了 TypeScript 的基础知识,包括类型系统、接口、泛型等,并结合实际项目经验,探讨了如何在 JavaScript 项目中引入 TypeScript 提升代码质量和可维护性。
摘要由CSDN通过智能技术生成
// 类型注解
let var1: string;

// 类型推论
const var2 = true;
// var2 = 'sss'

// 原始类型: string number boolean undefined null symbol void ...
let var3: string | number;

// 类型数组
let arr: string[];

// 任意类型
let varAny: any;

// 函数类型约束, string参数类型, number返回类型
function greet(person: string): number {
  return 233
}

// void类型(没有返回值)
function warn(): void {
  const a = 0;
}

// 对象object, 不是原始类型就是对象类型
function fn1(o: object) {
  //
}

// 正确的姿势
function fn2(o: { props: number }) {
  // 传入的参数必须有props属性
}

// 类型别名type,自定义类型
type Prop = { props: number }
// function fn3(o: Prop) { }// 等同于fn2

// type 和interface的区别, 基本上完全相同

// 类型断言
const someValue: any = 'this is a string'
const strLen = (someValue as string).length

// 联合类型
let union: string | number
union = '1'
union = 1

// 交叉类型 主要作用是拓展类型
type First = { first: number }
type Second = { second: number }
// 拓展新的type
type FirstAndSecond = First & Second;
function fn4(param: FirstAndSecond): FirstAndSecond {
  return { first: 1, second: 2 } // fisrt 和second 必须都有
}

// 函数
/**
 * 1. 设置了参数就是必填参数
 * 2. 默认值
 * 3. 可选参数,位置一般是放在参数的最后
 */
function greeting(person: string, msg = 'abc', msg2?: string): string {
  return ''
}

// 函数重载 和java类似: 场景主要是源码和框架,函数用参数的类型、个数、返回值的类型来区分同名的函数
// 先声明,在实现
// 同名的声明可以有多个
function watch(cb1: () => void): void;
function watch(cb1: () => void, cb2: (v1: any, v2: any) => void): void;
// 实现
function watch(cb1: () => void, cb2?: (v1: any, v2: any) => void) {
  if (cb1 && cb2) {
    // 执行重载2
  } else {
    // 执行重载1
  }
}

// class
class Parent {
  private _foo = "foo"; // 私有属性,不能在类的外部访问 
  protected bar = "bar"; // 保护属性,可以在子类中访问
  // 参数属性:构造函数参数加修饰符,能够定义为成员属性 
  constructor(public tua = "tua") { }
  // 方法也有修饰符
  // private someMethod() { }
  // 存取器:属性方式访问,可添加额外逻辑,控制读写性 
  get foo() {
    return this._foo;
  }
  set foo(val) {
    this._foo = val;
  }
}
class Child extends Parent {

}
const p = new Parent()
const c = new Child()

// 接口仅约束结构,不要求实现,使用更简单
interface Person {
  firstName: string;
  lastName: string;
}
// greeting函数通过Person接口约束参数解构 
function greeting1(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}
greeting1({ firstName: 'Jane', lastName: 'User' }); // 正确
// greeting1({firstName: 'Jane'}); // 错误

// 泛型
// 不用泛型
// interface Result {
// ok:0|1;
//   data: Feature[];
// }

// 使用泛型
interface Result<T> {
  ok: 0 | 1;
  data: T;
}
// 泛型方法
function getResult<T>(data: T): Result<T> {
  return { ok: 1, data };
}
// 用尖括号方式指定T为string 
getResult<string>('hello')
// 用类型推断指定T为number 
getResult(1)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值