Project introduction

As TypeScript becomes more and more popular, there are more and more ways to learn the TypeScript language. I found a good introductory tutorial, Typescrip Ttutorial, After learning the TypeScript Tutorial, we wanted to translate it into Chinese for more people to learn, so the Chinese version of TypeScript Tutorial was born.

The current progress of this project is to complete the first phase of proofreading.

The project can be read online at TypeScript Tutorial Chinese, with comments added. You are welcome to make fun of it and submit MR sheets to help improve the quality of the project. Thank you.

directory

The nuggets version

  • Chinese version of TypeScript Tutorial – Project introduction
  • TypeScript Tutorial Chinese version – Section 0. preface
  • TypeScript Tutorial Chinese version – Section 1. An introduction to
  • TypeScript Tutorial Chinese version – Section 2. Basic types of
  • TypeScript Tutorial Chinese version – Section 3. Control flow statement
  • TypeScript Tutorial Chinese – Section 4. function
  • TypeScript Tutorial Chinese version – Section 5. class
  • TypeScript Tutorial Chinese version – Section 6. interface
  • TypeScript Tutorial Chinese version – Section 7. High-level types
  • TypeScript Tutorial Chinese version – Section 8. The generic
  • TypeScript Tutorial Chinese version – Section 9. The module
  • Chinese version of TypeScript Tutorial – Section 10.node.js

engineering

VuePress

This project is built based on VuePress, and you can get started quickly by referring to the official documentation. Here are some plug-ins and functions that you think are good. If you think the template of this project is good, you can fork it out as your own document template.

Back To Top plugin

Back To Top plugin

Use this plugin if you want to jump back to the top of the page when reading a long article at the bottom.

Medium – Zoom plug-in

Medium – Zoom plug-in

The main function of this plug-in is to click the picture in the document, you can enlarge the picture to the full screen view, have a better reading experience.

The comment function

Vuepress-plugin-comment, an official recommended comment plug-in, is used in combination with Gitalk. The official documents are very clear and can be configured and launched by themselves. An introductory guidance document will be written later.

Here are a few things to note:

  1. Gitalk is a modern comment component based on GitHub Issue and Preact, The unique ID of a Github Issue cannot exceed 50 characters. By default, the page URL is used. In many cases, an error occurs when the number of characters exceeds the limit. I use the title of the document as the unique identifier for this project.

  2. Plug-in is embedded into the page after the style is not compatible, can create a new docs /. Vuepress/styles/index styl file, the style of writing a custom (reference), as shown below:

#vuepress-plugin-comment {
  padding: 2rem 2.5 rem;
  max-width: 740px;
  margin: 0 auto;
}
Copy the code
  1. Might you receive an email from Github indicating that Client_secret has been exposed, which is an Issue Bug in the project? Expose Client_id and Client_secret? It’s been discussed. Don’t worry too much

Live2D kanban musume

VuePress integrates Live2D Kanban Niang

Mainly for cute ~

formatting

Prettier is used to make documentation and code look more comfortable.

Here is the configuration file for your project:

module.exports = {
  // A line of up to 80 characters
  printWidth: 80.// Indent with 2 Spaces
  tabWidth: 2.// Instead of indentation, use Spaces
  useTabs: false.// A semicolon is required at the end of the line
  semi: true.// Use single quotes
  singleQuote: true.// The key of the object is quoted only when necessary
  quoteProps: 'as-needed'.JSX uses double quotes instead of single quotes
  jsxSingleQuote: false.// There should be a comma at the end
  trailingComma: 'all'.// Spaces are required at the beginning and end of braces
  bracketSpacing: true.// JSX tag Angle brackets require line breaks
  jsxBracketSameLine: false.// Arrow functions with only one argument also need parentheses
  arrowParens: 'always'.// The range in which each file is formatted is the entire content of the file
  rangeStart: 0.rangeEnd: Infinity.// There is no need to write @prettier at the beginning of the file
  requirePragma: false.// There is no need to automatically insert @prettier at the beginning of a file
  insertPragma: false.// Use the default line folding standard
  proseWrap: 'preserve'.// Depending on the display style, HTML should be folded or not
  htmlWhitespaceSensitivity: 'css'.// Do not indent script and style in vue files
  vueIndentScriptAndStyle: false.// Use lf for line breaks
  endOfLine: 'lf'};Copy the code