typescript 中不能只声明变量？

Question

interface Place{
  title: string,
  location: string
}

interface CommunityObj{
  currentLocatin: string,
  hasFound: number,
  list?: Place[]
}

let place:CommunityObj;
place.currentLocatin= "wdf";
place.hasFound = 1;
place.list = [{title:'sdf', location:"sdf"}];

console.log(place);

---

interface Place{
  title: string,
  location: string
}

class CommunityClass{
  currentLocation:string;
  hasFound:number;
  list?: Place[]
}

let place = new CommunityClass();
place.currentLocation= "wdf";
place.hasFound = 1;
place.list.push({title:'sdf', location:"sdf"});

console.log(place);

还是有错误

Answer 1

TypeScript 的所有类型申明在转译成 JavaScript 的时候都会被去掉。所以 let place:CommunityObj; 实际上就是 let place;，这里并没有赋值，所以是 undefined。

OK，你发现了这个问题，所以用 let place = new CommunityClass(); 来解决了，这没问题。

然后后面用到 place.list 也是 undefined，原因类似。因为

class CommunityClass{
  // ....
  list?: Place[]
}

这里只是申明了 CommunityClass 类中有一个类型为 Place[] | undefined 的 list，并没有赋值。

顺序提一下，这里少了个分号。每个申明后面都需要一个分号

你可以在使用之前给它赋个值，比如

place.list = [];

更好的做法是在定义类属性的时候给它赋初值

class CommunityClass{
  // ......
  list?: Place[] = [];
}

Answer 2

你声明的place是个类型而不是个变量。你不能对一个类型进行赋值操作。

Answer 3

无论在 ts 还是 js 中都一样的，你都只声明不赋值，当然是 undefined 。无法进行操作，除非你赋初始值。

Answer 4

let place:CommunityObj; //只是声明变量的类型，并未对变量设置初始值

上面代码转成ES 5代码是

var place;

建议你自己手动尝试一下，把上述代码转换成ES 5的代码，这样就可以很清楚知道问题的原因。此外，在学习TS语法时，也可以查看它编译后的ES 5代码，这样会比较好理解哈。

TypeScript Playground线上地址