TS-Node 体验

Posted 2020-10-31 chenhui7373

【给链接不赘述】【提醒坑】【想更简单学计算机必须会看懂英语】【win让你专注代码未来深入linux】【尽管文件恨多，但是我们不去dissect 是永远不会的】

https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

https://github.com/Microsoft/TypeScript-Node-Starter#typescript-node-starter

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/

 

【锦囊妙计】npm install 如果遇到问题，请使用npm doctor 

……………………………………………………………………

   启动 mongod

"C:\Program Files\MongoDB\Server\3.6\bin\mongod.exe" --dbpath "C:\Dev\mongodb\data"

……………………………………………………………………………………………………

npm run build == VSCODE快捷键ctrl+shift+b 

npm start == VSCODE快捷键 ctrl+shift+p 然后输入run task选择npm start
打开 http://localhost:3000

…………………………………………………………………………

=>跳过【Deploy 部署环节】

…………………………………………………………………………………………………………………………………………………………………………………………………………

项目结构，由于TS比较工程化，最主要的是【ts文件在src下，编译后在dist下】

Name	Description
.vscode	内建
dist	Contains the distributable (or output) from your TypeScript build. This is the code you ship
node_modules	Contains all your npm dependencies
src	Contains your source code that will be compiled to the dist dir
src/config	Passport authentication strategies and login middleware. Add other complex config code here
src/controllers	Controllers define functions that respond to various http requests
src/models	Models define Mongoose schemas that will be used in storing and retrieving data from MongoDB
src/public	Static assets that will be used client side
src/types	Holds .d.ts files not found on DefinitelyTyped. Covered more in this section
src/server.ts	程序入口
test	Contains your tests. Seperate from source because there is a different build process.
views	Views define how your app renders on the client. In this case we‘re using pug
.env.example	API keys, tokens, passwords, database URI. Clone this, but don‘t check it in to public repos.
.travis.yml	Used to configure Travis CI build
.copyStaticAssets.ts	Build script that copies images, fonts, and JS libs to the dist folder
jest.config.js	Used to configure Jest
package.json	File that contains npm dependencies as well as build scripts
tsconfig.json	Config settings for compiling server code written in TypeScript
tsconfig.tests.json	Config settings for compiling tests written in TypeScript
tslint.json	Config settings for TSLint code style checking

 

 …………………………………………………………………………………………………………………………………………………………………………

编译是可以配置的。tsconfig.json

    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,   //导入语法 import foo from "foo"
        "target": "es6",
        "noImplicitAny": true,　　　//【最佳实践】true打开的话对应我们要用任何的Library都需要.d.ts即使是空定义，放心可以下载。
        "moduleResolution": "node",
        "sourceMap": true,　　　　//debug用
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {　　　　　　//默认会去扫描node_modules下@types(.d.ts文件)，我们私有定义.d.ts不是下载来的要配置一下。
            "*": [
                "node_modules/*",
                "src/types/*"
            ]
        }
    },

"include": [　　//将需要编译的文件包含进来，也可以exclude掉
        "src/**/*"
    ]

 …………………………………………………………………………………………………………………………………………………………………………

构建，其中package.json有可供我们调用的命令，npm run <script-name>

Npm Script	Description
start	Does the same as ‘npm run serve‘. Can be invoked with npm start
build	Full build. Runs ALL build tasks (build-sass, build-ts, tslint, copy-static-assets)
serve	Runs node on dist/server.js which is the apps entry point
watch-node	Runs node with nodemon so the process restarts if it crashes. Used in the main watch task
watch	Runs all watch tasks (TypeScript, Sass, Node). Use this if you‘re not touching static assets.
test	Runs tests using Jest test runner
watch-test	Runs tests in watch mode
build-ts	Compiles all source .ts files to .js files in the dist folder
watch-ts	Same as build-ts but continuously watches .ts files and re-compiles when needed
build-sass	Compiles all .scss files to .css files
watch-sass	Same as build-sass but continuously watches .scss files and re-compiles when needed
tslint	Runs TSLint on project files
copy-static-assets	Calls script that copies JS libs, fonts, and images to dist directory
debug	Performs a full build and then serves the app in watch mode
serve-debug	Runs the app with the --inspect flag
watch-debug	The same as watch but includes the --inspect flag so you can attach a debugger

 …………………………………………………………………………………………………………………………………………………………………………

.d.ts 文件用来定义类型，这是因为不是所有js都有ts版本，通过这项定义，ts将帮助编辑器获得类型提示。

有些.d.ts甚至不需要我们操心，可以去下载 => https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

//.d.ts日常管理

1.当npm install包的时候，对应我们去下载.d.ts文件。

【下载DefinitelyTyped】npm install --save-dev @types/jquery    （务必加选项或者-D，因为只是编译期需要的依赖。）

2.下载不到，我们就要去tsconfig.json配置下path包含我们自己定义的.d.ts文件。

【自己定义.d.ts】参见 => https://github.com/Microsoft/dts-gen

如果没成功生成的话，需要【跳过.d.ts类型检查】直接在文件中写 declare module "<some-library>";//相当于空文件

然后可以继续一步一步改善（不能生成只好这样） http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

 …………………………………………………………………………………………………………………………………………………………………………