react-native中使用TypeScript

基本类型定义

let str: string = "string"; let num: number = 123; let boo: boolean = true; let un: undefined = undefined; let nu: null = null;

将非当前数据类型的值赋给该变量的时候会报错 其他基本数据类型也是如此，如果需要一个可以变化数据类型的变量可以这样：

let strOrNum: string | number = "str"; strOrNum = 123 // or let strOrNum: string | number | boolean | undefined | null = "str"; strOrNum = 123; strOrNum = true; strOrNum = null;

或者直接使用 any标记，文档上说明:

在这些情况下，我们可能要选择退出类型检查。为此，我们使用以下any类型标记这些值 类型变量any允许您访问任意属性，即使不存在也是如此。这些属性包括函数，并且TypeScript不会检查它们的存在或类型：

复杂数据类型 数组有两种方式定义

// 字符型数组 let string_arr: Array<string> = ["string1", "string2"]; // or let string_arr: string[] = ["string1", "string2"]; // 数组类型数组 let arr: number[] = [1, 2]; // or let arr: Array<number> = [1, 2]; let objArr :Array<object> = [{a:"a"},{b:"b"}];

数组内的类型要对应 要多种类型元素的话可以这样定义

let arr: Array<number|string> = ["str",2]; let arr: Array<undefined|boolean> = [true, ,];

对象

let person: object = {a:"aa"}

上面这样定义并不会有报错， 不过如果打印a属性，则会有如下提示 ts要求我们要这样定义,将属性的值和其对应的类型标明

let person: {a:string} = {a:"aa"} console.log(person.a)

如果要添加新属性，下面这样写是不行的，该对象只能有定义类型的时候声明的具有类型的属性 同时要注意声明了对象的某一属性则该对象必须具有该属性 如果需要更多不确定属性名的属性定义对象可以这样写

let person: { a: string; [propName: string]: any } = { a: "aa" }; // or let person: {[propName:string]:any} = {}

可有可无的属性： ?:

let person: { a: string; b?: string; [propName: string]: any; } = { a: "aa", };

如果有多个对象都需要某些属性的话都要这样写岂不是很麻烦，这时候我们就可以使用接口来简化：

interface Person { name: string; age: number; sex?: number; [propName: string]: any; } let hongbin : Person = { name:"hongbin", age:21, friends:["pater","David"] }

还有元组的出现

元组类型允许您用固定数量的元素表示数组，这些元素的类型是已知的，但不必相同。例如，您可能希望将值表示为一对a string和number：

let x : [string,number] = ["str",123]; // √ let x : [string,number] = ["str",123,345]//× let x : [string,number] = [123,"str"] //×

void

void有点相反any：根本没有任何类型。您可能通常将其视为不返回值的函数的返回类型：

function warnUser(): void { console.log("This is my warning message"); }

react-native中常见：

// js const OrderMain = ({ store, products }) => {...} // ts 要为每个参数指定类型 const OrderMain = ({ store, products, }: { store: { logo: string; name: string; [propName: string]: any }; products: Array<object>; }) => {...}

在使用expo的ts模板是路由index.tsx文件中配置路由： 新添加的路由name会有语法提示，解决:在生成的types文件下填写新增的路由名 更多的react-native中使用typeScript的用法会陆续到来，最后欢迎来我的公众号找我^ - ^