fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@ -0,0 +1,14 @@
---
title: Any Type
localeTitle: 随便哪种
---
# 随便哪种
Any类型指示Typescript暂停对指定变量的类型检查。在处理您不知道类型的动态内容以及将Javascript的代码库转换为打字稿时非常有用。您可以使用Javascript的隐式类型与使用Any类型声明的变量。
```typescript
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
```

View File

@ -0,0 +1,60 @@
---
title: Array Type
localeTitle: 数组类型
---
# 数组类型
您可以完全访问TypeScript中的数组。 可以在TypeScript中以两种不同的方式编写数组
**数据类型\[\]**
DataType后跟方括号`[]`
```typescript
let names: string[] = ['Javier', 'Emma', 'John', 'Sophia', 'Emma'];
```
**阵列<数据类型>**
`Array`后跟<DataType>
```typescript
let names: Array<string> = ['Javier', 'Emma', 'John', 'Sophia', 'Emma'];
```
## 内置方法
在Typescript的Array类型中您可以使用一些内置函数。每种类型都有共同和独特的方法。 您可以在下面了解最常用的数组类型方法。在示例中,我们将使用上面的数组声明。
### 流行()
从数组中删除最后一个元素并返回它。
```typescript
var element = names.pop();
//element = Emma
var element2 = names.pop();
//element2 = Sophia
```
### 推()
将一个或多个元素添加到数组的末尾,并返回数组的新长度。
```typescript
var length = names.push('Tobias');
// names[] = ['Javier', 'Emma', 'John', 'Sophia', 'Emma', 'Tobias']
// lenght = 6
var length2 = names.push('Jack','Lily');
// names[] = ['Javier', 'Emma', 'John', 'Sophia', 'Emma', 'Tobias','Jack','Lily']
// lenght2 = 8
```
### 相反()
反转数组的顺序并返回它
```typescript
var reverseNames = names.reverse();
//reverseNames = ['Emma','Sophia','John','Emma','Javier']
```
[TutorialsPoint提供了更多方法和说明](https://www.tutorialspoint.com/typescript/typescript_arrays.htm)

View File

@ -0,0 +1,12 @@
---
title: Boolean Type
localeTitle: 布尔类型
---
# 布尔类型
`boolean`是您的基本JavaScript真/假值。
```typescript
let isDone: boolean = false;
```

View File

@ -0,0 +1,29 @@
---
title: Enums
localeTitle: 枚举
---
## 枚举
开发人员可以使用`Enums`来定义一组命名常量。
有两种类型的`Enums`
1. 数字
2. 基于字符串
```typescript
// numeric enum
enum NumericEnum {
numeric1 = 1,
numeric2,
numeric3,
numeric4,
}
// string based enum
enum StringBasedEnum {
Programming = "is fun",
Pizza = "is good"
}
```

View File

@ -0,0 +1,17 @@
---
title: For..Of Loop
localeTitle: For..Of Loop
---
# For..Of Loop
`for..of`循环是TypeScript中的一个特殊循环可用于迭代数组的值。
```typescript
let fruits = ['Apple', 'Banana', 'Orange'];
for (let fruit of fruits) {
console.log(fruit);
}
```
您将从上面的代码中获得的输出将是“Apple”“Banana”和“Orange”。由于此循环类型不会遍历索引因此不会得到“0”“1”和“2”。

View File

@ -0,0 +1,71 @@
---
title: Generics
localeTitle: 泛型
---
## 泛型
开发人员可以使用`Generics`为类,实例成员,静态成员和函数指定类型约束。
### 仿制药做什么?
从本质上讲,它们充当类型的占位符,以便通过适应不同类型,可以在应用程序的多个位置使用组件。
### 泛型解决了什么问题?
假设您希望确保函数的输入和返回值属于同一类型,这就是泛型的用武之地。
##### 功能
```typescript
function printMessage(arg: any): any {
return arg;
}
// typescript won't complain because the argument type and return type aren't being typed properly
const myMessage: string = printMessage(1);
```
正如您从上面所看到的,为函数中的参数类型传递`any`以及返回类型并不理想,因为在此过程中类型信息会丢失。
```typescript
// updated example
function printMessage<T>(arg: T): T {
return arg;
}
// typescript complains because the variable type and the return type of the function don't match
const myMessage: string = printMessage(1);
// resolve the issue by making sure both types match each other
const myMessage: number = printMessage(1);
```
在函数中包含`<T>`告诉TypeScript它是泛型函数并将其作为引用传递将使TypeScript知道与其关联的值具有相同的类型。
##### 类
```typescript
class Person {
fullName: string;
constructor(fullName: string) {
this.fullName = fullName;
}
getFullName() {
return 'My name is ' + this.fullName;
}
}
class Guest extends Person {};
let guest = new Guest('abc');
function getUser<T>(user: T): T {
return user;
}
// foo will be of type 'guest' because it's being passed in as the argument
const foo = getUser(guest);
```

View File

@ -0,0 +1,27 @@
---
title: Getters & Setters
localeTitle: 吸气者和二传手
---
# 吸气者和二传手
Typescript还支持`get``set`属性。 Get和Set Properties实际上称为Accessors。属性的访问器包含与获取读取或设置写入属性相关联的可执行语句。声明可以包含get访问器或set访问器或两者。
```typescript
class User {
private _fullName: string = '';
get fullName() {
return this._fullName;
}
set fullName(name) {
this._fullName = name;
}
}
let user = new User();
user.fullName = 'John Doe';
console.log(user.fullName);

View File

@ -0,0 +1,59 @@
---
title: TypeScript
localeTitle: 打字稿
---
## 打字稿
### 概观
![打字稿](https://i.imgur.com/uRLunzU.png)
因此正如您最有可能意识到的那样JavaScript每天都在扩大其占用空间而且现在您可以使用该语言实现这一目标这既令人难以置信又令人惊叹。
但是随着越来越多的大型项目开始使用JavaScript使代码更容易编写和更易于维护的过程变得越来越困难。
这是微软早期认识到的一个问题他们提出了TypeScript的解决方案并于2012年10月1日发布了第一个版本。
您可以在[`TypeScript`](./) > [`JavaScript vs TypeScript`](./javascript-vs-typescript)了解有关语法差异的更多信息。
![主要特点](https://i.imgur.com/pZij95O.jpg)
从本质上讲TypeScript正试图帮助JavaScript达到新的高度并且变得非常可扩展并且可以通过以下功能突出显示
* 由Microsoft开发和维护的免费和开源编程语言
* 编译为纯JavaScript的严格的语法超集JavaScript
* 简化了用JavaScript编写的大规模应用程序的开发
* 通过添加静态类型模块接口和泛型来扩展JavaScript
**🎉FUN FACT** TypeScript于2017年10月1日满5岁。
### 版
最新的稳定版本是[TypeScript 3.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html) 。
### 安装
要了解有关安装的更多信息,请参阅[`TypeScript`](./) > [`Installation`](./installation) 。
### 短绒
要了解有关在TypeScript中使用[`Linter`](./linter)更多信息,请查看[`TypeScript`](./) > [`Linter`](./linter) 。
### 操场
![操场](https://i.imgur.com/vlV7ZFr.png)
如果您想在不安装的情况下试用TypeScript请访问[TypeScript Playground](http://www.typescriptlang.org/play/index.html) 。
Playground具有内置的自动完成功能可以直接查看发出的JavaScript。
### 其他资源
要了解有关安装的更多信息,请参阅[安装附录](./src/articles/typescript/appendix-installation/index.md) 。
如果您只需要一个类型检查器并且不想编译您的程序,请阅读[Flux](https://facebook.github.io/flux/) 。
* [快速开始](http://www.typescriptlang.org/samples/index.html)
* [文档](http://www.typescriptlang.org/docs/home.html)
* [源代码](https://github.com/Microsoft/TypeScript)
* [TutorialsPoint](https://www.tutorialspoint.com/typescript/)

View File

@ -0,0 +1,88 @@
---
title: Installation
localeTitle: 安装
---
## 安装
![安装](https://i.imgur.com/9ILjA1q.jpg)
要自己开始您需要的两件事是TypeScript编译器和支持TypeScript的编辑器。
在上面的屏幕截图中,我在[Visual Studio Code](https://code.visualstudio.com/)的集成终端中使用`npm`安装编译器和[TSLint](https://github.com/palantir/tslint) (类似于[ESLint](https://eslint.org/) )。
### 安装TypeScript
此命令将使用[`npm`](https://www.npmjs.com/) 一种流行的包管理器将TypeScript包作为依赖项安装在项目中。
```bash
npm i typescript
```
_注意_ `npm`提供[了几个选项](https://docs.npmjs.com/cli/install) 具体取决于您希望安装TypeScript的位置。
* `npm i -g typescript`全局安装TypeScript包
* `npm i -D typescript`将TypeScript包安装为dev依赖项
### TSLint
了解如何在**freeCodeCamp指南中的** [TypeScript](./) > [Linter上](./linter)为TypeScript设置linting选项。
### 将单个文件编译为JavaScript
```bash
tsc multiplication.ts
```
_注意_您可以将此TypeScript编译过程配置为`package.json`的自定义npm脚本。
### 配置选项
```bash
touch tsconfig.json
```
还可以选择创建指定根文件和编译器选项的[`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)文件。
例如,在[`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)文件中您可以指定希望TypeScript编译为ES5而不是ES6。
### 快速示例
![乘法](https://i.imgur.com/V5nP3xj.jpg)
在上面的屏幕截图中,您可以看到两个文件 - `multiplication.js``multiplication.ts`
这个程序只打印出我预先定义的两个数字的乘积。
> `multiplication.ts`
```typescript
let a: number = 10;
let b: number = 2;
function showProduct(first: number, second: number): void {
console.info("Mathematical! The result is " + first * second + ".");
}
showProduct(a, b);
// Mathematical! The result is 20.
```
一旦我完成了`multiplication.ts`创建,我可以使用`tsc`命令将其编译为JavaScript该命令代表TypeScript编译。
> `multiplication.js`
```javascript
var a = 10;
var b = 2;
function showProduct(first, second) {
console.info("Mathematical! The result is " + first * second + ".");
}
showProduct(a, b);
// Mathematical! The result is 20.
```
Bam - 我刚刚成功地将TypeScript编译为JavaScript

View File

@ -0,0 +1,29 @@
---
title: Interfaces
localeTitle: 接口
---
# 接口
TypeScript的核心原则之一是类型检查关注于值所具有的形状。这有时被称为“鸭子打字”或“结构子类型”。在TypeScript中 `interfaces`充当了命名这些类型的角色,并且是一种在代码中定义合同以及与项目之外的代码签订合同的强大方法。
```typescript
interface User = {
firstName: string;
lastName: string;
}
function printUserInfo(user: User) {
console.log(user.firstName);
}
let myObj = {firstName: 'John', lastName: 'Doe'}
printUserInfo(myObj);
```
接口可以包含可选参数
```typescript
interface User = {
email?: string;
}

View File

@ -0,0 +1,19 @@
---
title: JavaScript vs TypeScript
localeTitle: JavaScript与TypeScript
---
## JavaScript与TypeScript
![沃尔多在哪儿](https://i.imgur.com/DznuAou.jpg)
好的现在我们对TypeScript有了一般意义让我们玩一下**Where's Waldo**的快速游戏吧。
在上面的屏幕截图中,您可以在这个非常简单的乘法程序中发现`JavaScript``TypeScript`之间的差异,该程序只打印出我预先定义的两个数字的乘积。
### 虽然这些差异是什么? 🤔️
他们是**类型**
因此`JavaScript`具有动态类型,声明为数字的变量可以转换为字符串,而`TypeScript`具有静态类型,这意味着您事先声明变量将保持的值的类型,并且不会更改。
`multiplication.ts`文件中,我将所有这些变量声明为数字,因此无法将其更改为其他变量。

View File

@ -0,0 +1,24 @@
---
title: Linter
localeTitle: 短绒
---
## 短绒
![TSLint](https://2.bp.blogspot.com/-w7oeP1geosE/V82a740bTbI/AAAAAAAAAu4/-zJxZsmmH6garbdmUplX0n5Yz5zDsvcVQCLcB/s1600/tslint.png)
[linter](https://www.wikiwand.com/en/Lint_(software)被定义为检测和标记编程语言中的错误的工具,包括样式错误。
对于TypeScript [TSLint](http://palantir.github.io/tslint)是最受欢迎的[linter](http://palantir.github.io/tslint)选项。
TSLint是一种可扩展的静态分析工具可检查TypeScript代码的可读性可维护性和功能性错误。
它在现代编辑器和构建系统中得到广泛支持可以使用您自己的lint规则配置和格式化程序进行自定义。
### 安装TSLint
此命令将使用流行的包管理器`npm`全局安装`TSLint`包。
```bash
npm i -g tslint
```

View File

@ -0,0 +1,28 @@
---
title: Never Type
localeTitle: 从不打字
---
# 从不打字
`never`类型表示从未发生的值的类型。例如, `never`函数表达式或箭头函数表达式的返回类型,它总是抛出异常或永不返回的异常;变量也会获得`never``any`类型的守卫缩小的类型。
`never`类型是每种类型的子类型,并且可分配给每种类型;但是,没有类型是`never`的子类型或可分配的(从不自己除外)。甚至任何都不可分配给永远。
```typescript
// Function returning never must have unreachable end point
function error(message: string): never {
throw new Error(message);
}
// Inferred return type is never
function fail() {
return error("Something failed");
}
// Function returning never must have unreachable end point
function infiniteLoop(): never {
while (true) {
}
}
```

View File

@ -0,0 +1,21 @@
---
title: Null Type
localeTitle: 空类型
---
## 空类型
在TypeScript中null类型的值为null。 Null是每种类型的有效值。
```ts
let u: null = null;
```
使用--strictNullChecks标志时null只能分配给void及其类型。
```ts
let s = "foo";
s = null; // error, 'null' is not assignable to 'string'
let sn: string | null = "bar";
sn = null; // ok
```

View File

@ -0,0 +1,15 @@
---
title: Number Type
localeTitle: 数字类型
---
# 数字类型
TypeScript中的所有数字都是浮点值。 TypeScript支持ES6中的二进制和八进制文字值。
```typescript
let decimal: number = 7;
let hex: number = 0xf00d;
let binary: number = 0b0110;
let octal: number = 0o531;
```

View File

@ -0,0 +1,56 @@
---
title: String Type
localeTitle: 字符串类型
---
# 字符串类型
字符串可以用`''`单引号或`""`双引号书写。 与您的代码保持一致并选择一种风格。
```typescript
let dog: string = 'Fido';
let activity: string = "Playing Outside";
```
可以使用模板文字来编写字符串:
```typescript
let greeting: string = `Hello, ${firstName} ${lastName}, thank you for attending the ${eventName} event.`;
```
## 内置方法
在Typescript的类型中您可以使用一些内置函数。每种类型都有共同和独特的方法。 您可以在下面阅读有关字符串类型方法中最常用的方法。
### 拆分('分隔符',限制)
使用split函数您可以在指定的分隔符处拆分字符串。您可以设置限制数即可以说有多少拆分。 splitted字符串以数组类型返回。
```typescript
let names: string = 'Sarah,Lily,John,Paula,Harvey';
let array: string[] = names.split(',');
//array = ['Sarah','Lily','John','Paula','Harvey']
let array2: string[] = names.split(',',2);
//array2 = ['Sarah','Lily']
```
### SUBSTRstartAt长度
此方法返回一个子字符串,该子字符串以原始字符串的`startAt`字符`startAt` ,其长度为`length`
```typescript
let names: string = 'Harvey Specter';
let substr: string = names.substr(3,10);
//substr = 'rvey Spect'
```
### 子startAtENDAT
此方法类似于substr但具有不同的参数。第二个参数也是关于原始字符串的索引而不是长度编号。
```typescript
let names: string = 'Harvey Specter';
let substring: string = names.substring(3,10);
//substring = 'rvey Spe'
```
[TutorialsPoint提供了更多方法和说明](https://www.tutorialspoint.com/typescript/typescript_strings.htm)

View File

@ -0,0 +1,71 @@
---
title: Tuple Type
localeTitle: 元组类型
---
# 元组类型
表示一个数组,其中已知固定数量的类型元素,但不一样。
```typescript
let arr: [string, number];
// This is correct
arr = ['Hello', 7];
//This is incorrect
arr = [7, 'Hello'];
```
访问已知索引之外的元素时,它将使用联合类型:
```typescript
arr[3] = 'World!'
// OK, 'string' can be assigned to 'string | number'
// Error, 'boolean' is not a 'string | number'
arr[5] = false;
// Error, 'boolean' is not a 'string | number'
```
## 属性
在Typescript的类型中您可以拥有一些buit-in属性。例如长度或其他每种类型的独特。
### 长度
这个属性说,有多少元素有它的元素。
```typescript
let tuple = []; //you can initialize it after the declaration too, not just the method above
tuple[0] = 10;
tuple[1] = 'Mike';
let number = tuple.length;
//number = 2;
```
## 内置方法
在Typescript的类型中您可以使用一些内置函数。每种类型都有共同和独特的方法。 下面你可以阅读有关元组类型方法中最常用的方法。
### 流行()
从元组中删除最后一个元素。
```typescript
var tuple = [10,'Emma',11,'Lily',12,'Mike Ross'];
tuple.pop();
//tuple = [10,'Emma',11,'Lily',12,]
//We popped 'Mike Ross' from the tuple
```
### 推()
将元素添加到元组的末尾。
```typescript
var tuple = [10,'Emma',11,'Lily',12,'Mike Ross'];
tuple.push('Rachel Zane');
//tuple = [10,'Emma',11,'Lily',12,'Mike Ross','Rachel Zane']
```
[有关TutorialsPoint上的元组的更多信息](https://www.tutorialspoint.com/typescript/typescript_tuples.htm)

View File

@ -0,0 +1,35 @@
---
title: Undefined Type
localeTitle: 未定义的类型
---
## 未定义的类型
在TypeScript中与null类型相同未定义类型的值为undefined。未定义是每种类型的有效值。
```ts
let u: undefined = undefined;
```
使用`--strictNullChecks`标志时undefined只能分配给void及其类型。
```ts
let s = "foo";
s = null; // error, 'null' is not assignable to 'string'
let sn: string | null = "bar";
sn = null; // ok
sn = undefined; // error, 'undefined' is not assignable to 'string | null'
```
使用`--strictNullChecks` ,可选参数自动添加`| undefined`
```ts
function f(x: number, y?: number) {
return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' is not assignable to 'number | undefined'
```

View File

@ -0,0 +1,15 @@
---
title: Void Type
localeTitle: 空洞类型
---
# 空洞类型
不应该用于变量,使用`null``undefined`
但是,将它用于不返回值的函数。
```typescript
const greeting(): void {
alert('Hello, and Welcome to My Webpage!');
}
```