TypeScript是JavaScript的超集,为大型应用而生。有两个特点:一是强类型;二是基于类的面向对象编程
1. boolean
let isTrue : boolean = true
let isVisible : boolean ;
isVisible = false
console.log(isTrue) //true
console.log(isVisible) //false
2. number
let num1:number = 6
let num2; //具有隐式的any类型, 根据赋值判断
num2 = 2
num2 = '123'
console.log(num1) //6
console.log(num2) //123
3. string
let str1: string ;
str1 = 'abc0'
let name1: string = 'Iric'
let str2 = `我是${name1},你是谁`
console.log(str1) //abc0
console.log(str2) //我是Iric,你是谁
4.数组
「TS像JS一样可以操作数据元素, 有2中方式可以定义数组:」
- 可以在元素后面加上[], 表示次类型组成一个数组
- 使用数组泛型, 「Array<元素类型>」
let arr1: number[];
arr1 = [1,2,3,4]
let arr2: Array<string> = ['a','c','b']
console.log(arr1) //[1, 2, 3, 4]
console.log(arr2) //['a', 'c', 'b']
5. 元组
元组类型允许表示一个已知元素数量和类型的数组, 各元素类型不必相同. 当添加的元组越界的时候, 越界的类型会被限制为元组类型中每个类型的联合类型
const m: [string, number ] = ['Iric', 20]
console.log(m) //['Iric', 20]
console.log(m[0].startsWith('I')) //true
m[0] = 'LIsa'
console.log(m) //['LIsa', 20]
// m[1] = true //不能将类型“boolean”分配给类型“number”
m.push('male')
// m.push(true) //类型“boolean”的参数不能赋给类型“string | number”的参数
console.log(m) //['LIsa', 20, 'male']
6. 枚举类型enum
enum类型是JS标准数据类型的一个补充, 使用枚举类型可以为数组赋予友好的名字。
- 「默认情况下从0开始为元素的编号」
enum Color { Red, Green, Blue}
let a:Color = Color.Red
let b:Color = Color.Green
let c: Color = Color.Blue
console.log(a) //0
console.log(b) //1
console.log(c) //2
- 「可以手动指定成员」
enum Person{ name='Lisa', age= 20, gender='male'}
let userName:Person = Person.name
let userAge:Person = Person.age
let userGander: Person = Person.gender
console.log(userName) //Lisa
console.log(userAge) //20
console.log(userGander) //male
enum Gender{
male = 0,
famale = 1
}
let Iperson:{name: string, age: number,gender: Gender}
Iperson= {
name:'Lisa',
age:20,
gender: Gender.famale
}
console.log(Iperson) //{name: 'Lisa', age: 20, gender: 1}
- 「&表示同时满足」
let Person1:{name: string} &{age: number}
Person1 = {name:'孙悟空', age:500}
console.log(Person1) //{name: '孙悟空', age: 500}
7. any类型
「any」表示的是「任意类型」, 一个变量设置any类型后, 相当于关闭了TS的类型检测。 声明变量如果不知道类型, 则TS解析器会自动判断变量的未履行为any(隐式any), 没有类型检测就没有立刻意义, 跟写JS一样, 很不安全。
let any1:any = 4
any1 = 'abc'
console.log(any1)
any1 = false
console.log(any1)
「当你只知道一部分数据类型时, any类型也是比较有用的, 比如你定义个一个数组, 她包含不同类型数据, 你就可以使用any」
let arr3: any[] = [1, 'abc', false]
console.log(arr3)
let arr4: Array<any> = [ true, '123', false, 100]
console.log(arr4)
8. void 【空值】
从某种程度上来说, void
类型像是与any
类型相反, 它表示没有任何类型
。当一个函数没有返回值时, 其返回值类型时void:
function getData():void{
console.log('我是void类型')
}
console.log(getData())
function getData22():void{
console.log('我是void类型')
return '123' //提示报错 不能将类型“string”分配给类型“void”
}
声明一个void
类型的变量没有什么大用,因为你只能为它赋予undefined
let mm:void = undefined
console.log(mm) //undefined
但是void
可以返回undefined
值,比如:
function fn2():void{
return undefined;
}
9.Never
表示永远不会返回值,连undefined
都不会返回
function fn():never{
throw new Error('报错了')
}
10.Null和Undefined
TypeScript里,undefined
和null
两者各自有自己的类型分别叫做undefined
和null
。 和void相似,它们的本身的类型用处不是很大:
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
默认情况下null
和undefined
是所有类型的子类型。 就是说你可以把null
和undefined
赋值给number
类型的变量。
11. 字面量申明类型
TS支持将一个字面量当成一个类型使用。
比如: let name: "Lisa";
name
变量的类型是"Lisa"
,它只能兼容字面量值为"Lisa"
的变量, 也只能接受"Lisa"
作为赋值数据。
let name1:'Lisa'
name1 = 'Lisa'
name1 = "iric" //不能将类型“"iric"”分配给类型“"Lisa"”
「TS提供3中字面量类型:」
- 字符串字面量类型:使用字符串字面量作为类型。
let sex : 'male' | 'female';
sex = 'male'
sex= 'female'
- 布尔字面量类型:使用布尔字字面量作为类型
let state = false || true
state = false
state = true
state = 12 //不能将类型“number”分配给类型“boolean”
- 数字字面量类型: 使用数字字面量作为类型
let num = 1 | 2 | 3 | 4 | 5
12. unknow
表示**「未知类型的值」**【一个安全的any】
类型不知道时可以使用unknow
let num: number = 10
let m:any = 12
m = 'ok'
let n: unknown;
n = true
n = 50
num = m //m的值是any类型, 它可以赋值给任意变量
num = n //unknow不能给别的类型的变量赋值
「unknown和any的主要区别:」
unknown
类型会更加严格, 不像any那样不做类型检查,反而unknow因为未知性
,不允许访问
属性, 不允许赋值
给其他明确类型的变量。 你可以把任何值赋值给unknown
, 但是不能调用属性和方法
。
let value: unknown
value = true
value = 'lisa'
console.log(value.length) //错误写法9
- 如果需要使用属性和方法, 那么你可能需要使用类型断言
let value: unknown
value = true
value = 'lisa'
console.log((value as string).length) //错误写法
- 如果联合类型中有unknown,那么最终得到的都是unknown类型:
type U1 = unknown | null
type U2 = unknown | string
type U3 = unknown | number
//类型别名U1、U2、U3都是unknown类型
13. 类型断言
有些情况下, 变量的类型对于我们来说时很明确的, 但是TS编译器却并不清楚, 此时,可以通过类型断言来告诉编译器变量的类型.
「断言有2中形式:」
变量 as 类型
<类型>变量
let s = e as number; //把s当为number类型
let s1 = <number>e;
let someValue1:unknown = 'this is a string'
let strLength1: number = (someValue1 as string).length;
console.log(strLength1) //16
let someValue2:unknown = 'this is a string'
const strLength2: unknown = (<string>someValue2).length
console.log(strLength2) //16
14、联合类型
联合类型表示**「取值」可以为「多种类型中的一种」**
function toString2(x:number | string):string{
return x.toString()
}
15. object 表示一个js对象
{}用来指定对象中包含哪些属性
let o:object;
let fn = function(){}
「语法:{属性: 属性值,属性:属性值}」
let obj1: {
name: string,
age?: number
}
属性后面加一个**?**,表示的是 可选属性,可以加也可以不加
obj1={
name:'Iric',
age: 20
}
「可选属性:」
name
属性是必选属性age
属性和gender
属性是可选属性[propName: string]
: unknown 表示任意类型的属性
let obj2: {name: string, [propName: string]: unknown}
obj2 = {
name: '猪八戒',
age: 18,
gender:'男'
}
let fn:(a: number, b: number) => number;
fn = function(m,n):number{
return m +n
}