React_Native 再学习5--TypeScript学习1_基础语法

参考：

https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

https://ts.xcatliu.com/introduction/what-is-typescript.html

什么是typeScript:

TypeScript是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。

主要优点：

1、 TypeScript 增加了代码的可读性和可维护性

2、 TypeScript 非常包容

l TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可

l 即使不显式的定义类型，也能够自动做出类型推论

l 可以定义从简单到复杂的一切类型

l 即使 TypeScript编译报错，也可以生成 JavaScript 文件

l 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

缺点：

1. 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本

2. 集成到构建流程需要一些工作量

基础类型：

布尔值

let isDone: boolean = false;

let createdByNewBoolean: boolean = newBoolean(1);

注意：在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。

数值：

let decLiteral: number = 6;

let hexLiteral: number = 0xf00d;

// ES6 中的二进制表示法

let binaryLiteral: number = 0b1010;

// ES6 中的八进制表示法

let octalLiteral: number = 0o744;

let notANumber: number = NaN;

let infinityNumber: number = Infinity;

字符串:

let myName: string = 'Tom';

let myAge: number = 25;

// 模板字符串

let sentence: string = `Hello, my name is${myName}.

注意：其中 ` 用来定义 ES6 中的模板字符串，${expr} 用来在模板字符串中嵌入表达式。

空值

function alertName(): void {

alert('My name is Tom');

}

注意：JavaScript 没有空值（Void）的概念，在 TypeScirpt 中，可以用 void 表示没有任何返回值的函数：

任意值:

代码1

let myFavoriteNumber: any= 'seven';

myFavoriteNumber=7

代码2

let something;

something = 'seven';

something = 7;

注意：但如果是 any 类型，则允许被赋值为任意类型。未指定其类型，那么它会被识别为任意值类型。

但是：

代码1辉仔编译时报错，而代码2不会在编译时报错，因为未被赋值被推断成 any 类型而完全不被类型检查

联合类型（Unio n Types）

表示取值可以为多种类型中的一种。

let myFavoriteNumber: string | number;

注意：它被赋值的时候，会根据类型推论的规则推断出一个类型

对象类型的接口

在面向对象的语言中，接口是对行为的抽象。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

interface Person {

name: string;

age: number;

}

let tom: Person = {

name: 'Tom',

age: 25

};

注意：被接口限制的对象定义，里面的属性只能少不能多。

数组类型

简单数组：

let fibonacci: number[] = [1, 1, 2, 3, 5];

泛型数组：

let fibonacci: Array<number> =[1, 1, 2, 3, 5];

接口表数组：

interface NumberArray {

[index: number]: number;

}

let fibonacci: NumberArray = [1, 1, 2, 3,5];

any数组

let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];

注意：any 表示数组中允许出现任意类型

函数类型

普通函数定义和声明：

// 函数声明（FunctionDeclaration）

function sum(x, y) {

returnx + y;

}

// 函数表达式（FunctionExpression）

let mySum = function (x, y) {

returnx + y;

};

函数接口：

interface SearchFunc {

(source: string, subString: string): boolean;

}

可选参数

function buildName(firstName: string,lastName?: string) {

if(lastName) {

return firstName + ' ' + lastName;

}else {

return firstName;

}

let tomcat = buildName('Tom', 'Cat');

let tom = buildName('Tom');

注意：用？来表示可选参数。同时，它后面不允许再有别的参数

剩余参数：

function push(array, ...items) {

items.forEach(function(item) {

array.push(item);

});

}

let a = [];

push(a, 1, 2, 3);

注意：可以使用…rest的方式获取函数中的剩余参数。

重载

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。

function reverse(x: number): number;

function reverse(x: string): string;

function reverse(x: number | string): number| string {

if(typeof x === 'number') {

return Number(x.toString().split('').reverse().join(''));

}else if (typeof x === 'string') {

return x.split('').reverse().join('');

}

注意：TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

断言：

手动指定一个值的类型

语法：

<类型>值或值 as 类型

function getLength(something: string | number):number {

if((<string>something).length){

return (<string>something).length;

}else {

return something.toString().length;

}

为防止报错。我们加入断言，

注意：类型断言不是类型转换，