TypeScript&React

[hanyuxinting]

这里写一些React 项目 TS化 的一些问题。。

[hanyuxinting]

react报错Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

// .default
const CustomRouter = require('./customRouter').default;

[hanyuxinting]

函数的返回值也可以声明：

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

[hanyuxinting]

箭头函数里的this： 箭头函数能保存函数创建时的 this值，而不是调用时的值。

附：一篇古老的this说明会

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        // NOTE: the line below is now an arrow function, allowing us to capture 'this' right here
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

[hanyuxinting]

[hanyuxinting]

[hanyuxinting]

[hanyuxinting]

Rest and Spread

[hanyuxinting]

generator：

[hanyuxinting]

析构：

[hanyuxinting]

for in 与 forEach

[hanyuxinting]

TS 类

三个访问控制符。。

TS与JS：

constructor 只有在创建实例的时候被调用。

[hanyuxinting]

泛型：

[hanyuxinting]

function getLength(something: string | number): number {
    if (something.length) {
        return something.length;
    } else {
        return something.toString().length;
    }
}

// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.
// index.ts(3,26): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

断言：

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

类型断言的用法如上，在需要断言的变量前加上 即可。 类型断言不是类型转换。

[hanyuxinting]

在 ES6 模块系统中，使用 export default 可以导出一个默认值，使用方可以用 import foo from 'foo' 而不是 import { foo } from 'foo' 来导入这个默认值。 注意，只有 function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出。

// types/foo/index.d.ts

export default enum Directions {
// ERROR: Expression expected.
    Up,
    Down,
    Left,
    Right
}

正确的：

// types/foo/index.d.ts

export default Directions;

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

[hanyuxinting]

TS与commonJS 等库的引用方式

// 在commonJS中模块导出方式：
// 整体导出
module.exports = foo;
// 单个导出
exports.bar = bar;

// TS引用方式：
// 方式一
// 整体导入
const foo = require('foo');
// 单个导入
const bar = require('foo').bar;

// 方式二
// 整体导入
import * as foo from 'foo';
// 单个导入
import { bar } from 'foo';

// 方式三：
// 需要在tsconfig.json 中修改 module 字段值，为 commonjs。
// 否则会报错：Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
// 整体导入
import foo = require('foo');
// 单个导入
import bar = require('foo').bar;

由于很多第三方库是 commonjs 规范的，所以声明文件也就不得不用到 export = 这种语法了。但是还是需要再强调下，相比与 export =，我们更推荐使用 ES6 标准的 export default 和 export。

[hanyuxinting]

TS核心库的定义文件：点击这里

定义了所有浏览器环境需要用到的类型，并且是预置在 TypeScript 中的； 包含很多方法的类型判断（核心意义吧）； 不包含Node.js 部分~

想用 TypeScript 写 Node.js，则需要引入第三方声明文件：

npm install @types/node --save-dev

ES内置对象：（更多内置对象）

// ES内置对象
let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

// DOM 、BOM 的内置对象
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});