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

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 =[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((something).length){

       return (something).length;

    }else {

       return something.toString().length;

    }

}

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

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