TypeScript 入门
我希望当初学习 TypeScript 的方式就是这样：简短易懂。所以，如果你已经了解 JavaScript，那么这篇文章正适合你。
什么是 TypeScript？
如果你开发过很多 JavaScript 代码，你可能已经体会到它使用起来有些繁琐。在大型代码库中，你需要花费大量时间阅读代码，才能理解代码的功能以及新代码如何与现有代码交互。此外，错误只有在实际运行代码后才会出现。
因此，TypeScript 应运而生，其口号是“可扩展的 JavaScript”。TypeScript 代码会被编译成 JavaScript，然后像往常一样使用。TypeScript 的优势包括：
- 即时类型错误检测
- 更多自文档化代码
- 更好的 IDE 体验
- 提高代码的可读性和易理解性
TypeScript 实际上就是带有类型的 JavaScript。所以，即使你把文件扩展名从 .js 改成 .ts，代码仍然有效（类型 `any` 会被频繁使用）。因此，不要害怕 TypeScript，直接开始编写普通的 JavaScript 代码，然后在你觉得自然的地方声明类型即可。
我最喜欢的另一个优点是：JavaScript 存在特性断层，ES6 到 ES9 的新特性并非在所有浏览器或 Node 服务器上都可用。但 TypeScript 则不同，你可以使用最新的特性（例如类和箭头函数）编写代码，并指定目标版本为 ES3，这样代码会被编译成带有原型和普通函数的 JavaScript。（当然，这并非完全准确；如果你使用了 Set 和 includes() 等特性，则需要使用更新的 JavaScript 版本。）
设置
下载并打开一个集成开发环境（IDE）。我推荐 Visual Studio Code，但其他 IDE，例如 Sublime 和 Atom，也支持 TypeScript。
通过 npm 在您的计算机上安装 TypeScript。如果您尚未安装 npm，请下载 Node。在终端中运行以下命令。
npm install -g typescript
现在你可以手动编译 .ts 文件了。
tsc filename.ts
您已经创建了想要使用的 .js 文件。
但最好的方法是创建一个项目文件夹并运行初始化命令，像这样。
tsc --init
设置您的配置文件。查看一下，您就能了解它的作用。您可以在这里更改 ECMAScript 目标版本，以及编译后的 JavaScript 文件存放的位置。
现在创建以 .ts 为文件扩展名的文件。
要自动在保存时编译这些文件：
tsc -w
如果你使用像 webpack 这样的代码打包工具，设置可能会略有不同。
代码
TypeScript 中的类型注解用于记录函数或变量的预期契约。它通过冒号 (:) 后跟类型来实现。
let text: string = 'hello';
如果将数字赋值给变量 text，则会出错，因为 text 只有字符串才是有效类型。
让我们逐一了解所有类型。
//boolean
let bool: boolean = true;
//number
let num: number = 123;
//string
let text: text = 'hello';
//Array
//(two options)
let arr1: string[] = [];
let arr2: Array<string> = [];
//tuple
let tuple: [number, string, boolean] = [12, 'yes', false];
//enum
enum Color {Red, Blue}
let color: Color = Color.Blue;
//any
let anything: any = 'whatever';
//void
function do(): void{
console.log('no returns');
}
//null
let nothing1: null = null;
//undefined
let nothing2: undefined = undefined;
//never
//(types that never occurs. removing the while would give error)
const neverMethod = (): never => {
while(true);
console.log('never reached');
}
//object
let obj: object = {attr1: true, attr2: false};
//function
//(functions can be passed and returned)
function func(method: Function): Function{
method();
return method;
}
//interface
interface Options {
size: number;
readonly autodelete: boolean;
}
const opt: Options = {
size: 1,
autodelete: true
}
请注意，在 TypeScript 中，赋值变量时会自动推断类型。这是因为每次都指定类型很繁琐。因此，变量 thing 的类型为 string。
let thing = 'hello';
thing = 1; //error
但如果我们需要一个既可以是数字又是字符串的变量呢？我们可以将其类型设为 any，但更好的方法是指定多种类型。
let thing: string|number = 'hello';
thing = 1;
由于变量类型是自动推断的，我们通常不会在声明变量时指定类型。那么，什么时候需要指定类型呢？这对于参数类型和返回值类型非常有用。
//this function must return a string,
// because of : string after the param parenthesis
function greet(name: string, age: number): string {
return `Hi ${name} who is ${age} years.`;
}
const msg = greet('Gaute', 27);
//this funciton can't return any values
function greet(name: string, age: number): void {
console.log(`Hi ${name} who is ${age} years.`);
}
greet('Gaute', 27);
这样，未来的你和你的同事就能始终知道该函数需要哪些类型以及它将返回什么。
现在 TypeScript 要求我们的 greet 方法每次都必须传入两个参数。而在 JavaScript 中，我们可以传入零个或无限个参数。因此，TypeScript 引入了可选参数，可以在方法、类和接口中使用。如果省略参数，则变量将为 undefined。
function greet(name: string, age?: number): string {
let info = '';
if (age) {
info = `who is ${age} years.`;
}
return `Hi ${name} ${info}`;
}
//It's okay to don't pass age
const msg = greet('Gaute');
interface Dialog{
size: number,
title?: string
}
//It's okay to don't add title
const window: Dialog = {
size: 1
}
结论
这就是你需要知道的基础知识，或许也是你项目所需的全部知识。
文章来源：https://dev.to/gautemeekolsen/intro-to-typescript-5dh1