typescript handbook 学习笔记4

概述

这是我学习typescript的笔记。写这个笔记的原因主要有2个,一个是熟悉相关的写法;另一个是理清其中一些晦涩的东西。供以后开发时参考,相信对其他人也有用。

学习typescript建议直接看中文文档英文文档。我是看的英文文档

typescript handbook 学习笔记3

基本使用

class Greeter {
    //只读,必须在声明的时候或者constructor里面初始化
    readonly greeting: string;
    //constructor里面的只读
    constructor(readonly message: string) {
        this.greeting = message;
    }
    greet() {
        return 'Hello, ' + this.greeting;
    }
}

class Greeter01 extends Greeter {
    constructor(message: string = 'everyone') {super(message);}
    greet() {
        return 'hi, ' + this.greeting;
    }
}

let sam = new Greeter01('world');
sam.greet();

public, private和protected

  1. public是默认的,如果不声明就是public。
  2. private指只能内部访问,不能被子类访问。
  3. protected指只能被内部或者子类的实例访问。

注意:

  1. 2个类相同,除了成员相同之外,private和protected的元素必须来自于同一处代码。
  2. 如果一个类的constructor被标记为protected,那么表示这个类不能被实例化,只能通过它生成子类,然后实例化子类。

存取器

存取器能够拦截并重写读写属性的操作,如果只有get没有set就会被认为是只读的。

let language = {
  log: ['example', 'test'],
  set current(name) {
    this.log.push(name);
  },
  get current() {
    if (this.log.length === 0) {
        return undefined;
    } else {
        return this.log[this.log.length - 1];
    }
  }
}

language.current = 'EN';
console.log(language.current);

静态属性和方法

在属性或方法前面加上static就是静态属性或方法了,实例属性或方法用this访问,静态属性或方法用类名来访问。

抽象类

抽象类和接口类似,只能被继承,不能被实例化,和接口不同的是,抽象类可以定义一些方法,这些方法可以被继承。

抽象类也有抽象属性,抽象属性和接口一样,一定要在子类中实现。

类当做接口使用

很好理解,看下面这段代码即可。

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

函数

简写形式和完整形式

由于编译的时候可以从简写形式推断出完整形式,所以推荐用简写形式。

//简写形式
function add(x: number, y: number): number {
    return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y; };

//完整形式
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };

可选参数和默认参数

//可选参数
function buildName(firstName: string, lastName?: string) {
    return firstName + " " + lastName;
}
//默认参数
function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

可选参数和默认参数的函数类型是相同的:(firstName: string, lastName?: string) => string。为了书写方便,默认参数写在后面比较好。

参数多的话也可以解构和展开,示例如下:

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

this

关于this的原理请看这里:理解js中的函数调用和this

如果遇到this报错,可以通过添加this: void或者this: 类名 来解决。

注意下面这种直接用等号的写法是一种实验性的写法,es6并不支持,只在es7上做了提案。但是typescript和react都对这种写法做了支持.

//用浏览器的审查元素运行,会报错
class Handler {
    onClickGood = () => { console.log(this); }
}

一般如果要用等号的话,我们需要写在constructor里面(注意要加this)。

//写在constructor里面
class Handler {
    constructor() {
        this.onClickGood = () => { console.log(this); }
    }
}

let myHandler = new Handler();
myHandler.onClickGood();

函数重载

看下面的例子,注意前2个才是函数重载,最后一个是函数声明。在编译的时候,会逐一判断函数类型,如果这2个都不符合,就会报错。

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // Check to see if we're working with an object/array
    // if so, they gave us the deck and we'll pick the card
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // Otherwise just let them pick the card
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

原文地址:https://www.cnblogs.com/yangzhou33/p/8661620.html

时间: 2024-10-20 11:33:57

typescript handbook 学习笔记4的相关文章

Webpack新手入门教程(学习笔记)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang TC Semibold"; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0

Angularjs2 学习笔记

angularjs2 学习笔记(一) 开发环境搭建 开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装node.js(https://nodejs.org/en/),为的是能够使用npm获得angular2.0的开发包 验证是否安装成功 cmd下输入 node -v npm -v 第二步:在vs2013上安装typescript 安装完成后在项目中可以添加typescript项目了,并且在项目属性栏中会有ty

Angular 2 学习笔记(一)

Angular 2 学习笔记(一) First Application 建立自定义组件(Components) 从表单(Form)接受用户输入(input) 渲染对象列表并用视图战事 监听(Intercepting)用户点击事件并执行操作 Getting started TypeScript 建议使用 TypeScript 开始 Angular 2 的编程. Angular 2 有 ES5 API ,但是 Angular 2 是用 TypeScript 写的并且大部分人都在使用 TypeScri

微信房卡炸金花搭建之【Webpack3.x】学习笔记

微信房卡炸金花搭建之[Webpack3.x]学习笔记资源下载:http://www.aqiulian.com,更多Webpack3.x相关问题询问QQ:212303635 本文环境:Visual Studio Code.Windows10 什么是Webpack? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用.在3.0出现后,W

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详细,自己在看它的文档和代码时写了一些demo和笔记,还有它实现的原理记录一下 学习Caliburn.Micro要有MEF和MVVM的基础 先说一下他的命名规则和引导类 以后我会把Caliburn.Micro的 Actions IResult,IHandle ICondu

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

[原创]java WEB学习笔记93:Hibernate学习之路---Hibernate 缓存介绍,缓存级别,使用二级缓存的情况,二级缓存的架构集合缓存,二级缓存的并发策略,实现步骤,集合缓存,查询缓存,时间戳缓存

本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 -----------------------------------------------------------------------------------------------------------------

Activiti 学习笔记记录(三)

上一篇:Activiti 学习笔记记录(二) 导读:上一篇学习了bpmn 画图的常用图形标记.那如何用它们组成一个可用文件呢? 我们知道 bpmn 其实是一个xml 文件