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的用法会陆续到来，最后欢迎来我的公众号找我^ - ^