TypeScript基础

已于 2022-06-01 10:58:31 修改
阅读量548 收藏
点赞数 1
分类专栏： TypeScript 文章标签： typescript
于 2020-04-10 14:06:16 首次发布
Copyright 2020 by 花贝
本文链接：https://blog.csdn.net/YanH_an/article/details/105431840
版权

各种各样的类型

基础类型：  number   string   null   undefined   symbol   boolean   void空

对象类型： {}   Class   function []

const teacher: {
  name: string;
  age: number;
} = {
  name: "Dell",
  age: 18
};
const numbers: number[] = [1, 2, 3];
class Person {}
const my: Person = new Person();
const getNumber: () => number = () => {
  return 123;
};

枚举类： 对应的值默认从0开始 可以手动赋值

enum Status {
  OFFLINE,
  ONLINE,
  DELETED
}
console.log(Status.OFFLINE);
console.log(Status[0]);
function getResult(status) {
  if (status === Status.OFFLINE) {
    return "offline";
  } else if (status === Status.ONLINE) {
    return "online";
  } else if (status === Status.DELETED) {
    return "deleted";
  } else {
    return "error";
  }
}
let result = getResult(Status.OFFLINE);
console.log(result);

never： 永远不会执行完函数

function errorEmitter(): never {
  throw new Error();
}
function whileEmitter(): never {
  while (true) {}
}

数组：

const numberArr: number[] = [1, 2, 3];
const arr: (number | string)[] = [1, "2", "3"];
const objectArr: { name: string }[] = [{ name: "1" }, { name: "2" }];

元组：

const teacherInfo: [string, string, number] = ["yh", "nv", 10];
const teacherList: [string, number][] = [
  ["yh", 10],
  ["hy", 20]
];

type  alias 类型别名：

type User = { name: string; age: number };
const objArr: User[] = [
  { name: "1", age: 10 },
  { name: "2", age: 11 }
];
class Teacher {
  name: string;
  age: number;
}
const objArr1: Teacher[] = [
  new Teacher(),
  {
    name: "h",
    age: 10
  }
];

type  annotation 类型注解 我们来告诉ts变量类型

type  inference 类型推断 ts自动尝试分析变量类型

接口、类、继承

接口：

interface Person {
  //readonly name: string; //修饰符只读不能赋值
  name: string;
  age?: number; //加一个？表示可有可无
  [propName: string]: any; //可以传 名字为字符串 值为任何类型
  //say(): string;
}
const getName = (person: Person) => {
  console.log(person.name);
};
getName({ name: "yh" });
class Users implements Person {
  //在类里用接口
  name = "yh";
  // say() {
  //   return "hello";
  // }
}
interface Study extends Person {
  //接口继承
  // hight: string;
}

类继承：

class Persons {
  name: string = "yh";
  getName() {
    return this.name;
  }
}
//类继承 Teachers是子类  Persons是父类
class Teachers extends Persons {
  getTeacherName() {
    return "teacher";
  }
  getName() {
    //super.getName(); 调用父类方法
    return super.getName() + "覆盖父类getName方法";
  }
}
const person = new Persons();
console.log(person.getName()); //直接运行ts代码 ts-node type2.ts
const teacher = new Teachers();
console.log(teacher.getName());

访问类型： private允许在类内调用 protected允许在类内及继承的子类中使用 public允许在类的内外调用

 public name: string;
  //private name: string;
  //protected name:string;
  sayHi() {
    console.log("111");
  }
}

类构造器： constructor

class Person3 {
  // public name: string;
  // constructor(name: string) {
  //   this.name = name;
  // }
  constructor(public name: string) {}
}
const person3 = new Person3("yh");
console.log(person3.name);
class Teacher3 extends Person3 {
  constructor(age: number) {
    super("yh"); //子类用构造器需调用父类构造器
  }
}
const teacher3 = new Teacher3(28);

get  set：

class Person4 {
  constructor(private _name: string) {}
  get name() {
    return this._name;
  }
  set name(name: string) {
    this._name = name;
  }
}
const person4 = new Person4("yh");
console.log(person4.name);
person4.name = "yh"; //赋值

构建一个单例：

class Demo {
  private static instance: Demo;
  private constructor() {}
  static getInstance() {
    if (!this.instance) {
      this.instance = new Demo();
    }
    return this.instance;
  }
}
const demo1 = Demo.getInstance();

抽象类： 抽象方法 把公用的东西抽象出来

abstract class Geom {
  width: number;
  getType() {
    return "Geom";
  }
  abstract getArea(): number;
}
class Circle extends Geom {
  getArea() {
    return 123;
  }
}
class Square extends Geom {
  getArea() {
    return 456;
  }
}

抽象接口：

interface Person6 {
  name: string;
}
interface teacher6 extends Person6 {}
interface stydent extends Person6 {
  age: number;
}
const teacher6 = {
  name: "yh"
};
const stydent = {
  name: "hy",
  age: 18
};
const getUserInfo = (user: Person6) => {
  console.log(user.name);
};
getUserInfo(stydent);

联合类型+类型保护

联合类型：

interface Bird {
  fly: boolean;
  sing: () => {};
}
interface Dog {
  fly: boolean;
  bark: () => {};
}

类型保护：

//类型断言方式 as语法
function canDo(animal: Bird | Dog) {
  if (animal.fly) {
    (animal as Bird).sing();
  } else {
    (animal as Dog).bark();
  }
}
//in 语法
function cantDo(animal: Bird | Dog) {
  if ("sing" in animal) {
    animal.sing();
  } else {
    animal.bark();
  }
}
//typeof 语法
function add(first: string | number, second: string | number) {
  if (typeof first === "string" || typeof second === "string") {
    return `${first}${second}`;
  }
  return first + second;
}
//instanceof 语法  不能用interface
class NumberObj {
  count: number;
}
function addSecond(first: object | NumberObj, second: object | NumberObj) {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  } else {
    return 0;
  }
}

泛型

泛型是指—–generic 泛指的类型 调用时指定类型

function join<T>(first: T, second: T): T {
  return first;
}
join<string>("1", "123");

数组泛型 T[]

function map<T>(params: Array<T>) {
  return params;
}
map<string>(["123"]);

多个泛型

function add<T, P>(first: T, second: P) {
  return `${first}+${second}`;
}
add<number, string>(1, "11");

类中泛型

class DataManager<T> {
  constructor(private data: T[]) {}
  getItem(index: number): T {
      return this.data[index];
  }
}
const data = new DataManager<number>([1, 2]);
data.getItem(0);

泛型继承

interface Item {
  name: string;
}
class DataManager1<T extends Item> {
  constructor(private data: T[]) {}
  getItem(index: number): string {
    return this.data[index].name;
  }
}
const data1 = new DataManager1([{ name: "dd" }]);

使用泛型作为一个具体的类型注解

const funcs: <T>() => string = <T>() => {
  return "123";
};

function hello<T>(param: T) {
  return param;
}
const func: <T>(param: T) => T = hello;

泛型中使用keyof语法

interface Person {
  name: string;
  age: number;
}
class Teacher {
  constructor(private info: Person) {}
  //循环Person -> T的类型为string ->返回类型为T的类型
  getInfo<T extends keyof Person>(key: T): Person[T] {
    return this.info[key];
  }
}
const teacher = new Teacher({
  name: "dell",
  age: 18
});
const test = teacher.getInfo("name");
console.log(test);

namespace命名空间

在ts中初步的模块化思想就是namespace（命名空间）

//编译后只生成一个变量
namespace Home {
  class Header {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "Header";
      document.body.appendChild(elem);
    }
  }
  class Content {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "Content";
      document.body.appendChild(elem);
    }
  }
  //只暴露这一个类
  export class Page {
    constructor() {
      new Header();
      new Content();
    }
  }
  //定义接口
  export interface Uset{
    name:string
  }
  //定义子空间
  export namespace childHome Uset{
    export class Test{}
  }
}

两个ts文件中命名空间相互引用时，会使用依赖声明来标注

声明方式：///<reference path=’./components.ts’/>

.d.ts注解文件

ts里有一种独特的文件，以.d.ts结尾，这种文件叫做类型描述文件。注解文件通常使用declare关键字描述类型

这里以jquery为例，现在想在ts文件种使用jq的方法，如下：

//import $ from "jquery"; //es6引入jq模块包 这里的引用名字和注解文件里的名字要相同
$(function() {
  $("body").html("123");
  new $.fn.init();
});

这时需要创建一个jquery.d.ts文件帮助ts理解jq，分为两种情况，外部引入jq和Es6引入jq模块包

第一种   （外部引入jq.js文件）

函数重载：声明 -> $的类型是函数，接收函数，返回值是空

interface JqueryInstance {
  html: (html: string) => {};
}
declare function $(readyFunc: () => void): void;
declare function $(selector: string): JqueryInstance;
//对类和对象进行类型定义，命名空间嵌套
declare namespace $ {
  namespace fn {
    class init {}
  }
}

interface的方式实现函数重载

interface JQuery {
  (readyFunc: () => void): void;
  (selector: string): JqueryInstance;
}
declare var $: JQuery;

第二种（Es6引入jq模块包）

Es6模块化必须要添加注解  module后的名字和引用的名字一样

declare module "jquery" {
  interface JqueryInstance {
    html: (html: string) => {};
  }
  //混合类型
  function $(readyFunc: () => void): void;
  function $(selector: string): JqueryInstance;
  namespace $ {
    namespace fn {
      class init {}
    }
  }
  export = $;
}

奇奇怪怪的装饰器

学习准备：装饰器是实验性特性，未来可能会不是这种用法

现在想要使用需要在tsconfig.json文件中打开这两个注释，否则使用装饰器会报错

装饰器本身是一个函数 通过@符号使用

类的装饰器

接收的参数是类的构造函数    创建类后立即执行

多个装饰器执行时  从下到上执行

function testDecorator(constructor: any) {
  //在类上创建getName方法
  constructor.prototype.getName = () => {
    console.log("dell");
  };
}
function testDecorator1(constructor: any) {
  console.log("先执行");
}
//多个装饰器执行时 从下到上执行
@testDecorator
@testDecorator1
class Test {}
const test = new Test();
(test as any).getName();
//对装饰器进行 工厂函数包装
function testDecorator2(flag: boolean) {
  if (flag) {
    return function(constructor: any) {
      constructor.prototype.getName = () => {
        console.log("dell");
      };
    };
  } else {
    return function(constructor: any) {};
  }
}
@testDecorator2(true)
class Test2 {}
const test2 = new Test2();
//(test2 as any).getName();
//new (...args: any[])=> {} 这是一个构造函数 接收很多都是any类型的参数 返回很多any类型的值
function testDecorator3<T extends new (...args: any[]) => {}>(constructor: T) {
  //对类里的构造函数做扩展 会先执行原来的构造函数
  return class extends constructor {
    name = "lee";
    getName() {
      return this.name;
    }
  };
}
@testDecorator3
class Test3 {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
const test3 = new Test3("dell");
//工厂模式 ->识别装饰器中新增的类方法
function testDecorator4() {
  return function<T extends new (...args: any[]) => {}>(constructor: T) {
    //对类里的构造函数做扩展 会先执行原来的构造函数
    return class extends constructor {
      name = "lee";
      getName() {
        return this.name;
      }
    };
  };
}
const Test4 = testDecorator4()(
  class {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
  }
);
const test4 = new Test4("dell");
test4.getName();

方法装饰器

普通方法接收的参数：target对应类的prototype原型，key对应装饰函数的名字，descriptor设置方法的属性

静态方法接收的参数：target对应类的构造函数

function getNameDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {
  //此函数是否可以在外部再次修改
  descriptor.writable = false;
  //对方法的内容做变更
  descriptor.value = function() {
    return "Decorator";
  };
}
class Func {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  //普通方法
  @getNameDecorator
  getName() {
    return this.name;
  }
  //静态方法
  // @getNameDecorator
  // static getName1() {
  //   return 123;
  // }
}
const func = new Func("dell");
console.log(func.getName());

访问器装饰器

function visitDecorator(
  target: any,
  key: string,
  descriptor: PropertyDescriptor
) {}
class Visit {
  private _name: string;
  constructor(name: string) {
    this._name = name;
  }
  get name() {
    return this._name;
  }
  @visitDecorator
  set name(name: string) {
    this._name = name;
  }
}
const visit = new Visit("dell");
visit.name = "1233333";
console.log(visit.name);

属性装饰器

function nameDecorator(target: any, key: string): any {
  //target[key] = 'lee';  //这里修改的使原型上的属性，不是实例上的 获取方法->(names as any).__proto__.name
  //创建一个替换name的descriptor，使name不能在外部被修改
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}
class Name {
  @nameDecorator
  name = "Dell";
}
const names = new Name();
console.log(names.name);

参数装饰器

三个参数 target原型 method方法名 paramIndex参数的位置

function paramDecorator(target: any, method: string, paramIndex: number) {}
class Param {
  getInfo(name: string, @paramDecorator age: number) {
    console.log(name, age);
  }
}
const param = new Param();
param.getInfo("dell", 18);

一个装饰器的小例子

使用装饰器统一判断uesrInfo是否是 undefined

const uesrInfo: any = undefined;
function catchErroe(msg: string) {
  return function(target: any, key: string, descriptor: PropertyDescriptor) {
    const fn = descriptor.value;
    descriptor.value = function() {
      try {
        fn();
      } catch (e) {
        console.log(`${msg}有问题`);
      }
    };
  };
}
class GetInfo {
  @catchErroe("name")
  getNAme() {
    return uesrInfo.name;
  }
  @catchErroe("age")
  getAge() {
    return uesrInfo.age;
  }
}
const getInfo = new GetInfo();

花贝是只猫
关注
专栏目录
TypeScript基本类型的了解
Debug的博客
09-19 647
数据类型： number，string，boolean跟js类同 字面量 它就是值本身及值本身的类型 let a: 10 a = 10; a = 125; a = "123"; any表示任何类型，可以任意赋值 一个变量赋值为any后相当于对该变量关闭了ts的类型检测 在使用ts时候不到万不得已则不建议使用any let c: any c = 2 c = true c = "2" // 声明一个变量如果不给他赋值则相当于隐式的给当前变量赋值成了any let d; d = 2 d = "2" d =
typescript 中 [propName: string]的使用
淡淡的芦苇的博客
01-17 2802
其他没有使用的属性名 可以统一使用[propName: string]: number | string | boolean | Array<string>;定义类型 属性值的类型是把所有的类型都展示 interface DataState { id: number | string; createTime: number; commentUserAvatar: string; commentDeleted: boolean; commentUserNam
ts集成和使用
seimeii的博客
08-04 370
ts集成和使用
TS的相关知识
weixin_45678402的博客
08-05 1800
ts写法 interface Iprop { func1: () => string; // 函数返回一个string; func2: (a: string, b: number) => void; // 函数输入两个参数，没有返回值; str1: string; // str1参数必须是字符串;
ts项目实例_TS 一些工具泛型的使用及其实现(续一)
weixin_39711441的博客
12-06 548
TS 一些工具泛型的使用及其实现(续)之前写了一篇 TS 一些工具泛型的使用及其实现, 但是一直没怎么使用 TS，回首看文章，发现自己都看不懂了。 期间内 TS 也有一些变化，所以这一篇将会承接上篇文章，分析解读更多的工具泛型，主要来自 utility-types项目的源码。 阅读本流水账需要对 TS 中的以下东西有所了解extendskeyofininfer&|?-?+?neverunk...
TypeScript基础知识点
06-20
TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载...
typescript基础大全
02-02
### TypeScript基础大全 #### 1. **基本数据类型** TypeScript 扩展了 JavaScript 的基本数据类型，并且加入了一些新的类型。这些基本类型包括： - `string`：用于字符串。 - `number`：用于数值（JavaScript 中...
TypeScriptAcademind：TypeScript基础
02-12
**TypeScript基础知识详解** TypeScript是由Microsoft开发的一种强类型、静态类型的编程语言，它是JavaScript的超集，旨在提供更安全、可维护的代码，并且在编译时进行类型检查。TypeScript广泛应用于大型项目和...
TypeScript：TypeScript基础语法.docx
08-28
TypeScript：TypeScript基础语法.docx
TypeScript基础.docx
最新发布
10-24
TypeScript基础.docx
【TypeScript（一）】TypeScript的变量类型及声明
weixin_46116626的博客
04-27 2724
TypeScript的变量类型及声明
typescript 难点梳理
嘿嘿
11-03 2199
1.new关键字在类型中的使用 泛型 在泛型里使用类类型 在TypeScript使用泛型创建工厂函数时，需要引用构造函数的类类型。比如， function create<T>(c: {new(): T; }): T {//这边的new()不好理解 return new c(); } 一个更高级的例子，使用原型属性推断并约束构造函数与类实例的关系。 class ...
typescript获取属性名_TypeScript学习笔记之对象类型
weixin_32645173的博客
01-30 1383
在面向对象语言中，接口(Interfaces)、它是对行为的抽象，而具体如何行动需要由类(classes)去实现(implements)。在TypeScript中没有接口的概念，在编译成JavaScript的时候，所有的接口会被擦出掉，而TypeScript的核心之一就是类型检查。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约并让代码看起来更好理解。Typ...
TypeScript高级特性
sqLeiQ的博客
02-04 2105
Partial & Required ts中的定义 /** *Obtaintheparametersofafunctiontypeinatuple */ typeParameters<Textends(...args:any)=>any>=Textends(...args:inferP)=>any?P:never; /** *Obtainthereturntypeofafunction...
angular代码changes:{[propKey:string]:SimpleChange}解释
我的技术博客
02-28 2888
在解释标题中的那段代码之前我们得先了解 索引签名 这一概念,因为angular使用的是typescript语法, 索引签名 便是出现在ts接口中的东西 第一次接触”索引”这个概念是再学习数组的时候,比如a[10]或ageMap[“daniel”] interface StringArray { [index: number]: string; } let myArray: Str...
typescript赋值
马优晨
12-14 7390
TS支持像JS一样的对象赋值 原始对象赋值 let mayouchen = { name:'yoga', age:1000, eat:function(){ console.log(&quot;1234567890&quot;); } } console.log(mayouchen.eat()); //引用数据类型定义 array String Date RegExp 引用类型...
TypeScript-类继承-接口-泛型
渣渣飞的博客
08-31 5698
TypeScript-类继承-接口实现类继承的简单例子定义接口接口的继承接口的多继承实现多个接口泛型使用泛型函数多重泛型 实现类继承的简单例子 class Human{ static totalPeople = 0; constructor(protected name: string, private age: number){ Human.totalPeople...
学习篇-TypeScript-泛型
东东爱编码博客
05-31 433
文章目录一、TypeScript-泛型1. 泛型 【generics】2. 泛型的定义和使用3. 泛型约束4. 改进 一、TypeScript-泛型 1. 泛型 【generics】 什么是泛型 泛指的类型，是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。 应用场景： 一个方法或者一个组件需要支持多种数据的类型，用户可以根据自己传入的数据类型来使用该方法或者组件。 为什么不使用any类型？ any类型是接受任何类型的arg参数，传入值的类型和返
【java学习】String字符串
午后阳光
07-26 3634
i < len;i ++) {
typescript基础
07-22
以下是TypeScript的一些基础知识： 1. **静态类型**：TypeScript引入了强制类型的机制，你需要为变量、函数参数和返回值指定具体的类型。这有助于早期发现类型错误。 2. **接口（Interfaces）**：类似于Java的接口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花贝是只猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值