TypeScript在使用中出现的问题记录

TypeScript

元组声明BUG

let list: [string, number] = ['hello', 123];
list.push('world'); // success
// 理论上是不可以给 list 添加任何元素的

setter, getter 编译需要支持 es5

# 编译成js文件便于执行
$ tsc app.ts
app.js

# 使用es5 的方式编译成js文件便于执行
$ tsc -t es5 app.ts
app.js
# 使用 node 执行js文件
$ node app.js

TypeScript 在 import 文件的时候提示文件不存在

// src/main.ts
import popup from './comoonents/popup/popup';
popup({
    })

然后启动 npm run serve 报错，./components/popup/popup 文件不存在。

原因是需要在 webpack.config.js 中添加一行配置：

moduel.exports = {
    
    mode: 'development',
    entry: './src/main.ts',
    output: {
    
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'    
    },
    devServer: {
    },
    resolve: {
    
        // 需要调整 import 文件的查找顺序，这样才能让 webapck 打包的时候找到 .ts 文件的模块
        extensions: ['.ts', '.js', '.json']    
    },
    module: {
    
        rules: [
            {
    
                test: /\.ts$/,
                use: ['ts-loader'],
                // 屏蔽 node_modules 中的 .ts 文件
                exclude: /node_modules/
            }        
        ]    
    }
}