typescript学习2.0

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量95 收藏
点赞数
文章标签： typescript javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dimples_320/article/details/120218108
版权

函数

  • 函数的关键点：参数、返回值、函数的作用、函数在什么地方调用

  • es5 定义的函数

function fn() {}

const fn1 = function() {}
  • ts 定义的函数
function fn():void {}

const fn1 = function():void {}
  • 函数传参

function fn(name:string, age:number):string {
  // console.log('我是 void ');
  return `${name}-${age}`;
}

// console.log('我是 void ');
// const fn1 = function(name, age):void {}

console.log(fn('刘建行', 18));
  • 可传参数（age?:number）
function fn(name:string, age?:number):string {
  // console.log('我是 void ');
  return `${name}-${age}`;
}

// console.log('我是 void ');
// const fn1 = function(name, age):void {}

console.log(fn('李四'));
  • 默认参数
// age = 18
function fn(name:string, age:number = 18, ...reset:any):string {
  console.log(reset);
  // console.log('我是 void ');
  return `${name}-${age}`;
}

// console.log('我是 void ');
// const fn1 = function(name, age):void {}

console.log(fn('李四'));
// console.log(fn('李四', 18, [1, 2, 3]));
  • 剩余参数
// reset
function fn(name:string, ...reset:any):string {
  console.log(reset);
  // console.log('我是 void ');
  return `${name}-${reset}`;
}

// console.log('我是 void ');
// const fn1 = function(name, age):void {}

// console.log(fn('李四'));
console.log(fn('李四', 18, [1, 2, 3]));
  • 重载
  • JavaScript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的。

function fn(msg: number): number;
function fn(msg: string): string;
function fn(msg: boolean): boolean;
function fn(msg: any): any { // 具体的执行函数，
  if(typeof msg == 'string') {
    return msg.split('').reverse().join('');
  } else if(typeof msg == 'number') {
    return Number(String(msg).split('').reverse().join(''));
  } else {
    return '错误';
  }
}

// 注意，function pickCard(x): any并不是重载列表的一部分，因此这里只有两个重载：一个是接收对象另一个接收数字。 以其它参数调用 pickCard会产生错误。
console.log(fn(123));
console.log(fn('abc'));

类

  • 继承

    • 组合继承 对象冒充+原型链
      • 对象冒充，只能继承构造函数里面的属性和方法。不能够继承到原型上的。
        // 类的三大特性： 封装 继承 多态
  // 在 es5 中函数首字母大写，我们称之为这是一个构造函数
  function Person() {
    this.name = '张三';
    this.age = 18;

    this.say = function() {
      console.log(this.name + '说');
    }
  }

  // 原型
  Person.prototype.eat = function() {
    console.log('我的名字是' + this.name);
  }

  // call改变 this 指向 bind, apply
  // 这三个什么区别
  // bind 默认执行
  // call（this, c1, c2, c3）， apply(this, [c1, c2, c3]) 他们两个进行传参方式不一样
  // 子类
  function Son() {
    // 使用 call 进行继承
    Person.call(this); // 对象冒充
  }

  // 实例话一个子类
  const s = new Son();
  s.say(); // 张三说
  s.eat();  // eat is a function
    • 原型继承
      // 类的三大特性： 封装 继承 多态
  // 在 es5 中函数首字母大写，我们称之为这是一个构造函数
  function Person() {
    this.name = '张三';
    this.age = 18;

    this.say = function() {
      console.log(this.name + '说');
    }
  }

  // 原型
  Person.prototype.eat = function() {
    console.log('我的名字是' + this.name);
  }

  // call改变 this 指向 bind, apply
  // 这三个什么区别
  // bind 默认执行
  // call（this, c1, c2, c3）， apply(this, [c1, c2, c3]) 他们两个进行传参方式不一样
  // 子类
  function Son() {
    // 使用 call 进行继承
    Person.call(this); // 对象冒充
  }

  // 原型继承
  Son.prototype = new Person();

  // 实例话一个子类
  const s = new Son();
  s.say(); // 张三说
  s.eat();  // 我的名字是张三

  • 静态属性和方法

    • 静态方法，在构造函数后面直接添加，调用的时候，构造函数可以直接调用。
      // 类的三大特性： 封装 继承 多态
  // 在 es5 中函数首字母大写，我们称之为这是一个构造函数
  function Person() {
    this.name = '张三';
    this.age = 18;

    this.say = function() {
      console.log(this.name + '说');
    }
  }

  // 原型
  Person.prototype.eat = function() {
    console.log('我的名字是' + this.name);
  }

  // call改变 this 指向 bind, apply
  // 这三个什么区别
  // bind 默认执行
  // call（this, c1, c2, c3）， apply(this, [c1, c2, c3]) 他们两个进行传参方式不一样
  // 子类
  function Son() {
    // 使用 call 进行继承
    Person.call(this); // 对象冒充
  }

  // 原型继承
  Son.prototype = new Person();

  // 实例话一个子类
  const s = new Son();
  s.say();
  s.eat(); 


  // 添加静态属性
  s.sex = '男';
  s.staticFn = function() {
    console.log('我是静态方法');
  }

  // 调用静态属性和方法
  console.log(s.sex);
  s.staticFn();

  • es6的创建方式

    • es6类的继承方式
      class Person{
    constructor(name, age) {
      // super(name, age); // 继承

      this.name = name;
      this.age = age;
    }

    say() {
      console.log(this.name+ '说');
    }
    eat() {
      console.log('我的名字是' + this.name);
    }
  }

  // const p = new Person();
  // p.say();
  // p.eat();


  // es6 的类如何实现继承
  class Son extends Person{
    constructor(name, age) {
      super(name, age);
    }
  }

  const s = new Son('张三', 18);
  s.say();
  s.eat();
    • ts 中类的继承和属性及方法的定义
      // es6 定义 类 的方式
  class Person{
    // name: string == this.name = name;
    name: string;
    age: number;
    constructor(name: string, age: number) {
      // super(name, age); // 继承

      // = 赋值曹植
      this.name = name;
      this.age = age;
    }

    say(): void {
      console.log(this.name+ '说');
    }
    eat(): void {
      console.log('我的名字是' + this.name);
    }
  }

  // const p = new Person();
  // p.say();
  // p.eat();


  // es6 的类如何实现继承
  class Son extends Person{
    constructor(name: string, age: number) {
      super(name, age);
    }
  }

  const s = new Son('张三', 18);
  s.say();
  s.eat();

类

  • 类的 4 大修饰符
  • public(公共的) private（私有的） protected (protected成员在派生类中仍然可以访问) readonly（只读的）static（静态属性）
  • public(公共的)（在TypeScript里，成员都默认为 public。）

  public say():void {
    console.log(this.name + '说');
  }
  • private（私有的）(当成员被标记成 private时，它就不能在声明它的类的外部访问。)

  private eat(): void {
    console.log(this.name + '吃');
  }
  • protected(protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问。例)

  protected go(): void {
    console.log(this.name + '走开了');
  }
  • readonly（只读的）（你可以使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。）

  readonly name: string;
  • static（静态属性）(到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。 我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。)
  class Grid {
      static origin = {x: 0, y: 0};
      calculateDistanceFromOrigin(point: {x: number; y: number;}) {
          // ...好多代码
      }
      constructor (public scale: number) { }
  }

  let grid1 = new Grid(1.0);  // 1x scale
  let grid2 = new Grid(5.0);  // 5x scale

  // 静态属性的调用
  console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
  console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));
Dimples_320
关注
移植到AngularJS2.0（测试版）的AngularHealth应用程序-TypeScript-HTML-下载
01-09
**AngularJS 2.0（测试版）与AngularHealth应用程序移植** AngularJS 2.0是Google...在理解这些基础知识后，开发者可以深入学习如何在AngularJS 2.0环境中创建组件、服务和路由，从而进一步提升开发效率和应用质量。
一个非常简单的为Vue20和TypeScript20准备的项目开发环境
08-12
本项目"一个非常简单的为Vue2.0和TypeScript2.0准备的项目开发环境"旨在提供一个快速启动新项目的基础架构，帮助开发者省去搭建环境的繁琐步骤。以下将详细介绍这个项目中的关键知识点： 1. **Vue CLI**：Vue CLI是...
TS中的type和interface
iSmilee的博客
01-04 631
TS中的type和interface
Typescript学习笔记（2.0）
mez_Blog的博客
07-24 504
接口可以再定义类的时候去限制类的结构,接口中的所有属性都不能有实际的值，所以说，接口只考虑对象的接口，而不考虑其值，在接口中所有的方法都是抽象方法。接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当做类型声明去使用。interface和abstract是TS中独有的，在编译后就看不到了。参数-w，就是对app.ts进行监视，每次该文件改变时就会自动编译。console.log('大家好~~')定义类时，可以使类去实现一个接口。注意：接口是可以重复声明的。
Vue2.0+TypeScript基础用法
fanlc8888的博客
09-09 3732
由于后期项目要使用ts，所以先学习下，这是第一次使用ts，要是有不足之处，还请多指教。 最开始因为webpack版本问题搭了好几次没成功，果然失败乃成功之母，古人诚不欺我，每次学习都是在写bug解决bug继续创造bug的循环里痛并快乐着。 由于使用的是Vue-cli2 + webpack3.6.0版本，按照webpack3的方式来搭建的，所以安装时一定要注意自己的版本与插件版本哈。 前边儿初...
TypeScript学习笔记
一条吃软饭的软狗
03-17 400
简介 TypeScript 是 JavaScript 的一个超集，主要提供了 类型系统 和对 ES6 的支持，由 Microsoft 开发。 应用：vue3.0，angular2.0，vscode... 编译型语言：编译为 js 后运行，单独无法运行 强类型语言 面向对象的语言 语言特性 TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括： 类型...
typescript学习(二)
weixin_45953482的博客
08-07 434
这里记录下Typescript第二部分的学习,重点注意下接口以及函数’
TypeScript 学习笔记
呆呆狗
01-27 1015
7、Typescript 官方文档 Atwood定律 Stack Overflow 的创立者之一 Jeff Atwood 在 2007年提出了著名的 Atwood 定律 any application that can be written in JavaScript , will eventually be written in JavaScript. 任何可以使用JavaScript来实现的应用都最终会使用 JavaScript 实现 web端 移动端 RN uni 小程序端 桌面端 elect
杂谈：TypeScript 2.0
夏天的树人的专栏
10-13 908
官方站点 http://www.typescriptlang.org/新特性 https://zhuanlan.zhihu.com/p/21629069新版vscode https://code.visualstudio.com/updates#_switch-between-running-windowsgithub typescript 的库 https://github.com/Mic
typescript 学习笔记
qq_34416331的博客
01-22 226
一、基础类型 1.1 布尔类型 let isTest: boolean = false; 1.2 string let text: string = 'this is a text'; // 模板字符串 `` let str = 'about template string!'; let templateText: string = `this is a text ${str}`; ...
TypeScript 2.0 已发布
weixin_34130269的博客
07-03 68
微软最近发布了TypeScript 2.0，该版本提供了简化的声明文件获取、Non-nullable类型，以及Readonly修饰符。 TypeScript项目经理Daniel Rosenwasser称，他们团队对于该版本“紧随ECMAScript规范，为JavaScript库和工具提供了更广泛的支持，并通过一个语言服务在各大编辑器中提供了一流的编辑体验...
TypeScript 2.0 RC版本发布
Joy0921的博客
09-01 180
原文：TypeScript 2.0 RC 作者：Daniel Rosenwasser 翻译：王嘉怡 责编：仲培艺 TypeScript是微软开发的一门开源的、应用程序级的JavaScript语言。它是JavaScript的超集，可以编译成整洁的JavaScript代码。近日，微软团队在官方博客上放出了TypeScript 2.0候选版本。具体安装使用说明：下载TypeScript 2....
TypeScript语言教程.zip
01-10
6. **TypeScript 2.0新特性**：TypeScript 2.0引入了许多改进，包括默认参数、解构赋值、可选链操作符（?.）、类型推断的改进等，这些特性使代码更简洁、更易读。 7. **高级类型和类型保护**：TypeScript提供了高级...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2015
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 790
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 519
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 226
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1124
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Vite2.0配置深度解析：typescript版
"这篇文档详细介绍了如何学习和配置Vite 2.0，特别是使用TypeScript版本。Vite是一个由尤雨溪开发的构建工具，它提供了类似Vue CLI的功能，包括项目初始化和开发服务器。Vite的核心特点是基于浏览器原生的ES模块导入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值