TypeScript简介

1.TypeScript优势：

JS的超集，JS有的TS都有，能运行JS就能运行TS
强大的类型系统提升了代码的可阅读性、可维护性
类型推断、类型检查、代码提示
有利于在团队中推动严格的代码检查

2.项目配置TypeScript

1. 安装TypeScript

npm install --save-dev typescript

2. 生成tsconfig.json

tsc --init

3. 安装类型申明（众多）

npm i --save-dev @types/react
npm i --save-dev @types/react-native

3.基础类型的使用方法

1. 数值类型：number
2. 字符串类型：string
3. 布尔类型：boolean

4.区分数组元祖和枚举类型

5.函数类型

基础的函数申明
函数参数类型和返回值类型的申明
函数的可选参数和默认参数

6.使用命名空间和类型文件

局部类型文件和全局类型文件
使用类型文件中的类型定义数据

新建ts文件夹，新建TsDemo.tsx文件，代码如下：

import { Button, StyleSheet, View } from "react-native"

export default () => {

    const add = (n1: number, n2: number) : number => {
        return n1 + n2;
    }

    const onButtonPress: () => void = () => {
        const num1: number = 123
        const num2: number = 12.34
        console.log(add(num1, num2))

        const num3: Number = new Number(13)
        console.log(num3.valueOf())

        const s1: string = "Hello"
        
        const b1: boolean = true
        const b2: boolean = !s1; //true

        //数组类型
        const a1: Array<number> = [1, 2, 3, 4, 5];
        const a2: number[] = [1, 2, 3, 4, 5];
        const a3: Array<number> = new Array(5);
        const a4: Array<number | string> = new Array();

        //元祖类型
        const t1: [string, number, boolean] = ["张三", 12, true];

        //枚举类型
        enum Job {
            Teacher = "老师",
            Programmer = "程序员",
            Cook = "厨师"
        }
    }

    //函数类型
    const f1: (s?: string) => void = (s?: string) => {
        console.log(s || '无值');
    }

    const f2 = (s1: string, s2: string = '默认值') => {
        console.log(s2);
    }

    f1();
    f2('aaa');

    //局部类型文件、全局类型文件、命名空间
    const stu: Student = {
        name: "zhangsan",
        age: 13,
        hobby: undefined
    } as Student

    console.log(stu);

    const d: Info.dog = {
        name: "dog",
        age: 14
    } as Info.dog

    console.log(d);

    return (
        <View style={styles.root}>
            <Button 
                title="按钮"
                onPress={onButtonPress}
            >

            </Button>
        </View>
    )
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#f0f0f0'


    }
})

ts文件夹下，新建@types文件夹，再新建index.d.ts，代码如下：

//局部类型文件，如果要全局类型文件，直接在最外层新建typing.d.ts
type Student = {
    name: string,
    age: number,
    hobby?: string[]
}

declare namespace Info {
    type dog = {
        name: string,
        age: number
    }
}