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:
-
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.
-
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
- 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