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 a!: number;
let b!: number;
//并且申明和初始化,不能同时进行
a = 16;
b = 13;

console.log(a);

const sum = (a: number, b: number): number => a + b;
console.log("和是" + sum(a, b));
联合类型
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;

第二章:面向对象

面向对象是程序中一个非常重要的思想,但是对于java的使用者来说已经很熟悉,所以不在附属

1、类(class)

要想面向对象,操作对象,首先便要拥有对象,那么下一个问题就是如何创建对象。要创建对象,必须要先定义类,所谓的类可以理解为对象的模型,程序中可以根据类创建指定类型的对象,举例来说:可以通过Person类来创建人的对象,通过Dog类创建狗的对象,通过Car类来创建汽车的对象,不同的类可以用来创建不同的对象。

  • 定义类(和java一样):

    • class 类名 {
      	属性名: 类型;
      	
      	constructor(参数: 类型){
      		this.属性名 = 参数;
      	}
      	
      	方法名(){
      		....
      	}
      
      }
      
  • 示例:

    • class Person{
          name: string;
          age: number;
      
          constructor(name: string, age: number){
              this.name = name;
              this.age = age;
          }
      
          sayHello(){
              console.log(`大家好,我是${this.name}`);
          }
      }
      

java编程者快速掌握ts变量类型_第1张图片

设置器和访问器,构造函数也是一样的,但是构造器在ts种不允许多个,并且成员的权限和java也是一模一样,一般使用private 私有化变量然后使用设置器和访问器为外界提供读写路径
java编程者快速掌握ts变量类型_第2张图片
ts种私有变量一般加_,并且值得注意的是ts对设置器和访问器有转门的get,set关键字
这样的使用设置器只需要

let a=new people("jack",17);
a.name="XXXX"//无需在使用set属性名

类的出现是为了限制对象类型,和字面量申明对象相似,但是这种静态语言(和java高度相似)可以获得很多关系

2、面向对象的特点

  • 封装

    • 对象实质上就是属性和方法的容器,它的主要作用就是存储属性和方法,这就是所谓的封装

    • 默认情况下,对象的属性是可以任意的修改的,为了确保数据的安全性,在TS中可以对属性的权限进行设置

    • 只读属性(readonly):

      • 如果在声明属性时添加一个readonly,则属性便成了只读属性无法修改
    • TS中属性具有三种修饰符:

      • public(默认值),可以在类、子类和对象中修改
      • protected ,可以在类、子类中修改
      • private ,可以在类中修改
    • 示例:

      • public

        • class Person{
              public name: string; // 写或什么都不写都是public
              public age: number;
          
              constructor(name: string, age: number){
                  this.name = name; // 可以在类中修改
                  this.age = age;
              }
          
              sayHello(){
                  console.log(`大家好,我是${this.name}`);
              }
          }
          
          class Employee extends Person{
              constructor(name: string, age: number){
                  super(name, age);
                  this.name = name; //子类中可以修改
              }
          }
          
          const p = new Person('孙悟空', 18);
          p.name = '猪八戒';// 可以通过对象修改
          
      • protected

        • class Person{
              protected name: string;
              protected age: number;
          
              constructor(name: string, age: number){
                  this.name = name; // 可以修改
                  this.age = age;
              }
          
              sayHello(){
                  console.log(`大家好,我是${this.name}`);
              }
          }
          
          class Employee extends Person{
          
              constructor(name: string, age: number){
                  super(name, age);
                  this.name = name; //子类中可以修改
              }
          }
          
          const p = new Person('孙悟空', 18);
          p.name = '猪八戒';// 不能修改
          
      • private

        • class Person{
              private name: string;
              private age: number;
          
              constructor(name: string, age: number){
                  this.name = name; // 可以修改
                  this.age = age;
              }
          
              sayHello(){
                  console.log(`大家好,我是${this.name}`);
              }
          }
          
          class Employee extends Person{
          
              constructor(name: string, age: number){
                  super(name, age);
                  this.name = name; //子类中不能修改
              }
          }
          
          const p = new Person('孙悟空', 18);
          p.name = '猪八戒';// 不能修改
          
    • 属性存取器

      • 对于一些不希望被任意修改的属性,可以将其设置为private

      • 直接将其设置为private将导致无法再通过对象修改其中的属性

      • 我们可以在类中定义一组读取、设置属性的方法,这种对属性读取或设置的属性被称为属性的存取器

      • 读取属性的方法叫做setter方法,设置属性的方法叫做getter方法

      • 示例:

        • class Person{
              private _name: string;
          
              constructor(name: string){
                  this._name = name;
              }
          
              get name(){
                  return this._name;
              }
          
              set name(name: string){
                  this._name = name;
              }
          
          }
          
          const p1 = new Person('孙悟空');
          console.log(p1.name); // 通过getter读取name属性
          p1.name = '猪八戒'; // 通过setter修改name属性
          
    • 静态属性

      • 静态属性(方法),也称为类属性。使用静态属性无需创建实例,通过类即可直接使用

      • 静态属性(方法)使用static开头

      • 示例:

        • class Tools{
              static PI = 3.1415926;
              
              static sum(num1: number, num2: number){
                  return num1 + num2
              }
          }
          
          console.log(Tools.PI);
          console.log(Tools.sum(123, 456));
          
    • this

      • 在类中,使用this表示当前对象
  • 继承

    • 继承时面向对象中的又一个特性

    • 通过继承可以将其他类中的属性和方法引入到当前类中

      • 示例:

        • class Animal{
              name: string;
              age: number;
          
              constructor(name: string, age: number){
                  this.name = name;
                  this.age = age;
              }
          }
          
          class Dog extends Animal{
          
              bark(){
                  console.log(`${this.name}在汪汪叫!`);
              }
          }
          
          const dog = new Dog('旺财', 4);
          dog.bark();
          
    • 通过继承可以在不修改类的情况下完成对类的扩展

    • 重写

      • 发生继承时,如果子类中的方法会替换掉父类中的同名方法,这就称为方法的重写,和java一样

      • 示例:

        • class Animal{
              name: string;
              age: number;
          
              constructor(name: string, age: number){
                  this.name = name;
                  this.age = age;
              }
          
              run(){
                  console.log(`父类中的run方法!`);
              }
          }
          
          class Dog extends Animal{
          
              bark(){
                  console.log(`${this.name}在汪汪叫!`);
              }
          
              run(){
                  console.log(`子类中的run方法,会重写父类中的run方法!`);
              }
          }
          
          const dog = new Dog('旺财', 4);
          dog.bark();
          
        • 在子类中可以使用super来完成对父类的引用

    • 抽象类(abstract class)

      • 抽象类是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例

      • abstract class Animal{
            abstract run(): void;
            bark(){
                console.log('动物在叫~');
            }
        }
        
        class Dog extends Animals{
            run(){
                console.log('狗在跑~');
            }
        }
        
      • 使用abstract开头的方法叫做抽象方法,抽象方法没有方法体只能定义在抽象类中,继承抽象类时抽象方法必须要实现

3、接口(Interface)

接口的作用类似于抽象类,不同点在于接口中的所有方法和属性都是没有实值的,换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构,接口可以去限制一个对象的接口,对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时,可以让一个类去实现接口,实现接口时类中要保护接口中的所有属性。

接口ts中可以申明属性和方法,java只能申明属性,但是ts的属性和方法只能在实现类中进行实现
这里使用idea的生成构造器在接口生成失效

java编程者快速掌握ts变量类型_第3张图片

java编程者快速掌握ts变量类型_第4张图片

在 TypeScript 中,类实例赋值给接口变量的情况有两种可能的解释:结构化类型和类的实例满足接口的要求。

结构化类型

TypeScript 使用结构化类型系统,这意味着如果一个类型具有与另一个类型相同的结构(即相同的属性和方法),它们就是兼容的。在你的例子中,Person 类具有与 PersonInterface 相同的结构,包括 name、age 属性和 sayHello 方法。因此,它们是结构上兼容的。

类的实例满足接口的要求

TypeScript 允许类的实例去满足接口的要求,即使类没有显式使用 implements 关键字声明实现了该接口。如果类的结构与接口相匹配,TypeScript 会认为该类实现了接口,而不需要显式的 implements 关键字。

无需关键字implements 也是实现 关系
java编程者快速掌握ts变量类型_第5张图片

ts中有很多隐式申明,比如如果不写方法参数类型和返回值默认就是any(js变量)L,比如直接赋值计算结果,ts自动检查类型,这里接口也是一样的是满足条件的隐式申明,虽然好用,但是失去了ts的初衷(为了高可读)所以开发中想写java一样写就行了

4、泛型(Generic)

定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。

  • 举个例子:

    • function test(arg: any): any{
      	return arg;
      }
      
    • 上例中,test函数有一个参数类型不确定,但是能确定的时其返回值的类型和参数的类型是相同的,由于类型不确定所以参数和返回值均使用了any,但是很明显这样做是不合适的,首先使用any会关闭TS的类型检查,其次这样设置也不能体现出参数和返回值是相同的类型

    • 使用泛型:

    • function test<T>(arg: T): T{
      	return arg;
      }
      
    • 这里的就是泛型,也和java的使用一模一样

    • 那么如何使用上边的函数呢?

      • 方式一(直接使用):

        • test(10)
          
        • 使用时可以直接传递参数使用,类型会由TS自动推断出来,但有时编译器无法自动推断时还需要使用下面的方式

      • 方式二(指定类型):

        • test<number>(10)
          
        • 也可以在函数后手动指定泛型

    • 可以同时指定多个泛型,泛型间使用逗号隔开:

      • function test<T, K>(a: T, b: K): K{
            return b;
        }
        
        test<number, string>(10, "hello");
        
      • 使用泛型时,完全可以将泛型当成是一个普通的类去使用

    • 类中同样可以使用泛型:

      • class MyClass<T>{
            prop: T;
        
            constructor(prop: T){
                this.prop = prop;
            }
        }
        
    • 除此之外,也可以对泛型的范围进行约束

      • interface MyInter{
            length: number;
        }
        
        function test<T extends MyInter>(arg: T): number{
            return arg.length;
        }
        

r

你可能感兴趣的:(java,开发语言)