java编程者快速掌握ts变量类型

JAVA编程者快速掌握typeScript

1. TypeScript是JavaScript的超集。

2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。

3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。

4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。

5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

   TypeScript 开发环境搭建

   1. 下载Node.js

      • 官网下载Node.js (nodejs.org)

   2. 安装Node.js

   3. 使用npm全局安装typescript

      • 进入命令行
      • 输入：npm i -g typescript

   4. 创建一个ts文件

   5. 使用tsc对ts文件进行编译

      • 进入命令行

      • 进入ts文件所在目录

      • 执行命令：tsc xxx.ts

      • 自动类型判断

        • TS拥有自动的类型判断机制

        • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

        • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

          类型总览：

        类型	例子	描述
        number	1, -33, 2.5	任意数字
        string	‘hi’, “hi”, hi	任意字符串
        boolean	true、false	布尔值true或false
        字面量	其本身	限制变量的值就是该字面量的值
        any	*	任意类型
        unknown	*	类型安全的any
        void	空值（undefined）	没有值（或undefined）
        never	没有值	不能是任何值
        object	{name:‘孙悟空’}	任意的JS对象
        array	[1,2,3]	任意JS数组
        tuple	[4,5]	元素，TS新增类型，固定长度数组
        enum	enum{A, B}	枚举，TS中新增类型

   变量申明

// 字符串类型变量 类似对象图  对象名:类名
let a: string
a= = "10"

// 数字类型变量
let b: number;

// 严格类型要求，但类型错误仅在 TypeScript 编译时出现 但是运行转换为js任然可以实现
a = "20";

无限制类型，可赋值任意类型

b = 30;

// 类型变换为字符串

a = "我是帅哥";
a = a + "" + b;

自动类型推断

let c: boolean = false; //申明变量的时候直接赋值
或者
let cc=true //效果一样的

函数声明

let ss: Function = () => {
    console.log("ss");
};

// 函数声明，指定参数类型和返回值类型

let sum: Function = (a: number, b: number): number => {
    return a + b;
};

// 函数声明（另一种形式）

function divide(a: number, b: number): number {
    return a - b;
}

字面量，

类似常量，无法二次赋值

let aa: 10;
aa = 20;//这里编译器报错

// 字面量常用于限制变量值

let name1: "jack" | "john" | "mike" = "jack";
console.log(name1);
name1 = "john";
name1 = "mike";  // 只能赋值三个中的一个

联合类型

let op: string | boolean = false;
op = "这是字面量的第二种用法，限制类型";

任意类型，

类似 JavaScript 的 var

let d: any;
d = false;
d = 13;
d = "相当于设置为 any 后，关闭了 TypeScript 的类型检测";

// 隐式 any

let d1;
let d2: boolean = true;

// 创建变量不复制即为隐式 any

d2 = 45; // 直接申明赋值默认解析为赋值类型
d1 = 45;
d1 = "asas";

未知类型

当不知道传递过来的参数是什么,或者没想好变量定义什么时候就可以使用 未知类型

let e: unknown;
e = 10;
e = "hello";
e = {};

// 类型判断和处理

//未知变量和any的区别是,any可以被任何变量接收,其他变量接收后就会变成不受ts 的type监管的原生js变量
//所以一般推荐使用uknow ,未知变量不能直接赋值,需要经过逻辑处理编译器才不会报错
if (typeof e === 'string') {
    let e1: string = e as string;
}

断言 (对应java强转) 其实ts有点想java顶级超类 可以接收任意类型 然后强转为他们

// :判断   as (强转)  any 简记为不受ts判断的类型 ukonw 类似超累可以接收所有类型,
// 根据typeof 判断类型是否是需要类型 as强转换
/**
 * type js 慢慢开始对类型进行限定越来越想java
 */
let s:String=e as String

void 类型，用于函数返回值

let bianli: Function = (arr: number[]): void => {
    for (let i = 1; i < arr.length; i++) {
        console.log(arr[i]);
    }
};

函数返回值类型为 boolean 或 number

let sout = (a: number, b: boolean): boolean | number => {
    if (a > 3)
        return false;
    return a;
};

never 类型，表示函数永远不会返回 对应java异常抛出

let login = (a: boolean): never => {
    throw new Error("code error 代码线程停止 用来抛异常");
};

对象类型，用于限制对象内元素类型

let obj: object = {
    name: String,
    age: Number
};
obj = {
    name: "123",
    age: 15
};

不推荐的对象类型声明方式 这样可以直接修改对象类型,限制度又没有了

let obj2: Object;
obj2 = {
    ahe: 32,
    name: "ASAS"
};
obj2 = {
   
};

推荐使用对象字面量修饰变量

let  obj3 :{
    asas: string
    money: number
};

对象属性可选性

let obj4: {
    name: string,
    a?: number
};

对应java 可选属性

obj4 = { name: "name是必须的" };
obj4 = {
    name: "name是必须的,加了?的属性表示可选",
    a: 888
};

// 可选属性的实际使用

let obj5: {     //java的动态变量这样就可以做到任意变量参数 除了对象,还由方法
    name: string,
    //表示 变量名为字符类型,可变变量值为字符或者数字
    [propName: string]: string | number // 或者使用 union 类型包含可能的其他属性类型
};
obj5 = {
    name: "name是必须的"
};

// 当使用字面来申明函数时候格式如下,但是很麻烦推荐原来的const 方法名=():返回值=> 接收即可

const methodAdd: (name: string, age: number) => number = (name, age) => {
    console.log(name);
    return 1;
};

数组类型声明

let arr: number[] = [1, 2];

元组类型，长度固定的数组

let h: [string, String] = ["1", "2"];
h = ["3", "4"];
// 超出长度会报错
// h = ["3", "4", ""];

枚举类型

enum MaleStatus {
    Male,
    Female
}
let p: { name: string, gender: MaleStatus } = { name: "hcyh", gender: MaleStatus.Male };

/或 字符串或数字类型

let j: string | number;

与，用于限制对象内部的元素

let u: { name: string } & { gender: MaleStatus };
u = { name: "hcyh", gender: MaleStatus.Male };
// 不满足交叉类型出错
 u = { name: "hcyh", "nv" };

类型别名，提高可读性

type pre = 1 | 2 | 3 | 4 | 5;
type suffix = 6 | 7 | "你好帅";

方便使用和书写

let l1: pre | suffix;