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;

    }

}

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

注意:类型断言不是类型转换,

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(react,native学习之路)