Visual studio code

babeljs cn
gulp zh quick-start
w3c typescript

npm start 和npm run build背后运行的逻辑

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

react-scripts

"start": "react-scripts build",这个命令调用了start.js
"build": "react-scripts build",这个命令调用了build.js
在starts.js中后会调用webpack.config.dev.js，会去调用一些webpack的加载规则并使用webpack创建本地server。

typescript 之父

安德斯·海尔斯伯格（Anders Hejlsberg），1960年12月出生于丹麦哥本哈根，曾在丹麦科技大学学习工程学，计算机科学家。Turbo Pascal编译器的主要作者，Delphi、C#和TypeScript之父，.NET(dotnet)创立者。

image.png

TS安装编译配置自动生成

TS安装编译配置自动生成.js文件

1. npm install -g typescript
2. tsc --init
3. 选择终端-->运行任务-->tsc:监视-tsconfig.json就可以自动生成代码

interface

//定义接口

interface Person{
    name: string,
    age: number,  // 必选属性
    job?: string, //可选属性，表示不是必须的参数，
    readonly salary: number,  //表示是只读的属性,但是在初始化之后不能重新赋值，否则会报错
    [ propName : string ] : any,  // 任意类型

}
//定义一个变量，它的类型时接口Person，这样就约束了接口的内容
let person: Person = {
    name: 'jack',
    age: 28,
    job: 'IT dog',
    id: 9872,
    salary: 9999,
}

function printMan(person) {
    console.log( `我是 ${person.name}, 我今年 ${person.age},我的工作是${person.job}`);
}

tsx

tsx 就是 使用 typescript 书写 jsx。

调试typescript工程配置

1. tsc --init
2. 配置tsc 监视

配置tsc 监视

3. 安装 npm install -D ts-node
4. 配置luanch.json，并修改。

 "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],

选择 tsc: 监视 - tsconfig.json ，回车运行之后，编辑的代码保存之后，就会自动编译。

解决typescript调试参考

Visual Studio Code 开发和调试 TypeScript

Cannot find name 'Set'.

src/index.ts(120,20): error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the lib compiler option to es2015 or later.

tsconfig
"target": "es5",修改为 "target": "es6"。

同步配置

安装Settings Sync 插件

Settings Sync

打开命令行面板（查看->命令行面板）： command+shift+p

上传配置

CODE SETTINGS SYNC UPLOAD SUMMARY
Version: 3.4.3
--------------------
GitHub Gist Type: Secret

Restarting Visual Studio Code may be required to apply color and file icon theme.
--------------------
Files Uploaded:
  extensions.json > extensions.json
  keybindings.json > keybindingsMac.json
  settings.json > settings.json
  tasks.json > tasks.json

Extensions Ignored:
  No extensions ignored.

Extensions Removed:
  Feature Disabled.

Extensions Added:
  beautify v1.5.0
  bootstrap-snippets-vscode v0.3.0
  bootstrap-v4-snippets v1.1.3
  c-cpp-compile-run v1.0.11
  code-runner v0.11.0
  code-settings-sync v3.4.3
  code-spell-checker v1.9.0
  CppSnippets v0.0.14
  cpptools v0.30.0-insiders2
  debugger-for-chrome v4.12.9
  docker-compose v0.3.5
  docker-explorer v0.1.7
  es7-react-js-snippets v2.8.3
  globalsymbolscope v0.0.2
  go v0.16.1
  gtags v0.0.2
  indent-rainbow v7.4.0
  java v0.65.0
  JavaScriptSnippets v1.8.0
  jshint v0.10.21
  json v1.0.4
  LiveServer v5.6.1
  mssql v1.9.0
  node-module-intellisense v1.5.0
  nodejs-extension-pack v0.1.9
  npm-intellisense v1.3.0
  open-in-browser v2.0.0
  path-intellisense v2.2.1
  php-debug v1.13.0
  php-intellisense v2.3.14
  phpcs v1.0.5
  prettier-vscode v5.1.3
  python v2020.8.101144
  react-native-react-redux v2.0.4
  search-node-modules v1.3.0
  sqltools v0.22.11
  vetur v0.26.1
  vscode-apache v1.2.0
  vscode-clang v0.2.3
  vscode-css-peek v4.0.0
  vscode-custom-css v3.0.10
  vscode-database v2.2.3
  vscode-docker v1.4.1
  vscode-eslint v2.1.8
  vscode-exec-node v0.5.3
  vscode-gutter-preview v0.26.2
  vscode-html-css v0.2.3
  vscode-icons v10.2.0
  vscode-intelephense-client v1.5.3
  vscode-java-debug v0.27.1
  vscode-java-dependency v0.11.0
  vscode-java-pack v0.10.0
  vscode-java-test v0.24.0
  vscode-language-pack-zh-hans v1.48.3
  vscode-maven v0.24.0
  vscode-ngrx-uml v1.0.2
  vscode-npm-script v0.3.13
  vscode-qt-for-python v0.4.2
  vscode-react-native v0.17.0
  vscode-typescript-tslint-plugin v1.2.3
  vscode-yaml v0.9.1
  vscodeintellicode v1.2.10
  xml v2.5.1
--------------------
Done.