前言
上一篇,搭建了简单的TS项目模板
本篇对TS基本数据类型进行介绍和使用
二,TS的数据类型
ES6的数据类型:
6种基本数据类型
Boolean
Number
String
Symbol
undefined
null
三种引用类型
Array
Function
Object
TS在ES6基础上,新增了一下数据类型
void
any
never
元组
枚举
高级类型
除此之外,TS还有很多类型的高级使用技巧
三,类型注解
TS可以通过类型注解对变量类型进行约束
TS和JS最主要的区别:变量的数据类型不可改变
语法: 变量/函数 : type
如: let hello : string = 'Hello TypeScript'
使用上节代码,在src目录下新增datatype.ts,用于测试TS变量类型,在index.ts中引入
src/index.ts:
import './datatype'
let hello : string = 'Hello TypeScript'
document.querySelectorAll('.app')[0].innerHTML = hello;
四,原始类型
let bl: boolean = true
let num: number = 123
let str: string = '123'
当使用类型注解对变量进行类型约束后,进行不恰当的赋值会报错
五,数组类型
定义数组的两种方式:
1, 类型名称+[]
2,Array关键字+<数据类型>
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2, 3]
此时如果为数组添加非number类型的成员会报错:
let arr3: Array<number> = [1, 2, 3, "4"]
报错:
Type 'string' is not assignable to type 'number'.
如果希望为数组\成员定义不同的数据类型,可使用联合类型:
let arr3: Array<number | string> = [1, 2, 3, "4"]
此时,数组元素既可以是number类型,也可以是String类型
六,元组类型
是一种限制数组的元素类型和个数的数组
let tuple: [number, string] = [0, '1']
此时,如果改变数组的元素类型或添加元素数量,编辑器都会报错:
let tuple: [number, string] = [0, 1]
Type 'number' is not assignable to type 'string'.
let tuple: [number, string] = [0, '1', '2']
报错:
Type '[number, string, string]' is not assignable to type '[number, string]'.
Types of property 'length' are incompatible.
Type '3' is not assignable to type '2'.
元组越界问题:
虽然元组限制了数组元素的类型和数量,过多的元素声明会报错
但TS允许向元组中使用数组的push方法插入新元素(但不允许访问)
let tuple: [number, string] = [0, '1']
tuple.push(2)
console.log("tuple.push(2)", tuple) // tuple.push(2) (3) [0, "1", 2]
但不允许访问:
tuple.push(2) // 可越界添加
tuple[2] // 不可越界访问
报错:
Tuple type '[number, string]' of length '2' has no element at index '2'.
七,函数
正常的ES6函数声明:
let add = (x, y) => x + y
报错:
Parameter 'x' implicitly has an 'any' type.
Parameter 'y' implicitly has an 'any' type.
需要为参数添加类型注解:
let add = (x: number, y: number) => x + y
还可以约束函数的返回值类型:
let add = (x: number, y: number): number => x + y
函数的返回值类型通常是可省略的,TS的类型推断功能够正确推断出返回值类型
定义函数类型:
// 声明函数类型
let computer: (x: number, y: number) => number
// 函数实现:参数名可以和定义时不一样,也不必再次指定参数类型
computer = (a, b) => a + b
这里可以看到,对函数进行实现时,IDE会自动提示函数类型信息:
八,对象
let obj: object = {x: 'a', y: 'b'}
obj.x = 3 // Property 'x' does not exist on type 'object'.
这是因为,对象obj的类型注解是object,并没有对内部具体属性和类型做严格限制
let obj: {x: string, y: string} = {x: 'a', y: 'b'}
obj.x = 'c'
九,Symbol
Symbol的含义是具有唯一的值,可以显式声明,也可直接创建
let symbol1: Symbol = Symbol() // 显示声明
let symbol2 = Symbol() // 直接创建
// 验证:是否是同一个对象
console.log(symbol1 === symbol2) // fasle
十,undefined 和 null
let udf: undefined = undefined
let nu: null = null
但是,声明了undefined,就不能再被赋值为任何其他的数据类型了,只能被赋值为它本身
let undf: undefined = 1 // Type '1' is not assignable to type 'undefined'.
反过来undefined和null也不能被赋值给任何其他类型
// 验证:undefined和null也能被赋值给任何其他类型
let num1: number = undefined // Type 'undefined' is not assignable to type 'number'.
let num2: number = null // Type 'null' is not assignable to type 'number'.
允许undefined和null被赋值其他类型
在TS中,undefined和null是任何类型的子类型,所以可以被赋值给其他类型
设置允许被辅助为其他类型,打开tsconfig.js,将strictnullchecks=false(默认true)
不修改此配置,但实现对undefined和null的赋值,可以使用联合类型
let num3: number | undefined | null = 111
十一,void
在js中,void操作符可以是任何一个表达式返回undefined
void 0 将返回undefined
在js中甚至可以自定义一个undefined变量覆盖掉全局的undefined,所以undefined并不是保留字
闭包中,undefined就覆盖了全局的undefined
使用void可以有效的避免这种问题发生,确保返回值一定是undefined
在TS中,void类型表示没有任何返回值的类型
// void
let voidFunc = () => {}
十二,any
any:如果不指定TS的变量类型,默认为any类型,可以赋值为任何类型
let x
x = 1 // 整型
x = [] // 数组
x = () => {} // 函数
但一般不建议使用any类型,那样就失去了ts的意义
十三,never
never:永远不会有返回值的类型
1,函数抛出异常,永远不会有返回值,类型为never
// 函数抛出异常,永远不会有返回值,类型为never
let error = () => {
throw new Error('error')
}
2,死循环函数永远没有返回值,类型为never
// 死循环函数永远没有返回值,类型为never
let endless = () => {
while(true) {}
}
十四,结尾
介绍了TS的类型注解和基本数据类型
TS的数据类型包含了全部ES的类型,并能够通过any类型实现对js的兼容
TS的加入,使JS的变量和函数具有了类型概念
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。