Some of the problems I encountered in open source projects from JS to TS

Time:2022-5-17

As early as two years ago, I pulled a branch of TS, but after a little attempt, I found a lot of excuses to give up. Recently, I was in a state of resignation. With plenty of time, I finally made up my mind to take a step closer to ts.

preparation

During this period, I first found some TS related information on the Internet, which was originally limited todemooftsImprove your skills slightly.In the process, I force myself to learn first and then do it. Although it’s hard not to write a line of code in the learning process, it saves a lot of time on the whole.

Independent framework

Open source projectGridManagerIs a nativejsCross framework implementation(jquery、react、vue2.x、angular1.x)Table component, so switchingtsThe framework features are not involved in the process of.

Problem summary and solution

JS file parsing error

For an existing project, it is difficult to switch completely at one time, so it is necessary to support the resolution of the original projectjsDocuments.

{
    "compilerOptions": {
         //Allow JavaScript files to be compiled
        "allowJs": true
    }
}

unavailableobject[key]mode

Just after adjusting the configuration, this category is the most full screen error reporting.

// tsconfig.json
{
    "compilerOptions": {
        //Open the configuration item suppressimplicitanyindexerrors
        "suppressImplicitAnyIndexErrors": true
    }
}

Cannot use decorator

It is mentioned in the relevant introduction that the decorator is an experimental existence in TS. although it is a pity, the good thing is that there are configuration items that can be enabled.

// tsconfig.js
{
    "compilerOptions": {
        "Experimentaldecorators": true, // enable experimental es decorators
    }
}

Webpack alias failed

The originally available aliases failed, resulting in a large number of import module path errors.

// webpack config
//The alias of the original webpack configuration is as follows, but it is invalid in the TS file
resolve: {
       Extensions: ['. JS','. Ts'], // add these suffixes when the requrie module cannot be found
       alias: {
           '@common': resolve('src/common'),
           '@jTool': resolve('src/jTool'),
           '@module': resolve('src/module')
       }
},
// tsconfig.js
{
    "compilerOptions": {
        //Configure the resolution path in paths
        "paths": {
            "@*": ["./src/*"]
        }
    }
}

The construction volume becomes larger in the transformation process

This is because TS loader performs Es5 conversion, and the original Babel optimization fails.

appointECMAScriptTarget version of

// tsconfig.js
{
    "compilerOptions": {
        //Set tsconfig The target in JSON is adjusted to ES6. If the feature of es2017 is used in the project, it needs to be changed to es2017.
        //After configuration, the TS file will no longer be responsible for converting ES6 to Es5 during parsing
        "target": "ES2017"
module
    }
}

Specify webpack loader:ts-loaderContinue after executionbabel-loader

// webpack loader
{
    test: /.tsx?$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader'
        },
        {
            loader: 'ts-loader'
        }
    ]
}

Karma startup error

Used by unit tests in the projectkarma-webpack, it also needs to be increasedts-loader

// karma-webpack loader
{
    test: /.tsx?$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader'
        },
        {
            loader: 'ts-loader'
        }
    ]
}

Exception export default error

only oneexport defaultBut it indicates that there are multipleexport default。 Error code (ts2528: a module cannot have multiple default exports.)
Solution:Reopen the file to solve the problem