面向 Java/C# 程序员的 TypeScript

对于习惯于使用其他静态类型语言(例如 C# 和 Java)的程序员来说,TypeScript 是一个流行的选择。

TypeScript 的类型系统提供了许多相同的好处,例如更好的代码完成、更早的错误检测以及程序各部分之间更清晰的通信。虽然 TypeScript 为这些开发人员提供了许多熟悉的功能,但值得回头看看 JavaScript(以及 TypeScript)与传统 OOP 语言有何不同。了解这些差异将帮助您编写更好的 JavaScript 代码,并避免直接从 C#/Java 转到 TypeScript 的程序员可能掉入的常见陷阱。

共同学习 JavaScript

如果您已经熟悉 JavaScript 但主要是 Java 或 C# 程序员,则此介绍性页面可以帮助解释您可能容易陷入的一些常见误解和陷阱。TypeScript 建模类型的一些方式与 Java 或 C# 完全不同,在学习 TypeScript 时记住这些很重要。

如果您是 Java 或 C# 程序员,一般来说是 JavaScript 的新手,我们建议您先学习一些没有类型的 JavaScript,以了解 JavaScript 的运行时行为。因为 TypeScript 不会改变代码的运行方式,所以您仍然必须了解 JavaScript 的工作原理才能编写真正执行某些操作的代码!

重要的是要记住 TypeScript 使用与 JavaScript 相同的运行时,因此关于如何完成特定运行时行为(将字符串转换为数字、显示警报、将文件写入磁盘等)的任何资源都将始终同样适用于 TypeScript程序。不要将自己局限于特定于 TypeScript 的资源!

反思类

X09qByPNqc3dVahkQtplGw8VrQ1ofl1fy7k2QieO+XeUggh/GZAZOEhdLSbbqc+mzh69YhKVEx8npVSvga0VWOxMXB3RTPWZ9fXd+Zq28La/NTMc9hqQrCWgECEGKGWsAwpS4LO7T6eRBgHo5+R0jI5/zhcEj4+Ib3/IQJYTciVm1N0VvNfsC5EuV8RTHTyDloRlcYRRZoRikJANd0uViA5ZlAEbDDAnlRgW8KGB2rBc0gvQoAjdur7p2gixki+/FQ594UopMJj0PHRuy/vHd2qeHQFxOXp9CrnS7p0e+Zf4Wcii0IDYCRl1/8T/p/J6UwY/pdwtn02s/X9X5UshGnQWZbOllEf6sQmDCTtXpJNRSYjLe+dfxWl0NXGyh/2asEIC/dlGaSHh2l+Mvb097+UlzptU8P2Zk8xEGALqxj0=

释放函数和数据

qUZwuh2DonJSpDveVIF5VnPAJd9O86Djh3y9bu4z9geZj881i0QmQlH6lUfeQPLBKqEivJ1k1Jo4YK0+9S0p6WJoaa58CEOp1oa77YncOu1gZSdBejQl+rpezqGnbLPSUDAivntlyCUELXTx2vFPdKOzImg00kt9/OqWWDhQiEGKn+Yo6pIRHUlz+DI0IOYpz878zzXF/YWRpZMNDov8B15kXDyzQIehw0SUO2rz7EZqcvn0ZvcfxyNwNBZsLANbK3+Wv7nty7oZKOKdgN57fDxc1GPPXJb2BAjIX+zxLIkUBzLrEGDAxNB+C9+hHZzm99YU6WGuNOeLreZCjzKY1DP3t6XrqiOmHIZbH5pDwLWAkXvZ7dtg2CvvoeG4xYtGrbi4QDeo+86j0d6CtXqyxmbpujiAGM7tsoDTTfT6eBmJEiSiL/y5rTVZMmwzey4o8lyFHsE9SUDVaxSiyZp1tg==

静态类

QfoigOO5iMXA+66H9uEZGzIXP9oTFUbOPesKaBkg7BejwddivE/lxvajnFOVz+nSENAxeWrzcZFETw0bsDNhmu7BjHEdZmEFNNqXzgrsu+pNvJ96bbRfQ2vsAPP03PXn3SLjJ4Q9tcrxrGzkisqoCQ==

TypeScript 中的 OOP

MXsOX6SgFGL3WHaV8foe1VGqIRioyp2SgEfoZ0zxti9Is/zKw9vsQJiChp+Hu63z0OTgNNqeiw5HioFwlHo765A8bc4yZAkbSRsGQ/DF+ub+Toqj81jglqUfqp6fje4nS4skDoT/uZ3+YdDUVuJ7eLTUt49X06+u2meD82CkAnXSrMyy3KsdQmVLLcUlKdiGv6D+FsaGhLGV0jyJp+vY+PhRzgLWkgQ/884Ei47hR5/W8hVD0IQQYVFthqMGnyPFY8c+/jztnbKY1fLTNKLwav5cNsDK5JAEhHzHomVdw14Nh4q0fAq3NgTvFm8zT0cAgj8s5sRmdfq4KoKoC8oUn7D2IBtA2nLtGJLF9lAxn3s6YHOXDpTWMnTp+ORYHN1E

37bDcQc1B19kgOnhsKqPI1dmHindn6cAbigraZolCyeWhlXACjBOwKZ4kS+WkiwW

反思类型

XHluhmpsL/DmShiWWEWMCQhadFiD+TYF1KkRS11Dy0tG/OyT1FD7J5KmnR7zX8qHtuTnp+zMF5i8FWTf8WxyWC2Vno85bVRwPoTYS+ne0Qx3xy75iXO5+Rg54uJiOit0B2q+OW+xcDN3sF4gyDq+Iw==

名义具体化的类型系统

Am9iwE6w2jYpXhXGduLjPEjlRg026s2Z1dddIJlcd32kqIf+RsnQQUHu2UIcO4aZLiDthj5CUVzgb2mG4dKtgnZYBRHqKmHziqFqpdxWKV2jY0Oxt+4vukajDAU+KLnlwrxDPm891W7u2rIzwRmD4lqKSHoKMbGe+3gGFADIaAWH2/qWmJN5UBGI3RuZ4qhJBS6oUtSAPIzgbJ+/q0sfsoob0N3/iuwKEGGYP8IJ9LT6Nt1ETExtcr2k744R0c+qmlk4Xbb21l8uZL7oemZy8FeMBV+Exv3Z4dGip32XCaS313vhcvbTHgk0R8Ko3ik9qGaeIoFi2rgGWz4A3NkMbTdsYjZ/X/waFfoJ+UsN8+T3vUXEgRj454MCMOsFRZigFaOxP8FciBM1V2fUdiEiU8fO9vDQcoKwhpMpoS+ANd4hdqu2xzSbdxrH4na2TaBZUe8avFPHZ4q0Z4RR7YV9euf1XUmbYzaY3Ra/UMZ2Yh4KecocPNUpkoVkVjSqpZp9XZOv/g2GzPbfV89RiOlKzMAHwZdZY0XsHo/aXxMaVgpaNX7hu23qzor0uaF+BXHqOCS63vbbWEDvYU2MycFqIrLRjk8wpq0ZscxpxSA1Jg84iNOh1PT8KzOzR3OxDPXy

f7VrSn5DIva6zYiCM1JHb9jN5fyIPjN+hHy9LY9t80NaQcWiLYpfJK7cDZNJavjs1HtpVBZWnrdixRXzpXESz0cQ6+ivVXv0CPzuTtqesvxROMEP1ssLmdNCRJT1wDXERLcBVg7p7+vcvvL4OLNkjNiwAbof0+gMERKqOiRe0kVn4CNu5+gWJoMkimKoWxyY4YMZywyX9I4ceY3wUu6VPTOX2Mw8xDuSlQMvkmBJoS0=

作为集合的类型

Am9iwE6w2jYpXhXGduLjPGkgfSlOrrH7O1eOWAgiSl2BKRodBxvuSpturzoajf5qOavOPStcZ4vVmJPcn1xg4uJvX9GEwNUoD3y1BlsEujuvn0sBq7KVVZA/ibCRIw47MWHofNVz1HID+6PSt/qKGFAOADbEyfB2+9QgiJkaZlY=

cJyouydKpbX5djTq54DRXbb3WVp5kP2kZuBT9RnR++yg1RgrCIVUfPhhIdAtvsoZAaKGYP4comYk7UIvrEjBBxMZcRxi6MX2o7c7Q/RQiIWWLe+MQvxWIgDuNvVZWXmIdBDva9Oxdyxc+3bhZ4LZ+aT1UixnEaAg/1Mekn7oEQvOY7/RhyK9KO+x5O/jlUgg0GRNiiK9LYwHt1AKpYcWvg==

r6IWXZkoqkBbkZbqxLNMDLGRNpr6tCt7MnOHiYyMIiE/oIYZQbd+y0A9QK38nyfXyEaGJ/3felQcLo9tkhppkkjJUuJ8F6X4TybHO0XlmPwnQVg8DFXliW0PggwO/sDjxaQlJah2h6+7VCwzioWQ4OpGQLM1z/zPhroiMIpk3/m5qJ4e4PrzCOGBhPK823UQ23Yt+GlYuHsjSd/RsPKFseTK2NTWbl2kzp2ueCZ6mJONoc12CS5uRGqbyaRgjyBFHBznlu7DTkKi8hoJcv5dxIpA4O68a6nHtkhvjGpHjLk=

cJyouydKpbX5djTq54DRXUfmvbT6Vx7WjLiHeP6kDOu+1KDWhwGeeP1oyrF9pRf5ge1MbCIf3BOY0zJLydGog3Vy6WMtDKkOr44vTxMNT3cQPYy7olOx3rQKgjUjMO3oB5FqpfAONj8QDd47fj9XoTP3erW5H83ZrtkCoEDf0ni1P5SX0mNdU+WDk3OnsBxJx28husE2qOMukGFW+V6wVivszPhmJs9OWADShXSuNKQFsY2aSngCySjwCqWOngsuueZVt1dcawt+c7/ykF4ogkIbqbhK3eBJllUvDEDqQjjaScYO36lVf48Cpcz6RMLoOs9NZ6Qui/G3aNt3Zy13zWTZoxf8I8YuiMCuAY5lu/w=

R60efMksoMk4gDvOkIaMVFY6tlpEywgVga+geVKrzXyOxBh41pSj+mXC9LEGCkW+wQd+RRFCw/PzLOiH16oeltBFxQ8BZYg4xnlVQBnHMG3tdCpcTcMFGQfKbjZZi0CdH3UsPCGz8q2+bkfNgGr9bLpqWRIrd1Fp5BMMpWHLNt1j04xrF/mTRL7zP8gtLUh3

擦除的结构类型

cJyouydKpbX5djTq54DRXQDyWt+LkIqrTVIBUopbKlNSB806qY61Fu1X3wiG7g9Zm/Cm/JQfOY3dgRJyP/+mQt8VdpXzHn9jqJ4CUN4NM57baHA+9dToDgaQ/eD0ZKBFCQoXPy0nxEwTRECkWoHiq3BeOMPRraZASNc0+C2YoQi/FPMfhP5zQwW+C8VNjcDyJIrOJuZYp7B3jhw3vsB46MFVEepkueXamx3G10tYVA8FaJL7G+Ynt1mFYvccbyuHR+v8lqI9bbrI++9KAfsUjRRrkkbN/fooqj09COjuocc=

interface Pointlike {
  x: number;
  y: number;
}
interface Named {
  name: string;
}

function logPoint(point: Pointlike) {
  console.log("x = " + point.x + ", y = " + point.y);
}

function logName(x: Named) {
  console.log("Hello, " + x.name);
}

const obj = {
  x: 0,
  y: 0,
  name: "Origin",
};

logPoint(obj);
logName(obj);

Jme5G7zip7j5JqYShaMPv8kE1jL0xNoFEOcDoLBaOU0mXnH7mROGec+RPJML2DPVfHSShy45WsUxDm5nTAGehrOGz7RGZ70V4NSV57Sm9mrYYcbNwS7ULSH9wPS3JWfeT2fgaeybaEUSgoeCX6YT83g7zlJEz6a2/q5y9eb/7bGsYDFp46PSw/vh/Rcuuz24WpILhBEOrCZTtiVcuFd6316/DafGwDb5Gba6roqad0kD5LDrh63qMwS9CpzHdJCwj4yA8vdpJmMcyAJHns30hs+GNRHnb2PSj3GvCfgUtFgzOQlcK3U/lyEDIryTOp00WqZOgSfkj86TTam0RyDK4Ng8Fi+LrqN4iLhkmPAuUMLsZ6wVRJy10oLa697ZeUWPSBsju5WKaOz/cqWFORw+IiwMMmGIRISLph5bWaNR7xLBIqK3IVbIxKbIdd4iVfAj

Jme5G7zip7j5JqYShaMPv40N/dpaY+HD+X43zetUYzJkP8+G/f/5lEPmd9VulDuISvsHEq/ujtlO6BnrFzYNf1rJRrP4mlSuTg2aC9bpOiA/4QzrsQol9qogiej+zEXG/Nb2egibq7USBIdKexizSDizc8FfRCnFYwUVNekpPvJk4hScnfWb6qXQwelDzJ4QM/dJkNCKBKToCImSCB7Q8wrNUKJt/Y14HcYiDP+UEW9ka7b+LmjObIkUv3mmlgpDs5ComZIY9ZLiGZ2XmHHTKJtf8SFvapRIxZjK9LidEGg=

jH+TIo0ssessXLJ6Scae2/CBfi3rYIjeSlBLOb5ZxY186ZLLvLjLKIkioee5pZVEG8r7ZkgFWJuLwFFBZUEOpnUV6NTedDuEvLsbAsYCMqPU26PjQVw9BW2Wl/cTrtcDbrnbNteeYZbklMRV8Ga423ZJSY/V11930t4DsRIuJA4ckruVVFJh5nWXB8HvOy3L5KZl89j5Bm2Yy2vigOll2A==

结构类型的后果

KrtrBLCSBlP51L5LsfK69dWakmWfzhWlRLzH7gHnXFa5ClpbCkgpfN1C37fQrGD6ddJd5D4V3oV1ptK/2cqMqXBqhFVe/jRKz64ZIeJFVgk=

空类型

lOz4wCgQ2Pl6FlvaVZllTp01KK13HH6ZVlYixdZONqUxE67J0PCcYIvJhXqKp8P9

class Empty {}

function fn(arg: Empty) {
  // do something?
}

// No error, but this isn't an 'Empty' ?
fn({ k: 10 });

MlfcyGCpRMYvI5DRp7Ec+SOJe1oaY3pD2S8ap0QUAgCEPRdTJW2VtBZCKKluYr914SSpei/gNixlE5C1Wjbv0O3Mtor6V5VatWEa++Yz2wByfBZs00HaGbpn7TjzKPSzzmxov6lQ67glGR+ZmfcoyI5pHeH55Q7lmjc0TJUHO0hRFfpeJSx3+/rdqeZovalbOjTRvQV7GKEuo4qUpEOhl1G93DGCukaoie4QYarNob4jMMPK8PriNuUyLLK8sNcLvjmFo5ruxFT2Nz4iNI/Ap/yllrEIIjf9vXQpSDTwDAr1RPqmeESY0qSGVhAOdzynNIg4cqEfycOxlAAdKVHgh1t4q6lT1DVsJ+NjS7ZZY1aiLBx/QZD6WBCfnqGCeq8Zr0e4/FswNzgsYCwqMpKAY8C8ygKWAArhO/cV2LCD4FMn6tknpfoX6QvW6KMzCysqzx8B82UcR5rIs9TU0t0mcGrRMuxwvvOLANysibyCeh73lD3nYWQp1McUuAtYNlaYiDVoyEx2SYIjJllWdT2llgDGqqGrgLPfBBYYDh9mbK4=

OrSq6ayHJLLcbtYorSx9txelmh5oY0BMK+vSUFRhU0n5blN5IEQghO7wXBmtb5hfaCs+duAnSaBWGkmdNpFoTeqcfo7YEC5clkkv9YdH+A/GmJ+DODyV0zUS8ozc5kWck7oi7HPmYsvcZ7PGqFPh7HyAvyOdPV/SE6IcX8CG5/WF6JVLnKKl/Y6b57uJvbjulPUXBp830dHhV5TAKlrBxITI3ZkCN9YBPDnKLf4ejgaUdb6b2L64b8aKUbFkMko0oF8ouwqQniOOqYW+fGu04ygeiNL5WPk+4ffXqBKw1oWZ5PbSRZYQBf2fNaTPVx4xUEMReGG7qYNGZGgueLBcK/7d8BZ88iSuqpuFFyMM2G2vRiLjjmQhYmwaY6gKedImxakHS3PHlbnbd8M8pb4+hzl+jeKCIocVf7hqa7rbyLN2lipvgInDW5Y1OCoKhNIz

相同类型

YvD/3Ctr3fDXP/EF23MxfarijIRsjCJ+m1v9etyFg4vHDjnnbJOVTwf1CcGnsXOPtTE8okJ2HVkJBGOVI052VA==

class Car {
  drive() {
    // hit the gas
  }
}
class Golfer {
  drive() {
    // hit the ball far
  }
}

// No error?
let w: Car = new Golfer();

/JcAhnW8zfc66cf1Cbl3ydl3zGOzA+eXud8WJ2AiqumNWJ3xusqZiPAZN8g6vLC6xRIljNYpXDwKYPEuMGzmaPcs7cTc6t8cBGZf2fSC9V0ukRyVvS94J0iknAnaUVuiREvzxqzNQaIm2H+MhIDjBb4v056uOfwV0ZLLwulbecQz8qIPnu9vtCSjmVeCktbxUvfIaxTDMAXneA8jZKrXsF5Li6aRextPm43HBhh0fUaqd5/a3GtTZ9zyxjGcV+eH

54P/AHK+ck7a2Um79uHE/S1toPTDy0NwXyF6OnyjkiERrPnRyGU43mrrJsyTeVcvE/ssPX14vhV8VYiohelqYQ==

反射

qHIYXfloOK0SP+mAPd0fK5TGYZ5dtjStdrGXY4bPefyvaTlFr7NGqK9OozWZjHhhsdm8sN+5jB3PeozvJlOA+M0+tYIXqK4VnXoHvZt5+MY=

// C#
static void LogType<T>() {
    Console.WriteLine(typeof(T).Name);
}

1CjXyf/6QmlOrhINWxhW2NnKm73W4aivthSdS+iW2AHewEyM1VLr1pPLSR0NCB9Z+ps3HseBhd6QmOVUwSLdGW3v0TeZAOeU0vSwnN4LkiPl9KHY65MKrh8lBtHOsnQsgQiQzTVMgMpqJZT3MFeUbEqeFEZcRGhJRTnTTtPnFGU=

J2g+cbmMWzo8yswwAR/zRE4SXHx+fDjbadYKvH7DmmDEY5I/Mguqnk17402qlzxwMK6THH0YK/IfxyOk1QkEl4ZkMdmwd8twdP4CYH7bu5EEN5IWNVy5W0tqpS0g0BT5HBsHZtwF7ajQXMXCa9Dx+G5OxHjKDV6UWfAHcmsWFolfzX6fvbcBEVZ+ycVcaV2yQ17MZalcvzLLzoFPI6kuZ4F054d1EIU9rIOK4v37f+gOPa9FSfnJQcSw+FkeMlva5PhSWVybFMS5mhP/+G5xVMT21l84csUz2bfBLiRctiw3YC65omrubRkW09NxMGpyvEIEP34y80/BCD1GG6ZgNbg5MGxzklY+MrAYgEaBBm1DDzood5H5UfAowgIcNOJ9iDqPtJy07ZcN1dUMVbfrnTdEmCIrs0dPlhSlb8Wx0ZQ=

下一步

3yCX1pfU7gmc9RFsoCa18HN2O474DYJOGjS0z5QkD1wcDJCvJwEdhQ3j9Ce+j3bI+XeMfVBj/8vchZSFBvxJA4l2VvWCqknK7ab+FUQ21a2JX2jcIeRcds8NwfRURq4B9Vc3TyIQj2j9E7pkMYiRJg==

    hC6L69CHntlnheG6ccG4yIrZH/Z84QaBSsVQw9kx/Or5fdJIe6PJ9M0Ul6RNxynuFOfeSctOdRO6sfAdy6CGVjniVy8pJliskcWBSqwJ+Fi4kTQaObyA1MJD4iJIy5KdLglqEEuXpM7AleqC1lpY/vnTRT1O6siDxz3i8+nJovyXM2V6v7V9ffoOFI8ZFGXXOp9Y0ptK7lRjcwad+5zcnP3GuHsNQUARvXaD0oKLDXkSGmDkhZqClkRRc36N5zHe