typescript 学习笔记

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")