解决 cannot redeclare block-scoped variable 问题

cannot redeclare block-scoped variable

依照5分钟上手TypeScript，全局安装typescript，新建.ts文件main.ts，编译main.ts，得到main.js。

//main.ts
type IdDisplay = {
    id:string,
    display:string
}

const list:IdDisplay[] = [
    {
        id:"foo",
        display:"共和国勋章"
    },
    {
        id:"bar",
        display:"七一勋章"
    }
];

const fooIndex = list.map(item => item.id).indexOf("foo");
console.log(fooIndex);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//main.js
var list = [
    {
        id: "foo",
        display: "共和国勋章"
    },
    {
        id: "bar",
        display: "七一勋章"
    }
];
var fooIndex = list.map(function (item) { return item.id; }).indexOf("foo");
console.log(fooIndex);
1
2
3
4
5
6
7
8
9
10
11
12
13

我这边使用的是编辑器是vscode，编译完后，编译器报错：Cannot redeclare block-scoped variable ‘list’。

其实，main.ts中的代码并没有问题，只不过ts中声明的变量、函数等被放在全局作用域中，而在编译生成的main.js里，也有同样的一份变量名、函数，所以vscode会报错提示说"redeclare"。
针对上述问题，可以在main.ts中添加export {}，让typescript认为main.ts是一个模块，这样就避免报错了。

//main.ts
export {};
type IdDisplay = {
    id:string,
    display:string
}

const list:IdDisplay[] = [
    {
        id:"foo",
        display:"共和国勋章"
    },
    {
        id:"bar",
        display:"七一勋章"
    }
];

const fooIndex = list.map(item => item.id).indexOf("foo");
console.log(fooIndex);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

编译main.ts，得到main.js 。

"use strict";
exports.__esModule = true;
var list = [
    {
        id: "foo",
        display: "共和国勋章"
    },
    {
        id: "bar",
        display: "七一勋章"
    }
];
var fooIndex = list.map(function (item) { return item.id; }).indexOf("foo");
console.log(fooIndex);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

参考文章

5分钟上手typescript
解决typescript Cannot redeclare block-scoped variable