首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Typescript笔记

Typescript笔记

原创
作者头像
踏浪
修改于 2020-11-06 02:13:27
修改于 2020-11-06 02:13:27
60200
代码可运行
举报
文章被收录于专栏:踏浪的文章踏浪的文章
运行总次数:0
代码可运行

官方学习文档

Handbook - The TypeScript Handbook

基础类型:声明变量

布尔类型

布尔也就两种, true 或者 false

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let isBoolean: boolean = false;

function tell() {
  alert(isBoolean)
}

tell()

number

数值类型有很不止 numberbigint也是。同时值的话可以是十进制,二进制,还可以是NaN。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let num: number = 10;
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
let nan: number = NaN;

function tell() {
  num--;
  console.log(num)
}

tell()

string

字符串,可以是普通字符串,还可以是模板字符串

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

array

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let arr:number[] = [1, 2, 3];
// 等同于
let arr:Array<number> = [1, 2, 3];

Tuple 元组

元组看成是数组的升级版,可以定义数组里面的每一项的数据类型,在赋值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let x: [string, number];
x = ['踏浪', 18]; // OK

x = [18, '踏浪']; // Error

要求每一项的数据类型都和定义的类型一致,否则就会报错

同时,也不能在 x 中添加第三项,因为没有定义

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Tuple type '[string, number]' of length '2' has no element at index '3'.

7 x[3] = 100;

枚举 Enum

枚举类型将值限定在一定的范围内,比如一周只有7天,一年只有12个月

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
enum Color {Red, Green, Yellow, Blue};
enum Color2 {Red = 10, Green, Yellow = 30, Blue = 20};

let colorName: string = Color[1]; // 类似数组获取下标
let color2Name: string = Color2[11]; // 自定义下标顺序

function tell() {
  console.log(colorName); // Green
  console.log(color2Name); // Green
  console.log(Color2[30]); // Yellow 没有固定顺序的定义
  console.log(Color2[20]); // Blue 没有固定顺序的定义
}

tell();

Any 任意类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let a: any = 10;

a = "踏浪";

a = true;

a = function() {};

a = [1, 2, 3]

定义 any 类型后,就有点像是普通的js了,可以任意修改值类型

void 函数返回值声明,函数不需要任何返回值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function tell(): number {
  return 18;
}

function say(): string {
  return '踏浪'
}

function other(): void {
  return 100; //Error, Type 'number' is not assignable to type 'void'.
}

使用了 void 就不要有返回值了

Null 和 undefined

唯一的 nullundefined

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let u: undefined = undefined;
let n: null = null;

Object 对象

Object是代表非基本类型的类型,即不是数字,字符串,布尔值,bigint,symbol,null或者undefined的任何类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
declare function create(o: object): void;

create({name: '踏浪'});
create([1, 2, 3]);
create(10); // Argument of type 'number' is not assignable to parameter of type 'object'.

除了上述的这些类型,基本类型还有 Unknown Never 等,这些可以去上面提到的官网查看。

函数

在TS中函数也有具名函数与匿名函数之分,只是相对TS中,函数的参数以及返回值都可以指定参数类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function add(x: number, y: number): number {
	return x + y;
}

上面的代码参数与函数返回值的类型都是 number

如果是匿名函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let sayName = function(x: string, y: number): string {
	return `我是${x}, ${y}`;
}

上面的函数如果不看返回值,要想知道 xy 的意义是很难的,所以,针对于匿名函数,还有一种方式,可以指定参数的具体的意义

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let sayName: (name: string, age: number) => string = function(x: string, y: number): string {
	return `我是${x}, ${y}`;
}

前面的 (name: string, age: number) 指的就是函数的参数意义, x 表示 namey 表示 age ,后面的 =>string 则是指定函数的返回值为 string 类型的。

虽然

可选参数与默认参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function sayName(firstName: string, lastName: string): string {
	return `${firstName} ${lastName}`
}
sayName('踏', '浪');

上面的函数接收两个参数,在TS中如果多传递或者少传递参数编译都不会通过,必须传递两个。但是如果我只传递一个参数呢?TS中有一个可选参数,用 ?: 表示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function sayName(firstName: string, lastName?: string): string {
	return lastName ? `${firstName} ${lastName}` : firstName
}

sayName('踏', '浪');

sayName('踏');

还可以设置默认值,有点像是JS中的默认值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function sayName(firstName: string, lastName = "浪"): string {
	return lastName ? `${firstName} ${lastName}` : firstName
}

sayName('踏'); // 踏 浪
sayName('踏', '❄️'); // 踏 ❄️

剩余参数

与JS中的 ... 一样,只是可以指定类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

类 classes

基本写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  say() {
    return `${this.name}: ${this.age}`;
  }
}

let person = new Person();

上面的代码会有错误 error TS2554: Expected 2 arguments, but got 0.

因为上面我们使用了 constructor ,所以在创建实例的时候必须传递两个参数才可以。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let person = new Person('踏浪', 18);

注意参数类型需要与你的类的 constructor 参数的类型相同。

类的继承

继承是用 extends 关键字

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  say() {
    return `${this.name}: ${this.age}`;
  }
}

class Student extends Person {
  school: string;
  constructor(school: string) {
    this.school = school;
  }
  tell() {
    return `${this.say()} ${this.school}`
  }
}

let person = new Person('踏浪', 18);

上面的 Student 类就是继承于父类 Person 的。但是如果你使用带有提示的编辑器,就会发现有错。错误如下:

错误中提示我们必须要有一个 super 。那么super接收什么参数呢。接收父类 constructor 需要的参数,这一点与ES6中的class继承一节的内容相似。可以看看

ES6 入门教程

如果子类不调用super方法,就无法得到this对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
...
constructor(school: string) {
  super('踏浪', 18);
  this.school = school;
}
...

这样就行了。

super 如果是在子类的 constructor 中调用,那么相当于是调用父类的 constructor 方法。如果是在其他非constructor 的地方,就表示一个指向父级的对象,相当于 this 。比如上面代码中的 this.say() 就可以写成 super.say()

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
tell() {
  return `${super.say()} ${this.school}`
}

访问修饰符

访问修饰符有两个 public(默认)private

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Person {
  public name: string;
  private age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  private say() {
    return `${this.name}: ${this.age}`;
  }
}

class Student extends Person {
  school: string;
  constructor(school: string) {
    super('踏浪', 18);
    this.school = school;
  }
  tell() {
    return `${super.say()} ${this.school}`
  }
}

let person = new Person('踏浪', 18);
let student = new Student('北大');
console.log(student.tell());

上面的代码编译会出错。我们在父类的 name agesay 属性与方法前面添加了访问修饰符,子类调用 super.say() 方法出错 Property 'say' is private and only accessible within class 'Person'.

所以,属性或者方法前面添加private 后子类无法访问,不影响父类自己使用,如果父类 say 方法中的 this.age

通过 getter setter 访问,修改私有属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Hello {
  private _name: string;
  say() {
    return `I am ${this._name}`;
  }
  get name() {
    return this._name;
  }
  set name(newName: string) {
    this._name = newName;
  }
}

let hello = new Hello();
hello.name = "踏浪";
console.log(hello.say())

静态属性 static

static 也是添加在属性或者方法前面的,如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Hello {
  static name: string = "踏浪";
  say() {
    return `I am ${this.name}`;
  }
}

上面一段代码会出错

name 是静态成员,不同通过 [this.name](<http://this.name>) 访问,需要使用类调用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Hello {
  static name: string = "踏浪";
  say() {
    return `I am ${Hello.name}`;
  }
}

接口 Interface

先来看一段代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function sayPersonName(person: {name: string}) {
  console.log(person.name);
}

let person = { name: '踏浪', age: 18 };
sayPersonName(person);

上面代码中 sayPersonName 的参数接收一个对象,对象的 name 属性是 string 类型的。这只是一个简单的例子,但是如果对象有很多的属性,每个属性都有各自的类型指定。那么按照上面的写法写出来的代码看着就不舒服,所以,有了接口的概念。

使用 interface 关键字来定义一个接口

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface person {
  name: string;
  age: number;
  ID: number;
}

function sayPersonName(person: person) {
  console.log(`I am ${person.name}, ${person.age} years old, ID is ${person.ID}`);
}

let person = {
  name: 'Talang',
  age: 18,
  ID: 10000
};

sayPersonName(person);

上面就是使用接口的例子,例子中有多个 person ,希望你能明报每个 person 所代表的含义。

第一个 interfaceperson 是定义的一个 person 接口,指定一个对象以及对象每个属性的类型。

第二个是 sayPersonName 中的两个 person ,第一个是指函数接收的形式参数,第二个是形式参数的类型,就是上面使用 interface 定义个接口类型。

第三个是 let 声明的 person 变量。

第四个是函数sayPersonName 调用传递的 let 定义的这个对象。

这就是接口的最基本的使用。定义的接口的属性,在传递参数的时候需要全部都要确定。如果你试过声明 person 的时候不传递某个属性,就会出错。那么有什么方法改善呢。这就需要用到可选属性了。

可选属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface person {
  name: string;
  age: number;
  ID: number;
}

function sayPersonName(person: person) {
  console.log(`I am ${person.name}, ${person.age} years old`);
}

let person = {
  name: 'Talang',
  age: 18,
  // ID: 10000
};

sayPersonName(person);

上面的代码编译的时候会出错 Property 'ID' is missing in type '{ name: string; age: number; }' but required in type 'person'.

前面讲函数参数的时候涉及到可选参数,使用 ?: 的形式表示的,其实,这里也是一样的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface person {
  name: string;
  age: number;
  ID?: number;
}
...

这样定义就不会出错了

函数接口的定义

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface SearchFunction {
  (keyword: string, page: number): string;
}

let mySearch: SearchFunction = function(keyword: string, page: number) {
  return page > 10 ? keyword : 'false';
}

(keyword: string, page: number): string; 就是定义的函数的类型,参数以及返回值。

数组类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface stringArray {
  [index: number]: string
}

let arr: stringArray = ['10', '10'];

数组的每一项都要是 string 类型的。

类的接口

声明类的时候要使用定义的接口需要使用 implements 关键字,声明的类中的属性需要有接口中的参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface ClockInterface {
  currentTime: Date;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
  constructor(h: number, m: number) {}
}

接口混合,继承

接口也是可以继承的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface Color {
  color: string;
}

interface Shape {
  shape: string;
}

interface Pos {
  x: number;
  y: number;
}

interface Box extends Color, Shape { // 继承多个使用 , 隔开
  position: Pos;
  size: number;
}

let position: Pos = {
  x: 100,
  y: 100
}
let box: Box;
box = {
  color: "red",
  shape: "circle",
  position: position,
  size: 100
};

泛型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Hello(num: number): number {
  return num;
}

上面定义了一个函数 Hello 。参数与返回值都是 number 。但是如果我要修改为 string 或者其他类型。那就需要重新写一个函数。

你或许认为可以使用 any 类型,但是如果使用 any 那么就失去了类型规范与校验的功能。所以这时候就需要用到泛型了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Hello<T>(arg: T):T {
  return arg;
}

泛型的写法 <T> 中间的大写字母为 T 是约定俗成的。

上面的函数在声明的时候使用了泛型,在使用的时候在指定具体的类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let output = Hello<string>('踏浪');

<> 中的类型与参数的类型需要一致,因为声明的函数类型是一样的。当然,在定义函数的时候,参数、返回值也可以是其他的类型。

泛型类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Hello<T>(arg: T):T {
  return arg;
}

let myHello: <T>(arg: T) => T = Hello;
console.log(myHello<string>("Hello"));

let myHello2: {<T>(arg: T):T} = Hello;
console.log(myHello2<string>("Hello2"));

let myHello3 = Hello;
console.log(myHello3(10))

上面三种写法都可以,但是前两种会对新的函数做出类型检查,但是第三个函数确实不会的,直接传递也能编译成功,只是相当于执行了Hello函数而不做类型检查。

上面的前两个声明,我们可以定义一个接口

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface Hello<T> {
  (arg: T): T;
}

或者这样写也是可以的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface Hello {
  <T>(arg: T): T;
}

泛型类

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Hello<T> {
  name: T;
  say: (name: T) => T;
  constructor(name: T, say: (name: T) => T) {
    this.name = name;
    this.say = say;
  }
}

let hello = new Hello<string>("踏浪", () => "hello");

Modules

TS中的模块与ES6中的模块差不多,可以看

Handbook - Modules

ES6 入门教程

需要关注的一点就是在TS中的通配符声明

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
declare module '*.gif' {
  const content: any
  export default content
}

declare module '*.png' {
  const content: any
  export default content
}

declare module '*.svg' {
  const content: any
  export default content
}

declare module '*.ttf' {
  const content: any
  export default content
}

这种声明允许在 TS 中 import 非 JavaScript 文件。

namespace

命名空间就像是声明一个对象,对象中还有其他属性,可以通过 . 操作符获取属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
declare namespace Person {
  export interface Name {
    name: string;
  }

  export interface Age {
    age: number;
  }

  export class Color {
    color: string;
  }

  interface Address {
    address: string;
  }

  interface Id {
    id: number;
  }
}

使用的话可以直接 [Person.Name](<http://person.Name>) 来使用。在项目中,放在 .d.ts 文件中默认全局。如果没有使用 declare 关键字,需要手动 export

装饰器

装饰器就是在不调用函数的情况下执行函数。装饰器只能装饰类以及类的方法,属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function hello() {
  console.log('hello');
}

@hello
class Hello {}

上面的 @hello 就是一个装饰器,放在 class Hello 上面,是对 Hello 类的装饰。你还可以对属性,方法进行装饰,只需要放在那一行的上面即可。如果是一行,放在这一行的前面即可。

类的装饰

类的装饰,装饰器只能接收一个参数,参数指向这个类

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

上面的装饰器为 MyTestableClass 类添加了一个静态属性 isTestable ,且值固定为 true 。那我可以手动的传递参数么?可以的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@testable(true)
class MyTestableClass {
  // ...
}

function testable(isTestable) {
  return function (target) {
    target.isTestable = isTestable
  };
}

MyTestableClass.isTestable // true

方法的装饰

方法的装饰接收三个参数。装饰器第一个参数是类的原型对象,第二个参数是所要装饰的属性名,第三个参数是该属性的描述对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

function readonly(target, propertyKey, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);

访问器装饰

对于类的 gettersetter 也是可以进行装饰的,使用方法与类的方法的装饰一样

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Point {
  private _x: number;
  private _y: number;
  constructor(x: number, y: number) {
    this._x = x;
    this._y = y;
  }

  @configurable(false)
  get x() {
    return this._x;
  }

  @configurable(false)
  get y() {
    return this._y;
  }
}

function configurable(value: boolean) {
  return function (
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    descriptor.configurable = value;
  };
}

属性的装饰

属性的装饰一般很少用到。可以看看

Handbook - Decorators

ES6中也有装饰器的概念

ES6 入门教程

Mixins

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// Disposable Mixin
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }

}

// Activatable Mixin
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}

// 因为用implements,需要在子类里实现所有接口定义。非常繁琐
class SmartObject implements Disposable, Activatable {
    constructor() {
        setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    }

    interact() {
        this.activate();
    }

    // Disposable
    isDisposed: boolean = false;
    dispose: () => void;
    // Activatable
    isActive: boolean = false;
    activate: () => void;
    deactivate: () => void;
}
applyMixins(SmartObject, [Disposable, Activatable]);

let smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000);

////////////////////////////////////////
// In your runtime library somewhere
////////////////////////////////////////

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

关键点在于 implementsSmartObject 中的部分属性只是占位没有具体实现,而是通过 Mixins 而混合而成。相当于一直继承的简写。

以上就是关于TS中常用到的,部分例子来自于官网,这里只是学习总结,以加深印象,方便查阅。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
【初学者笔记】🐯年要掌握 Typescript
JavaScript 是弱类型语言, 很多错误只有在运行时才会被发现,而 TypeScript 提供了一套静态检测机制, 可以帮助我们在编译时就发现错误。
一尾流莺
2022/12/10
1.4K0
【初学者笔记】🐯年要掌握 Typescript
【Vue3+TypeScript】CRM系统项目搭建之 — 关于拥抱 TypeScript 这件事【上】
string 、 number 、 boolean 、 null 、 undefined 、 bigint 、 symbol 、 object
HelloWorldZ
2024/03/20
2590
【Vue3+TypeScript】CRM系统项目搭建之 — 关于拥抱 TypeScript 这件事【上】
【TypeScript】TS进阶-装饰器(十一)
装饰器(Decorator)是一种特殊类型的声明,它能够被附加到类声明、方法、属性或参数上,装饰器的本身。其本身是一个函数,会在运行的时候被调用,被装饰的声明信息会作为参数传递给装饰器函数,当作形参。装饰器本质上主要是在操作原型对象,通过给原型对象 prototype添加一些方法和属性,来扩展类的功能。 装饰器主要分为类装饰器(接收1个参数)、属性装饰器(接收2个参数)、方法装饰器(接收3个参数、参数装饰器(接收3个参数),不同装饰器接收参数也不一同。另外TS内置了装饰器类型,我们直接用就好了。
can4hou6joeng4
2023/11/28
1.4K0
ES6新特性以及一些规范
` class goodStudent extends Student { sayAge() { console.log(this.age) } } let goodStu = new goodStudent("CJG", 20, "SYSU); goodStu.sayAge() // 20 6.3方法可以通过返回this来实现方法链式调用 class Person { setName(name) { this.name = name; return this; } sayName() { console.log(this.name); return this } } 这样,我们就可以直接链式调用它的方法了 let p = new Person() b.setName("cjg").sayName().setName("zht").sayName() 6.4使用class的时候,如果你没有声明构造函数的话,它会自己提供默认的构造函数,如果你不需要在构造函数做额外的事情(例如给某个变量赋值等),就没必要主动声明构造函数 //bad,没有必要,这是系统默认的 class goodStudent extends Student { constructor(...args) { super(...args); } } //good 如果需要在构造函数做额外的工作,则主动声明构造函数 class goodStudent extends Student { constructor(...args) { super(...args); this.age = 22; } }
嘿嘿嘿
2018/09/10
4490
TypeScript笔记
安装TypeScript到全局 npm i typescript -g 编译TypeScript tsc main.ts 监听文件变化自动编译 tsc -w main.ts 布尔类型 let a: boolean = true; let b: boolean = false; 数字类型 let a: number = 1; 字符串类型 let a: string = "Hello World"; Any 相当于原生Javascript的定义,不限制类型。 let a: any = 1; let b: any
幻影龙王
2021/09/12
3010
设计模式(11)[JS版]-JavaScript中的注解之装饰器模式
装饰器模式模式动态地扩展了(装饰)一个对象的行为,同时又不改变其结构。在运行时添加新的行为的能力是由一个装饰器对象来完成的,它 "包裹 "了原始对象,用来提供额外的功能。多个装饰器可以添加或覆盖原始对象的功能。装饰器模式属于结构型模式。和适配器模式不同的是,适配器模式是原有的对象不能用了,而装饰器模式是原来的对象还能用,在不改变原有对象结构和功能的前提下,为对象添加新功能。
AlbertYang
2020/09/08
9170
设计模式(11)[JS版]-JavaScript中的注解之装饰器模式
TypeScript入门
JavaScript 中可以用 Number 表示的最大整数为 2^53 - 1,可以写为 Number.MAX_SAFE_INTEGER。如果超过了这个界限,可以用 BigInt来表示,它可以表示任意大的整数。
江拥羡橙
2024/10/06
1060
TypeScript入门
走近Ts,用了爽,用后一直爽
前言 vue3已经发布了,ts的脚步已经阻拦不住了,还只会es6?别想了,人家都已经在行动了,以下是ts的基本系列教程,ts的基本语法,高级语法等,以及在vue项目中如何应用ts,跟着我赶紧撸起来吧。
winty
2021/01/22
1.3K0
TS 从 0 到 1 - TypeScript 中的各种符号
! 后缀表达式可以用于断言操作对象是非 null 和非 undefined 类型。即 x!,将从 x 值域中排除 null 和 undefined。
Cellinlab
2023/05/17
1.7K0
typeScript的基础认识
世间万物皆对象
2024/03/20
1450
TypeScript学习第六篇 - 接口的定义
在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到了一种限制和规范的作用,接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供方法的这些类就可以满足实际需要。
越陌度阡
2020/11/26
6810
TypeScript装饰器
TypeScript从入门到实践专栏是博主在学习和工作过程中的总结,实用性非常强,内容会不断进行精进,欢迎订阅哦,学会TS不迷路。
不叫猫先生
2023/11/15
2760
TypeScript装饰器
typescript笔记2 函数 类 接口
es5中方法实参和形参可以不一样,但是ts中必须一样,如需不一样可配置为可选参数 注:可选参数必须配置在最后面
路过君
2022/04/13
1.1K1
如何用 Decorator 装饰你的 Typescript?
正在着手写 THE LAST TIME 系列的 Typescript 篇,而Decorator 一直是我个人看来一个非常不错的切面方案。所谓的切面方案就是我们常说的切面编程 AOP。一种编程思想,简单直白的解释就是,一种在运行时,动态的将代码切入到类的指定方法、指定位置上的编程思想就是 AOP。AOP 和我们熟悉的 OOP 一样,只是一个编程范式,AOP 没有说什么规定要使用什么代码协议,必须要用什么方式去实现,这只是一个范式。而 Decorator 也就是AOP 的一种形式。
Nealyang
2019/12/30
1.2K0
Typescript
function test<T extends TIF>(params: T) {
愤怒的小鸟
2020/12/03
5330
一起重学TypeScript
class 类名<T> { name!: T; hobby!: T; } # 这样这个类的所有类型为 number let 实例 = new 类名<number>();
程序员海军
2021/10/10
2.1K0
一起重学TypeScript
Typescript学习笔记,从入门到精通,持续记录
TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等。
房东的狗丶
2023/02/17
2.1K0
02. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-----------(中篇)
TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口(Interfaces)来定义对象的类型。 接口是对象的状态(属性)和行为(方法)的抽象(描述)
全栈若城
2024/03/10
2080
02. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-----------(中篇)
TypeScript基础总结
编辑器首选MS自家开发的VS Code (推荐)。当然,Webstorm在2016年2月推出的版本内置了TS编译器,atom 需要安装 atom-typescript包,sublime需要安装Typescript-sublime-plugin。
腾讯IVWEB团队
2020/06/24
1.1K0
TypeScript基础知识
在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范。 在程序设计里面,接口起到了一种限制和规范的作用。 接口定义了某一批类所需遵守的规范,接口不必关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类必须提供某些方法,提供这些方法的类就可以满足实际需要。ts中的接口类似java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。
Clearlove
2021/03/04
7710
相关推荐
【初学者笔记】🐯年要掌握 Typescript
更多 >
LV.1
这个人很懒,什么都没有留下~
目录
  • 基础类型:声明变量
    • 布尔类型
    • number
    • string
    • array
    • Tuple 元组
    • 枚举 Enum
    • Any 任意类型
    • void 函数返回值声明,函数不需要任何返回值
    • Null 和 undefined
    • Object 对象
  • 函数
    • 可选参数与默认参数
    • 剩余参数
  • 类 classes
    • 类的继承
    • 访问修饰符
    • 通过 getter setter 访问,修改私有属性
    • 静态属性 static
  • 接口 Interface
    • 可选属性
    • 函数接口的定义
    • 数组类型
    • 类的接口
    • 接口混合,继承
  • 泛型
    • 泛型类型
    • 泛型类
  • Modules
  • namespace
  • 装饰器
    • 类的装饰
    • 方法的装饰
    • 访问器装饰
    • 属性的装饰
  • Mixins
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档