TypeScript 类型学习

TS 类型列表

number、string、boolean

IDE 使用 Webstorm，新建一个 basis.ts

//声明一个变量 a，同时指定类型为 number，注意是小写
let a: number;

// a 的类型设置为 number，在以后使用过程中 a 的值只能是数字
a = 10;
a = 33.11;
//a='hello';//会报错，因为变量 a 类型是 number，不能赋值字符串

let b: string;
b = 'hello';
//b = 123;

//声明完变量直接赋值
let c: boolean = false;

//如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let d = false;

//JS中的函数是不考虑参数的类型和个数的
/*function sum(a,b){
    return a+b;
}

console.log(sum(123,456));//579
console.log(sum(123,"456"));//123456
*/

//方法参数可以声明类型，方法返回值也可以声明类型
function sum(a: number, b: number):number {
    return a + b;
}

console.log(sum(123,456));

//记住，在字符串前添加 + 号，可以将string转为number（字符串内容为数字才有意义）
console.log(1+ +'1')//输出2

在 Webstorm 的 terminal 运行 tsc basis.ts 是报错了：tsc : 无法加载文件 C:\Users\00lix\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies

完整报错如下：

解决办法：
以管理员身份运行powershell执行 set-ExecutionPolicy RemoteSigned，选择 Y 或者 A 即可

再次执行 tsc basis.ts 即可编译完成

每次修改完成后都需要重新编译下。我们新建一个 index.html 引入 basis.js，运行到浏览器

字面量

//也可以直接使用字面量进行类型声明
//限制了 a 只能是 10
let a: 10;
a = 10;
//a = 11;//会报错

//可以是使用 | 来连接多个类型(联合类型)
let b: "male" | "female";
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = "hello";

any、unknown

//任意类型 可以任意赋值，可以赋值给任何变量，不建议使用
let d:any = 'hello';
d = 100;
console.log(d);//输出100
//当一个数组中要存储多个数据,个数和类型不确定,此时也可以使用any类型来定义数组
let arr:any[] = [100,'hello',true];
console.log(arr)//输出：[100, 'hello', true]
//当然有缺点，编写代码时不容易提示出错误：
console.log(arr[1].split(""))//['h', 'e', 'l', 'l', 'o']
console.log(arr[0].split(""))//报错

//ts 解析器会自动解析为 any，不建议使用
//let d;

//类型安全 不能直接赋值其他变量
let e:unknown;
//c = e;//直接赋值会报错，因为类型不一致

//可以先进行类型检查
if(typeof e === "string"){
    c = e;
}

//类型断言 告诉编译器的实际类型 两种写法如下：
s = e as string;
s = <string>e;

void

//void 表示空，以函数为例，表示没有返回值
function fn():void{

}
//永远不会返回结果
function fn2():never{
    throw new Error("报错了")
}

object

//object 表示一个js对象
let a: object;
a = {};

//{}用来指定对象中有哪些属性
//语法：{属性名:属性值,属性名:属性值}
//属性后边加?表示属性可选
let b: { name: string, age?: number };
b = {name: '孙悟空', age: 18};

//[propName:string]:any 任意类型的属性
let c: { name: string, [propName: string]: any }
c = {name: '孙悟空', age: 18, gender: '男'};

//设置函数结构的类型声明：
//语法：(形参:类型,形参:类型...)=>返回值
let d: (a: number, b: number) => number;
d = function (n1, n2): number {
    return n1 + n2;
}

array

创建数组

/**
 * 数组的类型声明：
 *      类型[]
 *      Array<类型>
 */
//string[]表示字符串数组
let e:string[];//空数组
e=['a','b','c'];

//number[]数值数组
let f:number[];

let g:Array<number>;
g = [1,2,3];

数组长度

let names:string[] = ['周杰伦','周星驰','周笔畅']
console.log(names.length)//数组长度：3

数组取值、存值

let names:string[] = ['周杰伦','周星驰','周笔畅']
console.log(names[1])//数组取值：周星驰
names[2] = '周深'//数组存值
console.log(names)//[ '周杰伦', '周星驰', '周深' ]

数组添加元素
方式1：下标方式

let names:string[] = ['周杰伦','周星驰','周笔畅']
names[3] = '周迅'//如果索引不存在就表示添加元素
//names[names.length] = '周迅'//也可以替换成这行
console.log(names)//[ '周杰伦', '周星驰', '周笔畅', '周迅' ]

方式2：push

let names:string[] = ['周杰伦','周星驰','周笔畅']
let len=names.push('周迅')
console.log(len)//4

遍历数组
方法1：for循环

let nums:number[] = [100,200,300]
for(let i:number = 0;i<nums.length;i++){
    console.log(nums[i])
}

方法2：forEach循环
注意：forEach方法的参数是一个函数，这种做为参数的函数也称为回调函数

let names: string[] = ['周杰伦', '周星驰', '周笔畅']
names.forEach(function (item, index) {
    console.log('索引:' + index + '，值为:' + item)
})

注意：此处的回调函数，是作为forEach方法的实参传入，不应该指定类型注解!

方法3：some
forEach 遍历整个数组，无法中间停止。我们可以用 some。some方法：遍历数组，查找是否有一个满足条件的元素（如果有，就可以停止循环)

循环特点：根据回调函数的返回值，决定是否停止循环。如果返回true，就停止;返回false，就继续循环

some方法的返回值:布尔值。如果找到满足条件的元素，结果为 true;否则，为false

let nums: number[] = [1, 9, 20, 7, 8, 2]
let has: boolean = nums.some(function (num) {
    console.log(num)
    if (num > 10) {
        return true
    }
    return false
})
console.log(has)

tuple

/**
 * 元组就是固定长度的数组
 *      语法：[类型，类型，类型]
 */
	let h:[string,string,number];
    h = ['hello','abc',100.234];
    //四舍五入保留两位小数
    console.log(h[2].toFixed(2))//输出 100.23

enum

枚举作用：组织有关联数据的一种方式
使用场景：当变量的值，只能是几个固定值中的一个，应该使用枚举来实现
注意：Js中没有枚举，这是Ts 为了弥补Js自身不足而新增的

enum Gender {
    Male,
    Female
}

let i: { name: string, gender: Gender }
i = {
    name: '孙悟空',
    gender: Gender.Male
};
console.log(i.gender === Gender.Male);

约定枚举名称、成员名称以大写字母开头，多个成员之间使用逗号(，）分隔

注意：
1、枚举中的成员，根据功能自己指定
2、枚举中的成员不是键值对
3、枚举成员是只读的，也就是说枚举中的成员可以访问，但是不能赋值

问题:将枚举成员赋值给变量，变量的值是什么呢?
数字枚举：枚举成员的值为数字的枚举

枚举成员是有值的，默认为:从 0 开始自增的数值

enum Gender {
    Female,
    Male
}

console.log(Gender.Male)//输出0
console.log(Gender[0])//输出Female

当然也可以给枚举的成员初始化值

enum Gender { Female = 1,Male }// Female => 1 Male =>2
enum Gender { Female = 1,Male = 100 }// Female => 1 Male => 100

字符串枚举：枚举成员的值是字符串
字符串枚举没有自增长行为，因此，每个成员必须有初始值

enum Gender { Female = '女'，Male = '男'}

undefined、null

undefined：表示声明但未赋值的变量值（找不到值）
null：表示声明了变量并已赋值，值为null（能找到，值就是null）

let u1: undefined
let u2: null = null
console.log(u1);//undefined
console.log(u2);//null

其他

类型别名
类型别名一般用于给一个联合类型取新的名字，对代码的整洁还是有很大的帮助

type c = number | string | boolean
let a :c= 10 

&
ts 类型中的 & 表示交集，两个类型都拥有的类型

let j: { name: string } & { age: number };
j = {name: '孙悟空', age: 18};

格式化快捷键：ctral+alt+L

变量命名规则
1、变量名称只能出现：字母、数字、下划线（_），美元符号（$），不能以数字开头
2、变量名区分大小写
3、推荐驼峰命名（首字母小写，后边每个单词首字母大写）

比较运算符

大于：>
大于等于：>=
小于：<
小于等于：<=
等于：===
不等于：!==

类型断言

告诉编译器我知道变量是什么类型的
语法1：<类型>变量名
语法2：值 as 类型

// 定义一个函数，得到一个字符串或数字的长度
    function getLength(str:number|string):number {
        if((<string>str).length){
            return (str as string).length;
        }else{
            return str.toString().length
        }
    }

    console.log(getLength(1234567))