香港攻略1

准备

  • 身份证
  • 港澳通行证
  • 签证
  • 港币
  • 电脑 （改bug）
  • 洗漱用品 换洗衣物 （天气温度在15~20度 两件套 可能有雨）
  • 充电宝 & 移动wifi
  • 电话卡 手机套餐

行程安排

1.11

  • 1.11 6点出发 到杭州站 D935 21:05 ~ 06:41 杭州-深圳北

    1.12

  • 1.12 07:41~08:00 G6537 深圳北-香港西九龙 【出关 预留时间 可能很堵】
  • 香港西九龙-旺角 （九龙旺角朗豪坊-朗豪坊办公大楼29楼整层）
  • 朗豪坊大商场
  • 从旺角到尖沙咀有一条小吃街
  • 尖沙咀海港城
  • 22:01-22:15 香港西九龙-福田 G6537 【出关 海关闭关10:30左右】
  • 福田-世界之窗 宾馆

1.13

  • 18.35-20:30 CZ3563 深圳-杭州

购物

吃

买

玩

展开全文 >>

babel7 简易升级

主要更新

  • 放弃维护的 node 版本 0.10、0.12、4、5
  • 包使用 @babel 命名空间
  • @babel/preset-env 代替年度preset
    • 可以使用配置选项 useBuiltIns: ‘entry’ 按需导入
    • 可以使用 useBuiltIns: ‘usage’ 自动按使用到的 polyfill导入
  • TC39 提议的插件改名为 -proposal，代替 -transform
  • 针对面向用户的包（如 babel-loader、@babel/cli）在 @babel/core 中引入 peerDependency
  • 速度提升、代码优化

升级步骤

使用babel升级工具 or 改package.json

1
2
tnpm install babel-upgrade -g
babel-upgrade --write

or devDependencies中

1
2
3
4
5
6
7
8
9
10
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "*",
"babel-loader": "^8.0.0",

配置更改

  • 修改所有 bable-polyfill 为 @babel/polyfill

    1
    2
    3
    4
    5
    // index.js 头部导入修改
    import '@babel/polyfill'

    // webpack config 入口修改
    entry: ['@babel/polyfill', './src/index.js'],

  • .babelrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "useBuiltIns": "entry",
        "targets": {
          "browsers": [
            "last 2 versions",
            "IE >= 9"
          ]
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
  ]
}

常见插件一览

@babel/plugin-proposal-decorators

doc

@babel/plugin-proposal-class-properties

doc

@babel/plugin-proposal-do-expressions

  • doc
    1
    2
    3
    4
    5
    6
    7
    8
    9
    let a = do {
      if(x > 10) {
        'big';
      } else {
        'small';
      }
    };
    // is equivalent to:
    let a = x > 10 ? 'big' : 'small';

@babel/plugin-proposal-export-default-from 【采用】

  • doc
    1
    export v from 'mod';

@babel/plugin-proposal-export-namespace-from 【采用】

1
export * as ns from 'mod';

@babel/plugin-proposal-function-bind 【采用】

1
2
3
::obj.func
// is equivalent to:
obj.func.bind(obj)

@babel/plugin-proposal-function-sent

1
function.send 和generator有关

@babel/plugin-proposal-json-strings

1
2
3
4
5
const ex = "before
after";

//output 
const ex = "before\u2028after";

@babel/plugin-proposal-logical-assignment-operators

1
2
a ||= b; => a || (a = b);
a &&= b; => a && (a = b)

@babel/plugin-proposal-nullish-coalescing-operator

1
2
3
4
5
6
var foo = object.foo ?? "default";

// out
var _object$foo;

var foo = (_object$foo = object.foo) !== null && _object$foo !== void 0 ? _object$foo : "default";

@babel/plugin-proposal-numeric-separator

1
2
3
4
5
6
let budget = 1_000_000_000_000;

// What is the value of `budget`? It's 1 trillion!
//
// Let's confirm:
console.log(budget === 10 ** 12); // true

@babel/plugin-proposal-optional-chaining

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
                   // `bar` exists

@babel/plugin-proposal-throw-expressions

1
2
3
function test(param = throw new Error('required!')) {
  const test = param === true || throw new Error('Falsey!');
}

@babel/plugin-syntax-dynamic-import

@babel/plugin-syntax-import-meta

展开全文 >>

《原则》 读书笔记

要用理性战胜习惯和情绪障碍

很多时候。拥有目标比实现目标更能够让人快乐。也许隔着目标。静静守望。才是最美的距离。

一切事情的发生都是由于反复出现。不断演进的因果关系。

生活原则

1.拥抱现实，应对现实

  • 调和情绪和逻辑。在二者相符时行动

2.做一个超级现实的人

  • 理解现实，接受现实。处理现实问题。
  • 生活中最美好的事情就是实现梦想，追求梦想让生活有了韵味

3.对现实的准确理解。是任何良好结果的根本依据

4.观察自然，学习现实规律

  • 一个东西要好。就必须要符合现实的规律。并且促进整体的进化,这能带来最大的回报
  • 进化是宇宙中最强大的力量,是唯一永恒的东西,是一切的驱动力
    • 完美是不存在的, 它是一个目标, 激发永不停息的进化过程

5.进化是生命最大的成就和最大的回报

6.理解自然提供的现实教训

  • 爱和工作是人性的基石。工作可以是任何会使人进步的长期挑战。
  • 人需要困难，这对健康来说是必须的 – 卡尔 荣格
    • 为了赢得力量，人类必须突破极限，而这是痛苦的

7.痛苦+反思=进步

  • 直面你的问题, 错误和弱点导致的痛苦,会大幅提高你的效率

8.考虑后续在后续的结果

9.接受结果

10.从更高的层次俯视机器

展开全文 >>

immutable初级入坑指南

今天在用 immutable 改写以前的旧代码。反正就是内部流程逻辑非常之无敌超级螺旋复杂的那种吧。用了 immutable.js (其实也加上了TypeScript后续加文章) 来改造了下。一个总结体验那就是爽呀！😆开心的像个90斤的孩子！

immutable初相识

immutable 的英文意思是“不可变的”。从名字就已经体现出 immutable.js 的精髓了。在immutable的世界观里, 一切都是不可变的数据。
而传统的Js里十分让人头疼的一点就是对象的数据传递是引用传递。更新了新的对象也会影响原有的对象。从而使用各种 deepExtend, deepCopy方法来解决这个问题。而使用immutable.js就没有这个烦恼。

1
2
3
4
5
6
7
let obj1 = Immutable.Map({ a: 1, b: 2, c: 3 })
let obj2 = obj1

obj2 === obj1 // return true

obj2 = obj2.set("b",4)
obj2 === obj1 // return false 此时obj2已经改了。obj1没改

常用的概念和操作

作为一个immutable初级玩家, 总结一下一些常用概念和操作吧。

首先是常用的对象

  • Map : 对应js中的object
  • OrderedMap: 一种有序的Map类型
  • List: 对应js中的Array
  • Set: 不可重复的列表

常用的操作

  • 和js数据类型相互转化
    • Immutable.Map({}) 对象换成Map
    • Immutable.List([]) 数组换成List
    • Immutable.formJS()
      • 识别传入的数据并自动转换成相应的Map | List类型。可以说是相当方便了。
    • 还有 toJS(), toJSON(), toArray(), toObject() 方法
  • 判断两个对象的值是否相等
1
2
3
let obj1 = Immutable.Map({ a: 1, b: 2, c: 3 })
let obj2 = Immutable.Map({ a: 1, b: 2, c: 3 })
Immutable.is(obj1, obj2);
  • 深度取值
1
2
let map1 = Immutable.Map({ a: {d: { target : 1}}, b: 2, c: 3 })
const target = Immutable.getIn(map1, ["a","d","target"])

  • 深度赋值

    1
    2
    let map1 = Immutable.Map({ a: {d: { target : 1}}, b: 2, c: 3 })
    map1 = Immutable.setIn(map1, ["a","d","target"], 4)

  • 浅合并(类似于Object.assign, 只合并了第一层)

    1
    2
    3
    4
    5
    const map1 = Immutable.Map({ a: {d: { target : 1}}});
    const map2 = Immutable.Map({ a: {c: 1}});
    const map3 = Immutable.merge(map1,map2)
    console.log(map3.toJS())
    // { a: {c: 1}}

  • 深度合并

1
2
3
4
5
const map1 = Immutable.Map({ a: {d: { target : 1}}});
const map2 = Immutable.Map({ a: {c: 1}});
const map3 = Immutable.mergeDeep(map1,map2)
console.log(map3.toJS())
// { a: {c: 1, d: { target : 1}}}}

优势

  • 节省内存
    • 使用了 Trie 数据结构来进行储存。使用了 Structural Sharing结构共享,(这部分很高玩我也没有深究。。。)即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享
  • 提升计算性能
    • 使用了 Trie 数据结构来进行储存。避免深度比较。如果两个对象的值相等。那么他们的hashCode也相等。从而比较hashCode即可比较两个对象的值是否相等,避免了深度比较。
  • 函数式编程
    • 拥抱函数式编程
  • 使用便利
    • 因为数据是不可变的。所以操作格外省心

使用immutable的注意事项

  • 变量命名
    • 非常值得注意的一个点。因为可能引用了其他的库或者文件,使得代码里存在immutable数据和非immutable数据。所以immutable变量需要加上 $$ 前缀来区分
  • API上的习惯
    • 赋值操作之后要修改原数据记得要赋值。不然无法更新数据。
      $$data = $$data.set("hello","immutable")
  • 为了性能和节省内存, Immutable.js 会努力避免创建新的对象。如果没有数据变化发生的话。
1
2
3
4
const { Map } = require('immutable')
const originalMap = Map({ a: 1, b: 2, c: 3 })
const updatedMap = originalMap.set('b', 2)
updatedMap === originalMap // return ture

如上代码虽然进行了一顿操作。然而数据并没有改变。所以updatedMap和originalMap还是指向了同一个对象。

而如果

1
2
const updatedMap = originalMap.set('b', 4)
updatedMap === originalMap // return false

此时返回false

展开全文 >>

JS中的监听者设计模式

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

JS里对观察者模式的实现是通过回调来实现的

JS中的监听者订阅模式有以下特征

  • 一个模式有一个事件对象控制。里面包含订阅、退订、发布等方法
  • 有一个事件队列。记录所有的订阅id,(token),还有回调。
  • 发布通知即调用对应事件队列里面的事件。调用相关的回调的函数。带入发布时候的参数和上下文相关信息

JS中的监听者订阅模式的应用场景

  • 事件模型。例如eventEmit模型就是基于js的监听者订阅模式
  • 一种一对多的关系的时候

我们来先定义一个pubsub对象，其内部包含了3个方法：订阅、退订、发布。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
let publishSub = {};
let topics = {}, // key-value{回调函数存放的数组}
subUid = -1;


//发布 trigger
publishSub.publish = (topic, args) => {
  if (!topics[topic]) {
    return false;
  }

  setTimeout(function () {
    var subscribers = topics[topic],
      len = subscribers ? subscribers.length : 0;

    while (len--) {
      subscribers[len].func(topic, args);
    }
  }, 0);
}

//订阅方法
publishSub.subscribe = function (topic, func) {

  if (!topics[topic]) {
    topics[topic] = [];
  }

  var token = (++subUid).toString();
  topics[topic].push({
    token: token,
    func: func
  });
  return token;
};

//退订方法
publishSub.unsubscribe =  function (token) {
  for (var m in topics) {
    if (topics[m]) {
      for (var i = 0, j = topics[m].length; i < j; i++) {
        if (topics[m][i].token === token) {
          topics[m].splice(i, 1);
          return token;
        }
      }
    }
  }
  return false;
};

1
2
3
4
5
6
7
8
9
 //订阅一个 on
publishSub.subscribe('example1', function (topics, data) {
  console.log(topics + ": " + data);
});

//发布通知 fire
publishSub.publish('example1', 'hello world!');
publishSub.publish('example1', ['test', 'a', 'b', 'c']);
publishSub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello' }]);

展开全文 >>

TypeScript—函数

函数

函数类型包含两部分：参数类型和返回值类型

1
2
3
4
5
function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };
  • 我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。
  • 返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空

可选参数和默认参数

  • JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如，我们想让last name是可选的

  • 注意: 可选参数必须跟在必须参数后面

    1
    function buildName(firstName: string, lastName?: string){}。。。

  • 在TypeScript里，我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。 让我们修改上例，把last name的默认值设置为”Smith”。

    1
    function buildName(firstName: string, lastName = "Smith")

剩余参数

在TypeScript里，你可以把所有参数收集到一个变量里：

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

this

指定了this类型后，你显式声明函数必须在声明类型的实例上调用。

重载

同一个函数提供多个函数类型定义来进行函数重载。 编译器会根据这个列表去处理函数的调用。 下面我们来重载 pickCard函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 };
    }
}

展开全文 >>

react关于HOC高阶组件

什么是HOC

高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧。它本身并不是 React 的 API，而是一种 React 组件的设计理念。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
普通的组件把 props 传递给 UI，而高阶组件则以组件为参数，传递给其他组件。

HOC 并不会修改传入的组件，也不会通过继承来拷贝其行为。HOC 只是将原有组件做了一层包裹，它只是一个没有任何副作用的纯函数。

第一个参数是需要被包裹的组件，而第二个参数则用于接收我们需要的数据

为什么需要HOC

在实际开发当中，组件经常会被其他需求所污染。
高阶组件的存在，完美展示了 React 天生的复合（compositional）能力，在 React 社区当中，react-redux，styled-components，react-intl 等都普遍采用了这个方式。值得一提的是，recompose 类库又利用高阶组件，并发扬光大，做到了“脑洞大开”的事情。

HOC设计原则

(一)不要修改原有组件，而是组合组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function logProps(WrappedComponent) {
  // 创建了一个匿名组件
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // 将传入的组件包裹在匿名组件里，
      // 并不修改原有组件，而是利用匿名组件的声明周期
      return <WrappedComponent {...this.props} />;
    }
  }
}

(二)不相关的参数不应该传递给被包裹的组件

(三)给容器一个名词，以便 debug

最常见的做法是根据被包裹的组件名来命名。如果你的高阶组件叫做 withSubscription ，被包裹的组件叫做 CommentList ，那么容器组件名则为 WithSubscription(CommentList)
WithSubscription.displayName = WithSubscription(${getDisplayName(WrappedComponent)});

(四)不要在 render 方法内使用 HOC

展开全文 >>

【node学习笔记】进程管理

使用process对象管理自身

官方文档： http://nodejs.org/api/process.html

任何一个进程都有启动进程时使用的命令行参数，有标准输入标准输出，有运行权限，有运行环境和运行状态。在NodeJS中，可以通过process对象感知和控制NodeJS自身进程的方方面面。另外需要注意的是，process不是内置模块，而是一个全局对象，因此在任何地方都可以直接使用。

  • 如何获取命令行参数
    process.argv.slice(2)

  • 如何退出程序

    程序的退出状态码为0。或者一个程序运行时发生了异常后就挂了，这时程序的退出状态码不等于0。如果我们在代码中捕获了某个异常，但是觉得程序不应该继续运行下去，需要立即退出，并且需要把退出状态码设置为指定数字，比如1。

    process.exit(1);

  • 如何控制输入输出

    标准输入流（stdin）、一个标准输出流（stdout）、一个标准错误流（stderr）分别对应process.stdin、process.stdout和process.stderr，第一个是只读数据流，后边两个是只写数据流。

使用child_process模块创建和管理子进程

Child Process

官方文档： http://nodejs.org/api/child_process.html

使用child_process模块可以创建和控制子进程。该模块提供的API中最核心的是.spawn，其余API都是针对特定使用场景对它的进一步封装，算是一种语法糖。

Cluster

官方文档： http://nodejs.org/api/cluster.html

cluster模块是对child_process模块的进一步封装，专用于解决单进程NodeJS Web服务器无法充分利用多核CPU的问题。使用该模块可以简化多进程服务器程序的开发，让每个核上运行一个工作进程，并统一通过主进程监听端口和分发请求。

  • 如何创建子进程

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
var child = child_process.spawn('node', [ 'xxx.js' ]);

child.stdout.on('data', function (data) {
    console.log('stdout: ' + data);
});

child.stderr.on('data', function (data) {
    console.log('stderr: ' + data);
});

child.on('close', function (code) {
    console.log('child process exited with code ' + code);
});

.spawn(exec, args, options)方法，该方法支持三个参数。第一个参数是执行文件路径，可以是执行文件的相对或绝对路径，也可以是根据PATH环境变量能找到的执行文件名。第二个参数中，数组中的每个成员都按顺序对应一个命令行参数。第三个参数可选，用于配置子进程的执行环境与行为。

另外，上例中虽然通过子进程对象的.stdout和.stderr访问子进程的输出，但通过options.stdio字段的不同配置，可以将子进程的输入输出重定向到任何数据流上，或者让子进程共享父进程的标准输入输出流，或者直接忽略子进程的输入输出。

  • 进程间如何通讯

进程之间可以通过信号互相通信。以下是一个例子。

1
2
3
4
5
6
7
8
9
10
/* parent.js */
var child = child_process.spawn('node', [ 'child.js' ]);

child.kill('SIGTERM');

/* child.js */
process.on('SIGTERM', function () {
    cleanUp();
    process.exit(0);
});

在上例中，父进程通过.kill方法向子进程发送SIGTERM信号，子进程监听process对象的SIGTERM事件响应信号。不要被.kill方法的名称迷惑了，该方法本质上是用来给进程发送信号的，进程收到信号后具体要做啥，完全取决于信号的种类和进程自身的代码.

  • 如何守护子进程

守护进程一般用于监控工作进程的运行状态，在工作进程不正常退出时重启工作进程，保障工作进程不间断运行。以下是一种实现方式。

1
2
3
4
5
6
7
8
9
10
11
12
/* daemon.js */
function spawn(mainModule) {
    var worker = child_process.spawn('node', [ mainModule ]);

    worker.on('exit', function (code) {
        if (code !== 0) {
            spawn(mainModule);
        }
    });
}

spawn('worker.js');

可以看到，工作进程非正常退出时，守护进程立即重启工作进程。

展开全文 >>

【nodeJS学习笔记】文件操作

前言

让前端觉得如获神器的不是NodeJS能做网络编程，而是NodeJS能够操作文件。小至文件查找，大至代码编译，几乎没有一个前端工具不操作文件。换个角度讲，几乎也只需要一些数据处理逻辑，再加上一些文件操作，就能够编写出大多数前端工具。

fs内置模块

  • 文件属性读写。

其中常用的有fs.stat、fs.chmod、fs.chown等。

  • 文件内容读写。

其中常用的有fs.readFile、fs.readdir、fs.writeFile、fs.mkdir等。

  • 底层文件操作。

其中常用的有fs.open、fs.read、fs.write、fs.close等。

异步

NodeJS最精华的异步IO模型在fs模块里有着充分的体现，例如上边提到的这些API都通过回调函数传递结果。以fs.readFile为例：

1
2
3
4
5
6
7
fs.readFile(pathname, function (err, data) {
    if (err) {
        // Deal with error.
    } else {
        // Deal with data.
    }
});

fs模块的所有异步API都有对应的同步版本，用于无法使用异步操作时，或者同步操作更方便时的情况。同步API除了方法名的末尾多了一个Sync之外，异常对象与执行结果的传递方式也有相应变化。

1
2
3
4
5
6
try {
    var data = fs.readFileSync(pathname);
    // Deal with data.
} catch (err) {
    // Deal with error.
}

用nodeJS实现文件拷贝

  • 小文件拷贝
    我们使用NodeJS内置的fs模块简单实现这个程序如下。
1
2
3
4
5
6
7
8
9
var fs = require('fs');
function copy(src, dst) {
    fs.writeFileSync(dst, fs.readFileSync(src));
}
function main(argv) {
    copy(argv[0], argv[1]);
}

main(process.argv.slice(2));

TIP： process是一个全局变量，可通过process.argv获得命令行参数。由于argv[0]固定等于NodeJS执行程序的绝对路径，argv[1]固定等于主模块的绝对路径，因此第一个命令行参数从argv[2]这个位置开始。

  • 大文件拷贝
    但这种一次性把所有文件内容都读取到内存中后再一次性写入磁盘的方式不适合拷贝大文件，内存会爆仓。对于大文件，我们只能读一点写一点，直到完成拷贝。因此上边的程序需要改造如下。
1
2
3
4
5
6
7
8
var fs = require('fs');
function copy(src, dst) {
    fs.createReadStream(src).pipe(fs.createWriteStream(dst));
}
function main(argv) {
    copy(argv[0], argv[1]);
}
main(process.argv.slice(2));

以上程序使用fs.createReadStream创建了一个源文件的只读数据流，并使用fs.createWriteStream创建了一个目标文件的只写数据流，并且用pipe方法把两个数据流连接了起来。连接起来后发生的事情，说得抽象点的话，水顺着水管从一个桶流到了另一个桶。

展开全文 >>

TypeScript—JS的超集（一）

(一)Typescript可以解决什么样的问题

  • 静态类型检查 (类型检查不通过会在编译时报错)
    tsc XX.ts

(二)基本语法

类型注解

给 person函数的参数添加: string类型注解，如下：

1
2
3
4
5
function greeter(person: string) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user)

编译，你会看到产生了一个错误。
greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，greeter.js文件还是被创建了。 就算你的代码里有错误，你仍然可以使用TypeScript。但在这种情况下，TypeScript会警告你代码可能不会按预期执行。

接口(interface)

在TypeScript里，只在两个类型内部的结构兼容那么这两个类型就是兼容的. 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以

1
2
3
4
5
6
7
8
9
interface Person {
   firstName: string;
   lastName: string;
}
function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);

类

TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。
创建一个Student类，它带有一个构造函数和一些公共字段。

  • 注意类和接口可以一起工作，可以自行决定抽象的级别。
  • 在构造函数的参数上使用public等同于创建了同名的成员变量。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
      class Student {
            fullName: string;
            constructor(public firstName, public middleInitial, public lastName) {
                this.fullName = firstName + " " + middleInitial + " " + lastName;
            }
        }
        interface Person {
            firstName: string;
            lastName: string;
        }
        function greeter(person : Person) {
            return "Hello, " + person.firstName + " " + person.lastName;
        }
        var user = new Student("Jane", "M.", "User");
    document.body.innerHTML = greeter(user);

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

执象而求 咫尺千里<br/> 问余何适 廓而忘言<br/> 华枝春满<br/> 天心月圆 <br/>