TypeScript 的理解

一、是什么

TypeScript 是 JavaScript 的类型的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等

超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如果一个集合 A 里面的的所有元素集合 B 里面都存在，那么我们可以理解集合 B 是集合 A 的超集，集合 A 为集合 B 的子集

其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误

同时扩展了JavaScript 的语法，所以任何现有的JavaScript 程序可以不加改变的在 TypeScript 下工作

为了保证兼容性，TypeScript 在编译阶段需要编译器编译成纯 JavaScript 来运行，是为大型应用之开发而设计的语言，

 

typescript 的数据类型有哪些？ 

typescript 的数据类型主要有如下：

• boolean（布尔类型）
• number（数字类型）
• string（字符串类型）
• array（数组类型）
• tuple（元组类型）
• enum（枚举类型）
• any（任意类型）
• null 和 undefined 类型
• void 类型
• never 类型
• object 对象类型

const a: number = 100
const b: string = 'hello'
const c: boolean = true
const d: Array<number> = [1,2,3]
const e: string[] = ['a','b']
const f: any[] = [true,'45',90]
const g: Array<any> = ['ehl',9]

const h: any = null
const i: null = null
const j: undefined = undefined

const k: '张三' = '张三'


// 类型联合
const l: y = 900
const s: x = [1,2,3]

二、 TypeScript 中泛型的理解

泛型程序设计（generic programming）是程序设计语言的一种风格或范式

泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型 在typescript中，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性

// 关注入参类型、返回值类型
function add (a: number, b: string) : number {
    console.log(a)
    console.log(b)
    return Number(a + b)
}
add(1, '2')

// 泛型，定义时给个占位符；使用时，再指定具体的类型。
function foo<T> (a: T, b: T) : T {
    return a
}
foo<number>(1, 2)
foo<boolean>(true,false)

function bar<T,U> (a: U, b: T) : void {
    console.log(a)
    console.log(b)
}
bar<number[], boolean>(true, [1,2,4])
bar<Array<number>, boolean>(true, [1,2,4])

三、自定义Typescript类型

大家用过 Typescript 都清楚，很多时候我们需要提前声明一个类型，再将类型赋予变量。

自定义类型可以在全局进行约束，在xxx.d.ts中定义，全局生效。我们用自定义类型是用来约束后端返回的数据。

// 自定义类型（约束后端数据）
interface User {
    name: string,   // 必填属性
    age: string,
    addr: string,
    mobile?: string,
    hot?: boolean,
    children?: any[],
    [propName:string]: any   // 接收任何多余的字段
}

interface UserTableProps {
    list: Array<User>,
    page?: number
}

// 别名
type x = (number | number[] | null)
type y = (number | string)

定义好了约束类型，可以在组件中使用了。

import { useState, useEffect } from 'react'
const list = [
    {
        id: 1,
        name: '张三',
        age: '18',
        addr: '广东',
        mobile: '110000'
    }
]

const UserTable = (props: UserTableProps) => {
    return (
        <div>
            {
                props.list.map((ele:User)=>(
                    <div key={ele.id}>{ele.name} - {ele.age}</div>
                ))
            }
        </div>
    )
}

export default () => {

    const [num, setNum] = useState<string>('hello')
    const [xx, setXx] = useState<Array<object>>([])

    const [userList, setUserList] = useState<Array<User>>([])

    useEffect(()=>{
        setUserList(list)
    }, [])

    return (
        <>
            <div>学习TS</div>
            <UserTable list={userList} page={1} />
        </>
        
    )
}