TS-01 定义基本类型

一、定义类型

基础类型

let bool: boolean = true //布尔
let num: number = 123 // 数字
let str: string = 'abc' // 字符串

数组类型

let arr1: number[] = [1,2,3] // 数字数组
let arr2: Array<number> // 写法二
let arr3: (string | number)[] // 数字和字符串类型的数组, 检测联合类型
let mySons:{name:string}[] = [{name: 'hhh'}] // 对象数组

元组类型

固定长度，必须按照定义的类型和长度

let tuple: [string, number, boolean] = ['a',1, false]

越界元素

如果超过长度的值叫做越界元素, 2.6 版本之前越界元素只要是规定的其中一种都行,2.6 之后不能超过长度；

any 类型和 void 类型

1. any 任何类型，any 类型是不限制类型

什么类型都可以写（能不用尽量不用 any）

let arr: any[] = [1,2,'3']

2. void 类型，与 any 类型相反，什么类型都不是

经常用于一个函数不需要返回值，undefined 和 null 也可以赋值给 void 类型；（当 null 赋值给 void 时需要关闭 tsconfig 的 strict）

const test = (text: string): void => {
    console.log(text)
}
test('str') // 只能传字符串, 否则报错;

let v: void;
v = undefined;
v = null;

unknown

ts3.0 新增的一个 顶级类型，相对于 any 来说是安全的

1. 任何类型的值都可以赋值给 unknown 类型

   let value1: unknown
   value1 = 1
   value1 = 'a'

2. never 是 unknow 的子类型

   type type6 = never extends unknow ? true : false // 返回true

null 和 undefined

在 ts 中即是值也是类型

let u: undefined;
u = undefined;
num = undefined; // 将undefined赋值给num,如果开了tsconfig的严格检查则不能赋值;

object 类型

function getObj(obj: object):void {
    console.log(obj)
}
getObj({name: 'hhh'}) // 只能传入对象

类型推论

let myNumber = 5
myNumber = 'a' // 报错, 再第一次定义时已经给出类型了

类型断言

类型断言像是一种类型转换，在我们知道该类型是什么类型，通过特定语法强行转换成该类型；

const getLength = (target: string | number): number => {
    // 这里如果直接使用target.length会报错, 因为number是没有length属性的;
    // 支持两种写法定义类型;
    // jsx时, 只能使用as语法断言, 因为前者会被识别为标签
    if((<string>target).length || (target as string).length === 0){
        return (<string>target).length
    } else {
        return target.toString().length;
    }
}

1、<string>target 断言

2、(target as string).length 断言

3、非空断言

非空断言 使用! 后缀，断言值不是 undefined 或 null 如: let x = name! 函数调用时: cb!()

4、确定赋值断言 先声明类型后断言，有时使用时检测到未赋值就使用，可以加上该断言 let a!: number;

5、 const 断言 将值锁为死值，可以使用 as const 或者 <const> 来断言

const x = 'x'; // x: 'x'
let y = 'y'; // y: string; 这里的y为string类型不为死值
let y = 'y' as const; // y: string;

// 对象时
const action = <const>{
    type: 'SET_VALUE',
    payload: [1,2,3]
}
action.payload.push(1) // 报错

在访问 window 上的属性并赋值，可以使用 as any 来断言

(window as any).foo = 1

总结类型：

• string、number、boolean
• number[]、Array<string>、(string|number)[]
• void、never
• unknown、undefined、null
• (<string>target)
• (target as string)
• (window as any)