react-native中使用axios_在reactnative中使用TypeScript
基本类型定义let str: string = "string";let num: number = 123;let boo: boolean = true;let un: undefined = undefined;let nu: null = null;将非当前数据类型的值赋给该变量的时候会报错其他基本数据类型也如此,如果需要一个可以变化数据类...
基本类型定义
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允许您访问任意属性,即使不存在也该。这些属性包括函数,并且TypeScript不会检查它们的存在或类型:
复杂数据类型编码有两种方式定义
// 字符型数组
let string_arr: Array<string> = ["string1", "string2"];
// or
let string_arr: string[] = ["string1", "string2"];
// 数组类型数组
let arr: number[] = [1, 2];
// or
let arr: Array = [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"}
上面这样定义并不会有报错,不过如果如果打印一个属性,则会有如下提示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"]
}
还有元组的出现
元组类型允许您使用固定数量的元素表示副本,这些元素的类型是已知的,但不必相同。例如,您可能希望值表示为一对字符串和数字:
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;
}) => {...}
在使用expo的ts模板是路由index.tsx文件中配置路由:新添加的路由名称有语法提示,解决:在生成的类型文件下填充添加的路由名
ok更多的react-native中使用typeScript的用法会陆续到来
更多推荐
所有评论(0)