Loading... # ts学习-数据类型（一） ## 类型注解和类型推导 > 什么是类型注解? 比如我们定义一个变量，我们需要指定这个变量的类型，这就叫类型注解 如果后面需要修改了这个值的类型，那么就会出错 ```js let username: string = 'xxhzm' ``` 我们可以使用 type 来提交定义各种类型 ```js type TypeStu = { nikename: string age: number } ``` 这时我们可以用这种类型来定义一个学生对象 ```js let stuObj: TypeStu = { nikename: 'xxhzm', age: 16, } ``` 如果我们此时向学生对象中新增了一个 phone 那么就会进行报错 ```js let stuObj2: TypeStu = { nikename: 'xxhzm', age: 16, phone: '110', } ``` + 不能将类型“{ nikename: string; age: number; phone: string; }”分配给类型“TypeStu”。 + 对象文字可以只指定已知属性，并且“phone”不在类型“TypeStu”中。 > 什么是类型推导？ 此时我们定义了一个 count 给了它一个数字 他会自动推导出来左边这个变量的类型为 number ```js let count = 3 ``` 如果我们再给一个其他类型的数据，就会报错 ```js count = 'abc' ``` + 不能将类型“string”分配给类型“number”。 ## any 和 unknown 的区别 > any any 可以作为任何数据类型的父类存在，也可以作为任何数据类型的子类存在 ```js let price: any = 199 price = '599' ``` any 可以强制的读写存在或者不存在的属性 ```js let stuObj3: any = { nikename: 'xxhzm', age: 16, } console.log(stuObj3.nikename) stuObj3.phone = '110' ``` > unknown unknown 也可以接受任何数据类型的值 ```js let count2: unknown = 3 ``` unknown 不可以强制的读写存在或者不存在的属性 ```js let stuObj4: unknown = { nikename: 'xxhzm', age: 16, } console.log(stuObj4.nikename) ``` + 对象的类型为 "unknown"。 + 相同点 + 都是其他类型的父类 + 不同点 + unknown不是其他类型的子类 + any 可以进行可以强制的读写存在或者不存在的属性但 unknown 不可以 ## string 和 String 的区别 + String 属于 JavaScript 遗留下来的 + string 是 typescript 特有的数据类型，单纯的表示一个字符串类型 ## bigint ```js const max = Number.MAX_SAFE_INTEGER const One = max + 1 const Tow = max + 2 console.log(One === Tow) // true ```js Number发生了溢出，此时计算已经不准确了 此时我们需要使用 BigInt ```js const max2 = BigInt(Number.MAX_SAFE_INTEGER) const One2 = max2 + BigInt(1) const Tow2 = max2 + BigInt(2) console.log(One2 === Tow2) // false ``` ## 元组 > 什么是元组? + 定义时的元素的类型确定，但各个元素的类型不必相同 + 为元素赋值时，该值必须是当前位置的类型 ```js let a: [string, number] = ['王五', 100] let b: [string, number] = ['李四', 200] ``` 也可以定义成 ```js type TypeC = [string, number] let c: TypeC = ['赵六', 300] ``` ## 接口 > 接口是什么? + 接口是为一系列同类对象或同类别的类提供属性定义和方法声明，但没有任何赋值的实现的数据类型 ```js interface User { name: string age: number } function e(user: User) { console.log(user) } e({ name: 'xxhzm', age: 16 }) ``` ### 接口的可选属性 使用?将其变成可选属性(可填可不填) ```js interface Product { id: number name: string price: number count: number remarks?: string } function calToal(product: Product) { console.log('product', product) } calToal({ id: 1, name: '自行车', price: 1000, count: 10, remarks: '红色的' }) calToal({ id: 2, name: '电视', price: 500, count: 5 }) ``` ### 可索引属性 ``` [key: string]: any 表示可以添加一个或者多个或者零个 any 属性 [key: number]: string 同理，添加 string 属性 ``` ```js interface Product2 { id: number name: string price: number count: number remarks?: string [key: string]: any [key: number]: string } function calToal2(product: Product2) { console.log('product', product) } calToal2({ id: 1, name: '自行车', price: 1000, count: 10, remarks: '红色的', status: 'off' }) calToal2({ id: 2, name: '电视', price: 500, count: 5, status: 'on' }) calToal2({ id: 2, name: '电视', price: 500, count: 5, 10: '1000' }) ``` ## 联合类型 > 可以接收一个或者多个不同类型的数据 ```js let nikename: string | number = 'xxhzm' ``` 使用 type 定义联合类型 ```js type TypeBase = string | number | symbol let data1: TypeBase = '123' let data2: TypeBase = 123 let data3: TypeBase = Symbol() ``` 猜你想看 JavaScript计时器 开学啦 Redis学习之安装Redis 每日一学：PHP 中的 `array_uintersect` 函数详解 蓝易云暑期大采购活动 每日一学：PHP 中的array_merge_recursive函数详解 每日一学：PHP 中的array_udiff_uassoc函数详解 每日一学：PHP 中的array_multisort函数详解 每日一学：PHP 中的array_merge函数详解 8月13日JS学习笔记 最后修改：2022 年 06 月 10 日 © 允许规范转载 赞 2 如果觉得我的文章对你有用，请随意赞赏
2 条评论
|´・ω・)ノ
sdadasd