typescript 学习笔记
2020-09-08 本文已影响0人
McDu
1. 原始数据类型
string number boolean null undefined enum symbol
空值一般用 void 表示,void 可以表示变量,也可表示函数返回值。
2. 任意值 any
声明一个变量为 any 后,对它的任何操作, 返回的内容的类型都是任意值,变量如果在声明的时候未指定类型,那么它会被识别为 any 类型。
3. 类型推论
TS 会依据类型推论规则推断出一个值,如果定义的时候没有赋值,不管之后有没有赋值,都会被推断为 any 类型而完全不被类型检查。
// 不报错
var num;
num = 1;
num = true;
4. 联合类型
联合类型表示取值可以为多种类型中的一种。
如果定义的时候没有赋值,不管之后有没有赋值,都会被推断为 any 类型而完全不被类型检查。
只能访问此联合类型内的所有类型里共有的属性或方法。
5. 对象类型-接口
可描述类的一部分抽象行为,也可描述对象的结构形状。
接口一般大写,有的编程语言建议接口的名称加上 i 前缀。
赋值的时候,变量的形状必须和接口的形状保持一致。
接口中可定义可选属性、只读属性、任意属性。
interface Istate1 {
name: string,
age?: number
}
var obj1: Istate1;
obj1 = {name: 'abc', age: 12}
obj1 = {name: 'bcd'}
// 属性个数不确定时,任意属性类型必须是 any
interface Istate2 {
name: string,
age?: number,
[propName: string]: any
}
var obj2 : Istate2 = {name: 'abc', age: 4, color: 'blue', height: 120}
// 只读属性
interface Istate3 {
name: string,
readonly age: number
}
6. 数组
// 数组表示法 :类型 + []
var arr:number [] = [1, 2, 3]
var arr2:string [] = ['1', '2', '3']
var arr3:any [] = [0, true, '3']
// 数组泛型 Array <elemType>
var arrType: Array<number> = [1, 2, 3]
var arrType2: Array<string>= ['1', '2', '3']
var arrType3: Array<any> = [0, true, '3']
// 接口表示法
interface Istate {
name: string,
age: number
}
interface IArr {
[index: number]: Istate
}
var arrType4: IArr = [{name: 'jerry', age: 3}]
var arrType5: Array<Istate> = [{name: 'jerry', age: 3}]
var arrType6: Istate [] = [{name: 'jerry', age: 3}]
7. 函数类型
函数约束 :函数本身参数约束、返回值约束、函数本身赋值的变量的约束
可采用重载的方式才支持联合类型的函数关系。
// 表达式类型的函数
var fun1 = function(name:string, age:number):number {
return age
}
var fun2 :(name:string, age:number) => number = function(name:string, age:number):number {
return age
}
// 接口
interface IFun {
(name:string, age:number): number
}
var fun3: IFun = function(name:string, age:number):number {
return age
}
// 对于联合类型的函数,可用重载的方式
function getValue(value:number):number;
function getValue(value:string):string;
function getValue(value:string|number):string|number {
return value
}
let a:number = getValue(1)
let b:string = getValue("1")
8. 类型断言
类型断言可以用来手动指定一个值的类型
语法:<类型>值 or 值as类型
在 tsx 语法中必须使用后面一种
类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的。
let name:number|string = "10"
name = 4
// 报错
console.log(name.length)
// 类型断言
function getAssert(name:string|number) {
// return (name as string).length
return (<string>name).length
}
9. 类型别名
类型别名可以给类型起一个别名
采用关键字 type,eg:type Name = string | number
Name 表示可以设置 string 或 number 的类型
也可以采用 type 来约束取值只能是某些字符串中的一个:
eg:type EventName = "click" | "scroll" | "mousemove"
// ok
type strType = string | number | boolean
var str:strType = '10'
str = 2
str = true
// interface
interface muchType1 {
name: string
}
interface muchType2 {
age: number
}
type muchType = muchType1 | muchType2
var obj1:muchType = {name: 'lucy'}
var obj2:muchType = {age: 43}
var obj3:muchType = {name: 'pen', age:32}
// limit
type gender = "1" | "2"
function getGender(g: gender):string {
return g
}
getGender("1")