细数这些年被困扰过的 TS 问题开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

细数这些年被困扰过的 TS 问题

Property 'MyNamespace' does not exist on type 'Window & typeof globalThis'.(2339)

(window as any).MyNamespace = {};

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

/**
 * A window containing a DOM document; the document property 
 * points to the DOM document loaded in that window. 
interface Window extends EventTarget, AnimationFrameProvider, GlobalEventHandlers, 
  WindowEventHandlers, WindowLocalStorage, WindowOrWorkerGlobalScope, WindowSessionStorage {
    // 已省略大部分内容
    readonly devicePixelRatio: number;
    readonly document: Document;
    readonly top: Window;
    readonly window: Window & typeof globalThis;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, 
      options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof WindowEventMap>(type: K, 
      listener: (this: Window, ev: WindowEventMap[K]) => any, 
      options?: boolean | EventListenerOptions): void;
    [index: number]: Window;
}

let developer = {};
developer.name = "semlinker";

Property 'name' does not exist on type '{}'.(2339)

interface LooseObject {
  [key: string]: any
}

interface LooseObject {
  [key: string]: any
let developer: LooseObject = {};
developer.name = "semlinker";

interface Developer {
  name: string;
  age?: number;
  [key: string]: any
let developer: Developer = { name: "semlinker" };
developer.age = 30;
developer.city = "XiaMen";

// type Record<K extends string | number | symbol, T> = { [P in K]: T; }
interface Developer extends Record<string, any> {
  name: string;
  age?: number;
let developer: Developer = { name: "semlinker" };
developer.age = 30;
developer.city = "XiaMen";

function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  return value;
console.log(identity<Number, string>(68, "Semlinker"));

function identity <T, U>(value: T, message: U) : T {
  console.log(message);
  return value;
console.log(identity(68, "Semlinker"));

@Plugin({
  pluginName: 'Device',
  plugin: 'cordova-plugin-device',
  pluginRef: 'device',
  repo: 'https://github.com/apache/cordova-plugin-device',
  platforms: ['Android', 'Browser', 'iOS', 'macOS', 'Windows'],
@Injectable()
export class Device extends IonicNativePlugin {}

// https://github.com/ionic-team/ionic-native/blob/v3.x/src/%40ionic-native/core/decorators.ts
export function Plugin(config: PluginConfig): ClassDecorator {
  return function(cls: any) {
    // 把config对象中属性，作为静态属性添加到cls类上
    for (let prop in config) {
      cls[prop] = config[prop];
    cls['installed'] = function(printWarning?: boolean) {
      return !!getPlugin(config.pluginRef);
    // 省略其他内容
    return cls;
}

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) 
  => TFunction | void;

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
var Device = /** @class */ (function (_super) {
    __extends(Device, _super);
    function Device() {
        return _super !== null && _super.apply(this, arguments) || this;
    Device = __decorate([
        Plugin({
            pluginName: 'Device',
            plugin: 'cordova-plugin-device',
            pluginRef: 'device',
            repo: 'https://github.com/apache/cordova-plugin-device',
            platforms: ['Android', 'Browser', 'iOS', 'macOS', 'Windows'],
        Injectable()
    ], Device);
    return Device;
}(IonicNativePlugin));

const API_URL = new InjectionToken('apiUrl');
@Injectable()
export class HttpService {
  constructor(
    private httpClient: HttpClient,
    @Inject(API_URL) private apiUrl: string
}

function add(x, y) {
  return x + y;
add(1, 2); // 3
add("1", "2"); //"12"

Parameter 'x' implicitly has an 'any' type.
Parameter 'y' implicitly has an 'any' type.

type Combinable = string | number;

function add(a: Combinable, b: Combinable) {
  if (typeof a === 'string' || typeof b === 'string') {
    return a.toString() + b.toString();
  return a + b;
}

const result = add('semlinker', ' kakuqo');
result.split(' ');

Property 'split' does not exist on type 'Combinable'.
Property 'split' does not exist on type 'number'.

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: string, b: number): string;
function add(a: number, b: string): string;
function add(a: Combinable, b: Combinable) {
  // type Combinable = string | number;
  if (typeof a === 'string' || typeof b === 'string') {
    return a.toString() + b.toString();
  return a + b;
}

class Calculator {
  add(a: number, b: number): number;
  add(a: string, b: string): string;
  add(a: string, b: number): string;
  add(a: number, b: string): string;
  add(a: Combinable, b: Combinable) {
  if (typeof a === 'string' || typeof b === 'string') {
    return a.toString() + b.toString();
    return a + b;
const calculator = new Calculator();
const result = calculator.add('Semlinker', ' Kakuqo');

interface Point {
  x: number;
  y: number;
interface SetPoint {
  (x: number, y: number): void;
}

type Point = {
  x: number;
  y: number;
type SetPoint = (x: number, y: number) => void;

// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];

interface PartialPointX { x: number; }
interface Point extends PartialPointX { 
  y: number; 
}

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

interface Point {
  x: number;
  y: number;
class SomePoint implements Point {
  x = 1;
  y = 2;
type Point2 = {
  x: number;
  y: number;
class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
type PartialPoint = { x: number; } | { y: number; };
// A class can only implement an object type or 
// intersection of object types with statically known members.
class SomePartialPoint implements PartialPoint { // Error
  x = 1;
  y = 2;
}

interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };

// node_modules/typescript/lib/lib.es5.d.ts
interface ObjectConstructor {
  create(o: object | null): any;
  // ...
const proto = {};
Object.create(proto);     // OK
Object.create(null);      // OK
Object.create(undefined); // Error
Object.create(1337);      // Error
Object.create(true);      // Error
Object.create("oops");    // Error

// node_modules/typescript/lib/lib.es5.d.ts
interface Object {
  constructor: Function;
  toString(): string;
  toLocaleString(): string;
  valueOf(): Object;
  hasOwnProperty(v: PropertyKey): boolean;
  isPrototypeOf(v: Object): boolean;
  propertyIsEnumerable(v: PropertyKey): boolean;
}

// node_modules/typescript/lib/lib.es5.d.ts
interface ObjectConstructor {
  /** Invocation via `new` */
  new(value?: any): Object;
  /** Invocation via function calls */
  (value?: any): any;
  readonly prototype: Object;
  getPrototypeOf(o: any): any;
  // ···
declare var Object: ObjectConstructor;

// Type {}
const obj = {};
// Error: Property 'prop' does not exist on type '{}'.
obj.prop = "semlinker";

// Type {}
const obj = {};
// "[object Object]"
obj.toString();

enum NoYes {
}

enum NoYes {
assert.equal(NoYes.No, 0);
assert.equal(NoYes.Yes, 1);

enum NoYes {
  No = 0,
  Yes = 1,
}

enum NoYes {
  No = 'No',
  Yes = 'Yes',
assert.equal(NoYes.No, 'No');
assert.equal(NoYes.Yes, 'Yes');

"use strict";
var NoYes;
(function (NoYes) {
   NoYes[NoYes["No"] = 0] = "No";
   NoYes[NoYes["Yes"] = 1] = "Yes";
})(NoYes || (NoYes = {}));

"use strict";
var NoYes;
(function (NoYes) {
   NoYes["No"] = "No";
   NoYes["Yes"] = "Yes";
})(NoYes || (NoYes = {}));

const enum Fonum {
  a = 1,
  b = 2
let value: Fonum = 12; // Ok

let value: Fonum = 
  Fonum.a << Fonum.b << Fonum.a |  Fonum.a << Fonum.b; // 12

class Person {
  #name: string;
  constructor(name: string) {
    this.#name = name;
  greet() {
    console.log(`Hello, my name is ${this.#name}!`);
let semlinker = new Person("Semlinker");
semlinker.#name;
//     ~~~~~
// Property '#name' is not accessible outside class 'Person'
// because it has a private identifier.

class Person {
  constructor(private name: string){}
let person = new Person("Semlinker");
console.log(person.name);

Property 'name' is private and only accessible within class 'Person'.(2341)

console.log((person as any).name);

var Person = /** @class */ (function () {
    function Person(name) {
      this.name = name;
    return Person;
}());
var person = new Person("Semlinker");
console.log(person.name);

class Person {
  #name: string;
  constructor(name: string) {
    this.#name = name;
  greet() {
    console.log(`Hello, my name is ${this.#name}!`);
}

"use strict";
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) 
  || function (receiver, privateMap, value) {
    if (!privateMap.has(receiver)) {
      throw new TypeError("attempted to set private field on non-instance");
    privateMap.set(receiver, value);
    return value;
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) 
  || function (receiver, privateMap) {
    if (!privateMap.has(receiver)) {
      throw new TypeError("attempted to get private field on non-instance");
    return privateMap.get(receiver);
var _name;
class Person {
    constructor(name) {
      _name.set(this, void 0);
      __classPrivateFieldSet(this, _name, name);

细数这些年被困扰过的 TS 问题

细数这些年被困扰过的 TS 问题

一、如何在 window 对象上显式设置属性

二、如何为对象动态分配属性

三、如何理解泛型中的 <T>

四、如何理解装饰器的作用

五、如何理解函数重载的作用

5.1 可爱又可恨的联合类型

5.2 函数重载

六、interfaces 与 type 之间有什么区别

6.1 Objects/Functions

6.2 Other Types

6.3 Extend

6.4 Implements

6.5 Declaration merging

七、object, Object 和 {} 之间有什么区别

7.1 object 类型

7.2 Object 类型

7.3 {} 类型

八、数字枚举与字符串枚举之间有什么区别

8.1 数字枚举

8.2 字符串枚举

8.3 数字枚举 vs 字符串枚举

8.4 为数字枚举分配越界值

九、使用 # 定义的私有字段与 private 修饰符定义字段有什么区别