基本类型定义

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

将非当前数据类型的值赋给该变量的时候会报错050c221de54048fdaac6955010015c5a.png87cafb85bbf75398b19d3e9d0928fb2c.png其他基本数据类型也如此,如果需要一个可以变化数据类型的变量可以这样:

    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"}];

副本内的类型要对应c408cb1c9aac596d6661350cf7e0b36a.png要多种类型元素的话可以这样定义

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

对象

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

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

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

如果要添加新属性,下面这样写是不行的,该对象只能有定义类型的时候声明的具有类型的属性8559c5808146718a5d9097d1a746619a.png同时要注意声明了对象的相关属性则该对象必须具有该属性0b109939b6ff6de839bb69faf3a4b21c.png如果需要更多不确定属性名的属性定义对象可以这样写

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文件中配置路由:ab7c36586c8cef75888c58196bd931b1.png新添加的路由名称有语法提示,解决:在生成的类型文件下填充添加的路由名37f2d40af7bca065acbea831b8e982dd.png

ok更多的react-native中使用typeScript的用法会陆续到来

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐