常规更新

Author: liangklfangl

typescript/error.md

@@ -0,0 +1,280 @@
+### 备注
+该部分主要列举在typescript开发中遇到的各种问题与解决方案。
+
+#### 1.顺序import问题
+<pre>
+ Import sources within a group must be alphabetized. 
+</pre>
+在tslint.json中添加如下内容即可，然后重启服务:
+```js
+"rules": {
+　　"ordered-imports": false
+}
+```
+
+#### 2.TypeScript coding guidelines say to not prefix interface with I
+在tslint.json里面添加如下内容:
+```js
+"rules": {
+    "ordered-imports": false,
+    "interface-name": [
+        true,
+        "never-prefix"
+    ]
+}
+```
+
+#### 3.Cannot compile jsx if we provide `noImplicitAny` option
+```js
+ "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    //这里设置为false
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true
+}
+```
+
+#### 4.rootDir问题
+<pre>
+"error TS6059: File 'D:/workplace/nodeWP/testTS/index.tsx' is not under 'rootDir' 
+</pre>
+我去掉了rootDir，然后使用exclude和include代替:
+```js
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react",
+        "moduleResolution": "node",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": false,
+        "strictNullChecks": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "noUnusedLocals": true,
+        "allowSyntheticDefaultImports": true,
+        "experimentalDecorators": true
+    },
+    // rootDir去掉了
+    "include": ["./test/**/*.tsx", "./src/**/*.tsx"],
+    "exclude": ["./node_modules/**/*"]
+}
+```
+
+#### 5.babel-core版本v6.x
+<pre>
+Error: You gave us a visitor for the node type "TSDeclareFunction" but it's not a valid type (While processing preset: "/Users/nojvek/mp/insights/node_modules/babel-preset-typescript/lib/index.js")
+</pre>
+将babel-core升级为[email protected]才能处理TSDeclareFunction版本号。具体可以参看该babel的[issue](https://github.com/babel/babel/issues/6392)。此时就可以使用下面的代码:
+```js
+const babel = require("babel-core");
+// app.tsx
+fs.readFile("./app.tsx", (err, data) => {
+  if (err) throw err;
+  const compiled = babel.transform(data.toString(), {
+      presets: ["typescript"]
+  });
+});
+```
+
+#### 6.babylon解析flow和typescript不能同时出现
+<pre>
+Cannot combine flow and typescript plugins.
+</pre>
+下面是babylon检验代码:
+```js
+ if (pluginList.indexOf("flow") >= 0 && pluginList.indexOf("typescript") >= 0) {
+    throw new Error("Cannot combine flow and typescript plugins.");
+  }
+```
+去掉flow插件即可:
+```js
+const babylon = require("babylon");
+const types = require("babel-types");
+const traverse = require("babel-traverse").default;
+function parser(content) {
+  return babylon.parse(content, {
+    sourceType: "module",
+    plugins: [
+      "classProperties",
+      "estree",
+      "jsx",
+      // "flow",
+      // 这里注释掉
+      "typescript",
+      // 通过这种方式babylon就支持typescript了
+      // 但是babel相关插件需要升级到v7.0+
+      "doExpressions",
+      "objectRestSpread",
+      "decorators",
+      "decorators2",
+      "classPrivateProperties",
+      "classPrivateMethods",
+      "exportExtensions",
+      "asyncGenerators",
+      "functionBind",
+      "functionSent",
+      "dynamicImport",
+      "numericSeparator",
+      "optionalChaining",
+      "importMeta",
+      "bigInt",
+      "optionalCatchBinding",
+      "throwExpressions",
+      "pipelineOperator",
+      "nullishCoalescingOperator"
+    ]
+  });
+}
+module.exports = parser;
+```
+上面是相关babylon的版本配置:
+```js
+{
+    "dependencies": {
+        "@babel/plugin-proposal-class-properties": "^7.2.1",
+        "@babel/plugin-syntax-class-properties": "^7.2.0",
+        "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
+        "@babel/plugin-transform-typescript": "^7.2.0",
+        "@babel/preset-typescript": "^7.1.0",
+        "babel-core": "^7.0.0-beta.3",
+        "babel-preset-typescript": "^7.0.0-alpha.19",
+        "babylon": "^7.0.0-beta.47"
+    }
+}
+```
+#### 7.需要开启classProperties属性
+<pre>
+SyntaxError: unknown: This experimental syntax requires enabling the parser plugin: 'classProperties' (28:4)
+</pre>
+当时以为需要如下方式引入plugin:
+    ```js
+    "@babel/plugin-proposal-class-properties",
+    "@babel/proposal-class-properties",
+    "@babel/plugin-syntax-class-properties",
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
+    "@babel/plugin-proposal-object-rest-spread"
+```
+其实并不是，只要添加classProperties即可。具体查看[babylon](https://web.npm.alibaba-inc.com/package/babylon)插件。
+
+#### 8.babylon解析typescript异常
+<pre>
+/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babylon/lib/index.js:775
+    throw err;
+    ^
+
+SyntaxError: Unexpected token (3:17)
+</pre>
+此时将babylon升级为如下版本即可:
+```js
+ "babylon": "^7.0.0-beta.47"
+```
+
+#### 9.babel-generator解析异常无法回归源码
+```js
+"use strict";
+const babylon = require("babylon");
+const types = require("babel-types");
+const util = require("util");
+const fs = require("fs");
+const generator = require("babel-generator").default;
+const traverse = require("babel-traverse").default;
+function parser(content) {
+  return babylon.parse(content, {
+    sourceType: "module",
+    plugins: [
+      "classProperties",
+      "estree",
+      "jsx",
+      // "flow",
+      "typescript",
+      "doExpressions",
+      "objectRestSpread",
+      "decorators",
+      "classPrivateProperties",
+      "classPrivateMethods",
+      "exportExtensions",
+      "asyncGenerators",
+      "functionBind",
+      "functionSent",
+      "dynamicImport",
+      "numericSeparator",
+      "optionalChaining",
+      "importMeta",
+      "bigInt",
+      "optionalCatchBinding",
+      "throwExpressions",
+      "pipelineOperator",
+      "nullishCoalescingOperator"
+    ]
+  });
+}
+module.exports = function transformer(content) {
+  let imports = [],
+    exportNames = [],
+    globalExportDefaultName = "",
+    classExportsDefaultName = "",
+    isClssDefaultExport = false;
+  const inputAst = parser(content);
+  const sourceCode = generator(inputAst, {}, content).code;
+  // 这里我试过了很多版本的babel-generator都不行
+  console.log(inputAst);
+};
+```
+上面试过了很多版本都不行，所以最后并没有通过babel-generator来完成，而是通过babylon解析，然后通过regex将不需要的代码replace掉。后面会继续关注该方面的知识点。
+<pre>
+throw new ReferenceError("unknown node of type " + (0, _stringify2.default)(node.type) + " with constructor " + (0, _stringify2.default)(node && node.constructor.name));
+      ^
+
+ReferenceError: unknown node of type "Literal" with constructor "Node"
+    at Generator.print (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:279:13)
+    at Generator.JSXAttribute (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/generators/jsx.js:28:10)
+    at /Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:298:23
+    at Buffer.withSource (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/buffer.js:159:28)
+    at Generator.withSource (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:189:15)
+    at Generator.print (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:297:10)
+    at Generator.printJoin (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:366:12)
+    at Generator.JSXOpeningElement (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/generators/jsx.js:108:10)
+    at /Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:298:23
+    at Buffer.withSource (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/buffer.js:159:28)
+    at Generator.withSource (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:189:15)
+    at Generator.print (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:297:10)
+    at Generator.JSXElement (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/generators/jsx.js:74:8)
+    at /Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:298:23
+    at Buffer.withSource (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/buffer.js:159:28)
+    at Generator.withSource (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:189:15)
+    at Generator.print (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:297:10)
+    at Generator.printJoin (/Users/xxx/Desktop/hub-kit-cnt-ts/node_modules/[email protected]@babel-generator/lib/printer.js:366:12)
+</pre> 
+
+
+
+
+参考资料:
+
+[babylon](https://github.com/babel/babylon/issues/320)
+
+[typescript](https://github.com/Microsoft/TypeScript/issues/11441)
+
+

typescript/function.md

@@ -0,0 +1,87 @@
+### 备注
+该部分只列举那些稍微难以理解的typescript的function相关内容，详细内容可以参考[TypeScript官网](http://www.typescriptlang.org/docs/handbook/functions.html)。
+
+### 1.typescript的function
+```js
+// myAdd has the full function type
+let myAdd = function(x: number, y: number): number { return  x + y; };
+// The parameters 'x' and 'y' have the type number
+// 函数必须有参数和返回值，宽箭头之前是参数，之后是返回值
+let myAdd: (baseValue: number, increment: number) => number =
+    function(x, y) { return x + y; };
+```
+
+### 2.可选和默认参数
+在TypeScript中，每一个参数都被认为是必须的，但是可以是null或者undefined。但是调用函数传入的参数数量必须和函数本身期望的参数数量一致。
+```js
+function buildName(firstName: string, lastName: string) {
+    return firstName + " " + lastName;
+}
+let result1 = buildName("Bob");                  // error, too few parameters
+let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
+let result3 = buildName("Bob", "Adams");         // ah, just right
+```
+当然你也可以设置一个参数为可选,比如下面的lastName，可以通过**?**修饰:
+```js
+function buildName(firstName: string, lastName?: string) {
+    if (lastName)
+        return firstName + " " + lastName;
+    else
+        return firstName;
+}
+let result1 = buildName("Bob");                  
+// works correctly now
+let result2 = buildName("Bob", "Adams", "Sr.");  
+// error, too many parameters
+let result3 = buildName("Bob", "Adams");
+// ah, just right
+```
+也可以通过如下方式设置默认值,此时用户**不传入或者传入的是null也会被设置为默认值**:
+```js
+function buildName(firstName: string, lastName = "Smith") {
+    return firstName + " " + lastName;
+}
+let result1 = buildName("Bob");                  
+// works correctly now, returns "Bob Smith"
+let result2 = buildName("Bob", undefined);      
+ // still works, also returns "Bob Smith"
+ // 即使用户传入了undefined或者null也会返回默认值~
+let result3 = buildName("Bob", "Adams", "Sr.");  
+// error, too many parameters
+let result4 = buildName("Bob", "Adams");         
+// ah, just right
+```
+所有必选参数后面的默认实例化的参数都被认为是可选的，和可选参数一样，在调用的时候可以忽略。同时，可选参数和默认参数的type被认为和前一个必选参数是一样的:
+```js
+function buildName(firstName: string, lastName?: string) {
+    // ...
+}
+```
+和下面的函数:
+```js
+function buildName(firstName: string, lastName = "Smith") {
+    // ...
+}
+```
+的类型都是如下格式:
+```js
+(firstName: string, lastName?: string) => string
+```
+
+### 3.Rest参数
+```js
+function buildName(firstName: string, ...restOfName: string[]) {
+    return firstName + " " + restOfName.join(" ");
+}
+// 在js中使用arguments
+let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
+```
+也可以通过如下方式书写:
+```js
+function buildName(firstName: string, ...restOfName: string[]) {
+    return firstName + " " + restOfName.join(" ");
+}
+let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
+// 前面是参数和返回值
+```
+