Open hanyuxinting opened 5 years ago
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;
函数的返回值也可以声明:
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y; };
箭头函数里的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);
Rest and Spread
generator:
析构:
for in 与 forEach
TS 类
三个访问控制符。。
TS与JS:
constructor 只有在创建实例的时候被调用。
泛型:
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;
}
}
类型断言的用法如上,在需要断言的变量前加上
在 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
}
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。
TS核心库的定义文件:点击这里
定义了所有浏览器环境需要用到的类型,并且是预置在 TypeScript 中的; 包含很多方法的类型判断(核心意义吧); 不包含Node.js 部分~
想用 TypeScript 写 Node.js,则需要引入第三方声明文件:
npm install @types/node --save-dev
// 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
});
这里写一些React 项目 TS化 的一些问题。。