Why integrate TypeScript development

Now in 2019, TypeScript is becoming more popular as more people realize the benefits of TypeScript and keep writing straight.

So what are the benefits of developing projects in TypeScript?

  • Reduce bugs
  • Reduce maintenance costs
  • Good interface readability
  • Improve programmer abstraction

These reasons, there should be a lot of people will oppose, everyone thinks that using JS to write a project, also can achieve the above reasons, others can not do that is the writer can not, I agree with this cognition, but we need to consider the status quo.

  • It’s really hard to make sure that the code you’re writing is good all the time. For example, if you’re in a bad mood and you’re on a tight schedule, you may not even know the code you’re writing three months later.
  • Use some strong regulation or specification, you don’t write garbage code, such as limit the number of rows, a function of depth and comment and write documents, strengthen the review, the first two maybe can do it, by a later will need to spend more manpower, write code tired, review code are also tired, It could end up back where it started.
  • A rapid prototyping team, or the cooperation between departments, each person every team has its own set of specifications or thought, at this time of the communication cost is larger, if development projects together, it is difficult to guarantee the robustness of the project, especially the js code, freedom is very high, very test a person’s level.

This is the reality of most teams, the larger the project, the higher the maintenance cost, so why TypeScript can reduce the probability of these problems, or reduce the size of the problem.

The advantages of the TypeScript

  • Support for strong typing, default type checking, this alone can reduce unnecessary bugs, such as syntax errors, type conversion errors, write safer code.
  • Generics support. With generics, when we write common code, it’s very easy to know what each other needs, without having to look at the documentation, without having to ask each other, very convenient, right
  • Now the back end usually has a set of interface definition specifications, designed in a special IDL language, the front end generates the corresponding API call code according to these specifications, if the generated JS code, it is obviously not a complete description of the strong type definition of the back end, TypeScript can do this very well
  • Once you use TypeScript, it means that you provide interfaces with explicit type definitions. In this case, more active thinking is required, and over time abstraction will naturally improve. Of course you can use any, but if you use any, you should use JS instead. What TypeScript?

How to integrate?

If the project is new, there are two ways: one is vUE official tutorial, all the configuration is based on VUE-CLI family bucket to do, open the box can be used; One is a Microsoft tutorial, suitable for engineering teams with certain customization needs.

Here is the official vUE tutorial

  • The project is created when using the vue UI command. You can choose TypeScript directly.

  • Select command line when creating with vue create my-project-name

Vue official tutorial cn.vuejs.org/v2/guide/ty…

At present, the company uses vue-CLI construction projects, engineering files are provided by vUE by default, Microsoft will not introduce, interested can go to see

Microsoft official vue+ TS tutorial: github.com/Microsoft/T…

If the project already exists, you need to add additional TypeScript support. Vue also provides support for TypeScript, github.com/vuejs/vue-c…

vue add typescript
Copy the code

This command will automatically convert the JS project to TS, automatically adding the associated dependencies to the project’s package.json

Update vue-class-Component and vue-property-decorator. The default version is a bit lower

    "vue-class-component": "^ 7.0.2"."vue-property-decorator": "^ 8.1.0".Copy the code

After the upgrade, you are advised to modify the configuration of vue.config.js

const path = require("path");
 configureWebpack: config= > {
    config.resolve.modules.push(path.resolve(__dirname, "src"));
  }
Copy the code

Vue. Config. js provides SRC’s default alias => @, but vue3.0 is not very convenient to use @ in vS-code.

The pit of tread

1. Property ‘store’ does not exist on type ‘VueConstructor’

This error occurs because the store property is not defined under VueConstructor

// main.ts. Vue.store = store; .Copy the code

Now that we know why, we can modify the global VueConstructor

// shims-vue.d.ts
import Vue, { ComponentOptions } from "vue";
import { Store } from "vuex";

declare module "vue/types/vue" {
  interface VueConstructor {
    store: Store<any>; }}Copy the code

Compile again and find that there are no problems.

2. Error reporting for existing projects

There should be no problem if it is a brand new project according to the official generation, but for the existing project, there should be many lint rules inconsistent with the existing Lint rules due to historical reasons, resulting in errors. It is also troublesome to modify one by one, and some of them cannot be modified immediately, such as the following one

<! -- eslint-disable max-lines -->// The new Lint rule does not recognize this identifier....// Routing rules
component: {
       render: h= >(<keep-alive include="noticeIndex"> // JSX is not enabled, resulting in a lint error <router-view /> </keep-alive>)}Copy the code

There are also some historical js common functions, these may not pass the new Rules of Lint, to be corrected one by one is also troublesome, so how to solve the problem?

There are three ways

  • Modify lint rules, or modify files, one by one, depending on the complexity of the project, the older the project, the more time and labor costs, the less feasible
  • Simply discontinue @typescript-esLint /parser and stick with the default Lint rules, or rewrite the rules. This should not be a problem for those who are familiar with Lint rules
  • Modify the adaptation scope of existing Lint rules to limit the rules to VUE, ts and TSX use TSLint. Currently, our Lint rules are customized for the existing business of the company, so this method is more suitable for us. (ESLint, TSLint, Stylelint we customize our own libraries)

Go straight to code

// .eslintrc
"overrides": [{"files": ["*.vue"]."parserOptions": {
        "ecmaFeatures": {
          "jsx": true}}}]// tsconfig.json
"exclude": ["node_modules"."dist"."src/main.ts"]
Copy the code

** import(‘xxx.vue’) **

For specific errors, let’s look at the picture

The console also reports an error when running server

The console and IDE both reported errors, but this did not affect the page development, just a bunch of errors, it would not look good in the console, Google found that there is no particularly good solution, vue official has an issue, with // @ts-ignore identifier to ignore. However, this identifier can only be ignored one line at a time, which can be troublesome if there are a bunch of imports in the Router component.

Vue official Issue: Typescript: IDE Reports TS2307: Cannot find Module error for Vue Components imports

Follow the TypeScript @ts-Ignore clue to see if you can write an identifier once, as follows

@ts-ignore-start
@ts-ignore-end

@ts-ignore-all

@ts-ignore-file
Copy the code

This is an issue that is still under discussion. There are all suggestions on the issue. If you have time, you can follow the post, which is very interesting.

TypeScript official issue: @ts-Ignore for the Block Scope and imports

That’s all for the first post.

If you’re interested, you can read on

VUE router Refactoring for TypeScript integration (part 2)