JavaScript 的升级版 TypeScript 已日益成为开发世界全新的演变里程碑。立足于 JavaScript 的优雅灵活与 TypeScript 的强类型体系，本教程旨在助您铸就极致的开发力量。

我们的 TypeScript 系列教程将自始至终地引导你掌握 TypeScript 的各种方面，与您一起，宏观理解 JavaScript 世界、深入钻研 TypeScript 规则与逻辑，探索现代前端架构的无限可能性。

无论你是初学乍练，还是已有一定基础，本教程都将按需调整深度和广度，带你领略 TypeScript 的逻辑美感和规则魅力。我们将从概述 TypeScript 的基础特性开始，逐步涵盖完整的类型系统，深入掌握接口、类和模块，直至探索 TypeScript 联合 TypeScript 工具链的最佳实践。

严谨的理论讲解，生动的实例分析，尽在本教程。不论是函数式编程，（FP）还是面向对象编程（OOP），所有首要概念与理论都会得到清晰的解读和实践落地。同时，我们的教程连接日常开发问题，从实际角度出发，教会你解决问题，胜于只懂理论。

让我们一同启航，感受 TypeScript 的鲜明特点和强大潜力，为你的前端旅程增添一份精确和强大的工具！编程的世界正在等待你的探索。

TypeScript

在TypeScript中，如果我们想要向`window`对象添加一个新的属性，我们需要扩展`Window`接口，并告知TypeScript我们正在添加的类型。由于`window`是全局对象，TypeScript需要知道属性的类型以确保类型安全。这可以通过声明合并来完成。

这里是一个例子，展示如何向`window`对象添加名为`myNewProperty`的新属性：

```typescript
// 首先，声明合并来扩展现有的Window接口
interface Window {
  myNewProperty: string;
}

// 然后，可以安全地向window添加新属性
window.myNewProperty = "Hello, World!";

// 使用该属性时，TypeScript会知道其类型
console.log(window.myNewProperty); // 输出："Hello, World!"
```

在这个例子中，我们首先通过声明一个同名的`Window`接口来扩展全局的`Window`接口。这里的关键是使用`interface`这个关键字，而不是用`type`。声明合并允许我们安全地添加`myNewProperty`属性，而不会破坏`window`对象上的其他属性或方法的类型定义。

现在，TypeScript知道`window`对象上存在一个名为`myNewProperty`的属性，并且它的类型是`string`。这样，当我们给`window.myNewProperty`赋值时，TypeScript将允许任何字符串类型的值，并在我们尝试赋予不兼容的类型时提供错误警告。

还需要注意的是，在实际的前端项目中直接修改`window`对象并不是一个好的做法，因为这可能会造成全局状态污染，很难追踪和维护。通常，我们应该尽量避免向全局作用域添加额外的状态或功能，除非真的有必要这样做。

I just found the answer to this in [another Stack Overflow question's answer](https://stackoverflow.com/a/12703866/31308).

    declare global {
        interface Window { MyNamespace: any; }
    }
    
    window.MyNamespace = window.MyNamespace || {};
    

Basically, you need to extend the existing `window` interface to tell it about your new property.

To keep it dynamic, just use:

    (<any>window).MyNamespace
    

Note that this may not work with TSX because the compiler might think that the `<any>` is a TSX element. Check out [this answer](https://stackoverflow.com/a/38964459/1250319) for type assertion that is compatible with TSX.

Using Svelte or TSX? None of the other answers were working for me.

Here's what I did:

    (window as any).MyNamespace

_**As of TypeScript ^3.4.3, this solution no longer works**_

Or...

you can just type:

    window['MyNamespace']
    

And you won’t get a compile error and it works the same as typing `window.MyNamespace`.

Globals are "evil" :) I think the best way to also have the portability is:

First you export the interface: (for example, _./custom.window.ts_)

    export interface CustomWindow extends Window {
        customAttribute: any;
    }
    

Second, you import

    import {CustomWindow} from './custom.window.ts';
    

Third, cast the global variable window with CustomWindow:

    declare let window: CustomWindow;
    

In this way you also don't have a red line in a different IDE if you use it with existent attributes of the _window_ object, so at the end try:

    window.customAttribute = 'works';
    window.location.href = '/works';
    

Tested with TypeScript 2.4.x and newest!

在 TypeScript 中，你通常不应该直接向 `window` 对象添加新的属性，因为这样做会破坏全局作用域的安全性和可预测性。但是，如果你确实需要这样做（例如，为了与第三方库集成），你可以通过扩展 `Window` 接口来显式声明新属性。

下面是一个例子，展示了如何在 TypeScript 中给 `window` 对象添加一个名为 `myCustomProperty` 的新属性：

```typescript
// 首先，使用 TypeScript 的声明合并特性扩展全局 Window 接口
declare global {
  interface Window {
    myCustomProperty: string;
  }
}

// 现在你可以安全地设置 window 的新属性
window.myCustomProperty = 'some value';

// 也可以读取该属性
console.log(window.myCustomProperty);
```

在这个例子中，我们首先使用 `declare global` 语句来扩展全局作用域中的 `Window` 接口。然后，我们声明了 `myCustomProperty` 为 `string` 类型的属性。这样 TypeScript 编译器就知道 `window` 对象上存在这个新属性，并且知道它的类型。这允许你在代码的其他部分安全地使用 `window.myCustomProperty` 而不会得到类型错误。

请注意，如果你正在一个模块环境中工作（即任何包含顶级 import 或 export 声明的文件），你需要将 `declare global` 包装在一个模块声明中，否则它不会被视为全局声明。例如：

```typescript
export {}; // 这个文件现在是一个模块

declare global {
  interface Window {
    myCustomProperty: string;
  }
}

window.myCustomProperty = 'some value';
```

在这里，`export {}` 把文件转变成了一个模块，允许我们使用 `declare global` 来做全局的声明。如果你不包括 `export {}`，那么 `declare global` 会引发一个错误，因为 TypeScript 会认为你正在试图在模块作用域中声明一个全局变量。

在TypeScript中，向`window`对象添加新属性需要两个步骤：

1. **扩展`Window`接口**：由于TypeScript使用结构类型系统，我们可以通过声明合并来扩展现有的类型定义。对于`window`对象，我们需要扩展全局`Window`接口。

2. **设置属性**：在扩展了接口之后，我们就可以像在JavaScript中一样向`window`对象添加属性。

下面是一个如何向`window`对象添加新属性的例子：

```typescript
// Step 1: Extend the Window interface with the new property
interface Window {
  myCustomProperty: string;
}

// Step 2: Add the property to the window object
window.myCustomProperty = "This is a custom property on the window object";

console.log(window.myCustomProperty); // 输出: This is a custom property on the window object
```

在上面的例子中，我们首先扩展了`Window`接口来包含一个名为`myCustomProperty`的字符串属性。然后，我们实际上为`window`对象设置了这个属性。

重要的是要注意，这样的操作不是最佳实践，因为直接向全局对象添加属性会导致全局命名空间的污染。在实际的TypeScript项目中，我们通常会避免这么做，除非在某些特殊情况下确实需要，比如在进行polyfill或者与第三方库集成时。

此外，如果你的TypeScript编译选项中设置了`strict`模式或者`noImplicitAny`为`true`，你可能还需要确保对`window`对象的扩展是在正确的作用域中完成的，例如在一个全局的`.d.ts`文件中，这样才不会影响其他文件中的类型检查。

Typescript 如何在显式的设置 window 的新属性？

在TypeScript中，动态地为对象分配属性可以通过几种方式来实现，包括索引签名、使用`Object.assign`方法，或者使用扩展操作符。下面我将分别解释每种方法，并提供示例。

### 1. 索引签名
如果你想要一个对象能够接受任意数量的属性，你可以在TypeScript中使用索引签名(index signature)。索引签名的写法就是在接口中使用`[key: T]: U`的形式，其中`T`通常是`string`或`number`，`U`则是任何类型，表示对象的属性值的类型。

```typescript
interface DynamicObject {
  [key: string]: any;
}

const obj: DynamicObject = {};
obj.dynamicProperty = 'value';
```

在这个例子中，`DynamicObject`接口允许你给`obj`对象分配任何字符串属性，其值可以是任何类型。

### 2. 使用`Object.assign`
`Object.assign`方法可以用来将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。

```typescript
const obj: { [key: string]: any } = {};

Object.assign(obj, {
  dynamicProperty: 'value',
  anotherProperty: 123,
});
```

在这个例子中，`Object.assign`用于向`obj`添加`dynamicProperty`和`anotherProperty`属性。

### 3. 使用扩展操作符（Spread Operator）
扩展操作符可以用于复制对象的属性。这通常用在对象字面量中，当你想要在创建新对象时添加额外属性。

```typescript
let obj: { [key: string]: any } = {};

obj = {
  ...obj,
  dynamicProperty: 'value',
};
```

在这个例子中，我们创建了一个新对象，它具有`obj`原来的所有属性，并添加了一个名为`dynamicProperty`的新属性。

### 动态属性名
除了上述几种方法之外，如果你想动态地定义属性的名字，你可以使用计算属性名(computed property names)。

```typescript
const propName = 'dynamicProperty';
const obj: { [key: string]: any } = {};

obj[propName] = 'value';
```

在这个例子中，`propName`变量的值被用作对象`obj`的属性名。

以上就是在TypeScript中为对象动态分配属性的几种方式，每种方法都可以根据不同的场景选择使用。### 4. 类型断言
在某些情况下，你可能需要对现有的对象进行操作，为其添加属性。在TypeScript中，如果你非常确信这样做不会导致运行时错误，可以使用类型断言(temporary type assertion)来绕过类型检查。

```typescript
interface BaseObject {
  baseProperty: string;
}

const obj = {} as BaseObject;
obj.baseProperty = 'base';
obj['dynamicProperty'] = 'dynamic value';
```

在这个例子中，我们首先声明了一个接口`BaseObject`，然后我们创建了一个空对象并断言它为`BaseObject`类型，然后我们为其添加了一个动态属性。这种方法应该慎用，因为它会绕过编译器的类型检查。

### 5. 映射类型
映射类型(Map Types)在TypeScript中也是一种强大的方式，可以用来动态地创建带有属性的对象类型。

```typescript
type DynamicKeys<T> = {
  [P in keyof T]: T[P];
};

interface KnownProps {
  fixedProperty: string;
}

type ExtendedObject = DynamicKeys<KnownProps & { [key: string]: any }>;

const obj: ExtendedObject = { fixedProperty: 'fixed' };
obj.dynamicProperty = 'dynamic value';
```

在这个例子中，我们定义了一个`DynamicKeys`映射类型，它将传入的类型`T`的每个属性映射到相同的类型。然后我们定义了一个`KnownProps`接口，最后我们创建了一个`ExtendedObject`类型，它结合了`KnownProps`和一个索引签名来允许动态属性。这样我们就可以在保留原有属性类型的同时，为对象添加任意的新属性。

### 6. 使用类型守卫
有时，你可能在一个已经定义好的对象类型上临时添加属性。为了保持类型安全，你可以使用类型守卫来检查属性是否存在，并在添加属性之前进行断言。

```typescript
interface BaseObject {
  baseProperty?: string;
}

const obj: BaseObject = {};

// 假设我们想要添加一个不确定是否已经存在的属性
if (!('dynamicProperty' in obj)) {
  // obj 现在被视为具有 dynamicProperty 属性的类型
  (obj as any).dynamicProperty = 'dynamic value'; // 使用 'any' 断言绕过类型系统
}
```

在这里，我们使用`in`操作符作为类型守卫，以确保我们不会覆盖对象上已经存在的属性。

### 小结
在实际应用中，你应该根据具体的需求和场景选择合适的方法。动态属性的引入可能会使得类型检查变得复杂，因此请务必在确保类型安全的前提下使用这些技术，并尽可能利用TypeScript的类型系统来维护良好的代码健壮性。

Index signatures
----------------

It is possible to denote `obj` as `any`, but that defeats the whole purpose of using typescript. `obj = {}` implies `obj` is an `Object`. Marking it as `any` makes no sense. To accomplish the desired consistency an interface could be defined as follows, using an [index signature](https://www.typescriptlang.org/docs/handbook/2/objects.html#index-signatures)

    interface LooseObject {
        [key: string]: any
    }
    
    var obj: LooseObject = {};
    

OR to make it compact:

    var obj: {[k: string]: any} = {};
    

`LooseObject` can accept fields with any string as key and `any` type as value.

    obj.prop = "value";
    obj.prop2 = 88;
    

The real elegance of this solution is that you can include typesafe fields in the interface.

    interface MyType {
        typesafeProp1?: number,
        requiredProp1: string,
        [key: string]: any
    }
    
    var obj: MyType ;
    obj = { requiredProp1: "foo"}; // valid
    obj = {} // error. 'requiredProp1' is missing
    obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number
    
    obj.prop = "value";
    obj.prop2 = 88;
    

`Record<Keys,Type>` utility type
--------------------------------

_Update (August 2020): @transang brought up the [`Record<Keys,Type>` utility type](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type) in comments_

> `Record<Keys,Type>` is a Utility type in typescript. It is a much cleaner alternative for key-value pairs where property-names are not known. It's worth noting that `Record<Keys,Type>` is a named alias to `{[k: Keys]: Type}` where `Keys` and `Type` are generics. IMO, this makes it worth mentioning here

For comparison,

    var obj: {[k: string]: any} = {};
    

becomes

    var obj: Record<string,any> = {}
    

`MyType` can now be defined by extending Record type

    interface MyType extends Record<string,any> {
        typesafeProp1?: number,
        requiredProp1: string,
    }
    

While this answers the Original question, the answer [here](https://stackoverflow.com/a/54445030/2605574) by @GreeneCreations might give another perspective on how to approach the problem.

This solution is useful when your object has Specific Type. Like when obtaining the object to other source.

    let user: User = new User();
    (user as any).otherProperty = 'hello';
    //user did not lose its type here.

Or all in one go:

      var obj:any = {}
      obj.prop = 5;

I tend to put `any` on the other side i.e. `var foo:IFoo = <any>{};` So something like this is still typesafe:

    interface IFoo{
        bar:string;
        baz:string;
        boo:string;     
    }
    
    // How I tend to intialize 
    var foo:IFoo = <any>{};
    
    foo.bar = "asdf";
    foo.baz = "boo";
    foo.boo = "boo";
    
    // the following is an error, 
    // so you haven't lost type safety
    foo.bar = 123; 
    

Alternatively you can mark these properties as optional:

    interface IFoo{
        bar?:string;
        baz?:string;
        boo?:string;    
    }
    
    // Now your simple initialization works
    var foo:IFoo = {};
    

[Try it online](http://www.typescriptlang.org/Playground/#src=interface%20IFoo%7B%0A%09bar?:string;%0A%09baz?:string;%0A%09boo?:string;%20%09%0A%7D%0A%0A//%20How%20I%20tend%20to%20intialize%20%0Avar%20foo:IFoo%20=%20%7B%7D;%0A)

Although the compiler complains it should still output it as you require. However, this will work.

    const s = {};
    s['prop'] = true;

如何在 TypeScript 中动态为对象分配属性？,在 TypeScript 中，你可以使用多种方法来动态地为对象分配属性。以下是几种不同的方法：

### 方法 1: 使用索引签名
如果你提前知道属性的类型，但不知道属性的名称，你可以使用索引签名来定义一个对象，这个对象可以接受任意名称的属性。

```typescript
// 定义一个索引类型
interface DynamicObject {
  [key: string]: any; // 可以使用 string, number, symbol
}

// 创建一个动态对象
const obj: DynamicObject = {};

// 动态添加属性
obj['newProperty'] = 'New Value';
obj.dynamicField = 123;

console.log(obj);
```

### 方法 2: 使用泛型和 keyof
如果你有一个特定的对象类型，并且想要添加或修改这个类型的属性，你可以使用泛型和 `keyof`。

```typescript
type KnownObject = {
  existingProperty: string;
};

function setProperty<T, K extends keyof any, V>(
  obj: T,
  key: K,
  value: V
): T & Record<K, V> {
  return {
    ...obj,
    [key]: value,
  };
}

const knownObj: KnownObject = { existingProperty: 'Hello' };

const updatedObj = setProperty(knownObj, 'dynamicProperty', 456);

console.log(updatedObj);
```

### 方法 3: 使用 Object.assign()
`Object.assign()` 方法可以用来复制一个或多个源对象的所有可枚举自有属性到目标对象，返回目标对象。

```typescript
const obj: {[key: string]: any} = {};

Object.assign(obj, { dynamicProperty: 'Dynamic' });

console.log(obj);
```

### 方法 4: 使用扩展运算符（Spread Operator）
扩展运算符可以用来将现有对象的属性复制到新对象中，并添加新的属性。

```typescript
const obj = {};

const newProperty = 'dynamic';
const newObj = {
  ...obj,
  [newProperty]: 'Value',
};

console.log(newObj);
```

### 总结
以上是在 TypeScript 中动态分配对象属性的几种方法。在实际使用时，需要根据你的具体需求来选择合适的方法。使用索引签名和 `Object.assign()` 通常更灵活，而使用泛型和 `keyof` 可以为类型安全提供更强的保障。

在TypeScript中，动态地为对象分配属性可以通过几种方式来实现，包括索引签名、使用`Object.assign`方法，或者使用扩展操作符。下面我将分别解释每种方法，并提供示例。

### 1. 索引签名
如果你想要一个对象能够接受任意数量的属性，你可以在TypeScript中使用索引签名(index signature)。索引签名的写法就是在接口中使用`[key: T]: U`的形式，其中`T`通常是`string`或`number`，`U`则是任何类型，表示对象的属性值的类型。

```typescript
interface DynamicObject {
  [key: string]: any;
}

const obj: DynamicObject = {};
obj.dynamicProperty = 'value';
```

在这个例子中，`DynamicObject`接口允许你给`obj`对象分配任何字符串属性，其值可以是任何类型。

### 2. 使用`Object.assign`
`Object.assign`方法可以用来将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。

```typescript
const obj: { [key: string]: any } = {};

Object.assign(obj, {
  dynamicProperty: 'value',
  anotherProperty: 123,
});
```

在这个例子中，`Object.assign`用于向`obj`添加`dynamicProperty`和`anotherProperty`属性。

### 3. 使用扩展操作符（Spread Operator）
扩展操作符可以用于复制对象的属性。这通常用在对象字面量中，当你想要在创建新对象时添加额外属性。

```typescript
let obj: { [key: string]: any } = {};

obj = {
  ...obj,
  dynamicProperty: 'value',
};
```

在这个例子中，我们创建了一个新对象，它具有`obj`原来的所有属性，并添加了一个名为`dynamicProperty`的新属性。

### 动态属性名
除了上述几种方法之外，如果你想动态地定义属性的名字，你可以使用计算属性名(computed property names)。

```typescript
const propName = 'dynamicProperty';
const obj: { [key: string]: any } = {};

obj[propName] = 'value';
```

在这个例子中，`propName`变量的值被用作对象`obj`的属性名。

以上就是在TypeScript中为对象动态分配属性的几种方式，每种方法都可以根据不同的场景选择使用。
### 4. 类型断言
在某些情况下，你可能需要对现有的对象进行操作，为其添加属性。在TypeScript中，如果你非常确信这样做不会导致运行时错误，可以使用类型断言(temporary type assertion)来绕过类型检查。

```typescript
interface BaseObject {
  baseProperty: string;
}

const obj = {} as BaseObject;
obj.baseProperty = 'base';
obj['dynamicProperty'] = 'dynamic value';
```

在这个例子中，我们首先声明了一个接口`BaseObject`，然后我们创建了一个空对象并断言它为`BaseObject`类型，然后我们为其添加了一个动态属性。这种方法应该慎用，因为它会绕过编译器的类型检查。

### 5. 映射类型
映射类型(Map Types)在TypeScript中也是一种强大的方式，可以用来动态地创建带有属性的对象类型。

```typescript
type DynamicKeys<T> = {
  [P in keyof T]: T[P];
};

interface KnownProps {
  fixedProperty: string;
}

type ExtendedObject = DynamicKeys<KnownProps & { [key: string]: any }>;

const obj: ExtendedObject = { fixedProperty: 'fixed' };
obj.dynamicProperty = 'dynamic value';
```

在这个例子中，我们定义了一个`DynamicKeys`映射类型，它将传入的类型`T`的每个属性映射到相同的类型。然后我们定义了一个`KnownProps`接口，最后我们创建了一个`ExtendedObject`类型，它结合了`KnownProps`和一个索引签名来允许动态属性。这样我们就可以在保留原有属性类型的同时，为对象添加任意的新属性。

### 6. 使用类型守卫
有时，你可能在一个已经定义好的对象类型上临时添加属性。为了保持类型安全，你可以使用类型守卫来检查属性是否存在，并在添加属性之前进行断言。

```typescript
interface BaseObject {
  baseProperty?: string;
}

const obj: BaseObject = {};

// 假设我们想要添加一个不确定是否已经存在的属性
if (!('dynamicProperty' in obj)) {
  // obj 现在被视为具有 dynamicProperty 属性的类型
  (obj as any).dynamicProperty = 'dynamic value'; // 使用 'any' 断言绕过类型系统
}
```

在这里，我们使用`in`操作符作为类型守卫，以确保我们不会覆盖对象上已经存在的属性。

### 小结
在实际应用中，你应该根据具体的需求和场景选择合适的方法。动态属性的引入可能会使得类型检查变得复杂，因此请务必在确保类型安全的前提下使用这些技术，并尽可能利用TypeScript的类型系统来维护良好的代码健壮性。

TypeScript相关问题

Typescript 如何在显式的设置 window 的新属性？

Typescript 如何为对象动态分配属性？