学习typeScript 列表

最新推荐文章于 2024-08-21 01:59:18 发布

wxy270

最新推荐文章于 2024-08-21 01:59:18 发布

阅读量2.1k

点赞数 1

分类专栏： typescript 文章标签： typescript

typescript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言
它是 JavaScript 的一个超集，TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

开发环境的安装

1 安装Node.js
2 安装TypeScript

npm install typescript -g
tsc --version

3 使用TypeScript
3.1 生成 package.json

tsc --init //生成配置文件，tsconfig.json

vscode下实现typescript自动编译 ===》》vscode–>终端–>运行任务–>tsc监视

3.2 编写代码

let myname:string='wang';
console.log(myname);

3.3 编译和生成

tsc 1.ts
node 1.js

数据类型

Undefined
Null 空
string 字符串
Number 数值
Boolean 布尔
enum 枚举
any 任意
void 空
Array 数组
Tuple 元祖

布尔类型(boolean)

let married: boolean=false;

数字类型(number)

let age: number=10;

字符串类型(string)

let firstname: string='wang';

数组类型(array)

let arr2: number[]=[4,5,6];
let arr3: Array<number>=[7,8,9];

元组类型(tuple)
是数组类型中的一种

let fullname: [string,string]=['zhang','san'];

枚举类型(enum)

事先考虑某一个变量的所有的可能的值，尽量用自然语言中的单词表示它的每一个值
比如性别、月份、星期、颜色、单位、学历

 enum Gender{ GIRL, BOY } 
 console.log(李雷是${Gender.BOY}); console.log(韩梅梅是${Gender.GIRL});
enum Week{ MONDAY=1, TUESDAY=2 } 
console.log(今天是星期${Week.MONDAY});

任意类型(any)

let root:any=document.getElementById('root');
root.style.color='red';

null 和 undefined
null 和 undefined 是其它类型的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined

let x: number;
x = 1; // 运行正确
x = undefined;    // 运行错误
x = null;    // 运行错误

let y: number | null | undefined;
y = 1; // 运行正确
y = undefined;    // 运行正确
y = null;    // 运行正确

void 类型
void表示没有任何类型，一般用于定义方法的时候方法没有返回值

function greeting(name:string):void {
    console.log('hello',name);
}
greeting('wang');

never类型
never是其它类型(null undefined)的子类型，代表不会出现的值
(一般一个方法可能抛异常才用never)

let x: never;
x = (()=>{ throw new Error('exception')})();

function divide(a:number,b:number):never|number{
return a/b
}
divide(10,2)
divide(10,0)

函数

函数的定义

function hello(name:string):void {
    console.log('hello',name);
}
hello('wang');

没有返回值

let hello2 = function (name:string):void {
    console.log('hello2',name);
}
hello('wang');
hello2('wang');

3 可选参数

在TS中函数的形参和实参必须一样，不一样就要配置可选参数,而且必须是最后一个参数

function print(name:string,age?:number):void {
    console.log(name,age);
}
print('wang');  //   如果age后面没有？的，实参这样会报错

4 默认参数

function ajax(url:string,method:string='GET') {
    console.log(url,method);
}
ajax('/users');

5 剩余参数

function sum(...numbers:number[]) {
    return numbers.reduce((val,item)=>val+=item,0);
}
console.log(sum(1,2,3));

6 函数重载

在Java中的重载，指的是两个或者两个以上的同名函数，参数不一样
的TypeScript中，表现为给同一个函数提供多个函数类型定义

let obj: any={};
function attr(val: string): void;
function attr(val: number): void;
function attr(val:any):void {
  if (typeof val === 'number') {
      obj.age=val;
  } else {
      obj.name=val;
  }
}
attr('wang');
attr(9);
attr(true);
console.log(obj);

类

类的定义

"use strict";
var Person = /** @class */ (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.getName = function () {
        return this.name;
    };
    Person.prototype.setName = function (name) {
        this.name = name;
    };
    return Person;
}());
var p = new Person('张三', 10);
console.log(p);
p.setName('李四');
console.log(p);

2 继承

class Person {
    name: string;//定义实例的属性，默认省略public修饰符
    age: number;
    constructor(name:string,age:number) {//构造函数
        this.name=name;
        this.age=age;
    }
    getName():string {
        return this.name;
    }
    setName(name:string): void{
        this.name=name;
    }
}
class Student extends Person{
    no: number;
    constructor(name:string,age:number,no:number) {
        super(name,age);
        this.no=no;
    }
    getNo():number {
        return this.no;
    }
}
let s1=new Student('wang',10,1);
console.log(s1);

3 类里面的修饰符

class Father {
    public name: string;  //类里面 子类 其它任何地方外边都可以访问
    protected age: number; //类里面 子类 都可以访问,其它任何地方不能访问
    private money: number; //类里面可以访问， 子类和其它任何地方都不可以访问
    constructor(name:string,age:number,money:number) {//构造函数
        this.name=name;
        this.age=age;
        this.money=money;
    }
    getName():string {
        return this.name;
    }
    setName(name:string): void{
        this.name=name;
    }
}
class Child extends Father{
    constructor(name:string,age:number,money:number) {
        super(name,age,money);
    }
    desc() {
        console.log(`${this.name} ${this.age} ${this.money}`);
    }
}

let child = new Child('wang',10,1000);
console.log(child.name);
console.log(child.age);
console.log(child.money);

4 静态属性静态方法

静态属性或方法是指可以不实例化直接访问的

class Father {
    static className='Father';
    static getClassName() {
        return Father.className;
    }
    public name: string;
    constructor(name:string) {//构造函数
        this.name=name;
    }

}
console.log(Father.className);
console.log(Father.getClassName());

5 多态

父类定义方法不实现，每一个子类都有自己不同的实现
class Animal{
  speak() {
      throw new Error('子类必须实现此方法!!!');
  }
}
class Dog extends  Animal{
  speak(){
      console.log('小狗汪汪汪');
  }
}
class Cat extends  Animal{
  speak(){
      console.log('小猫喵喵喵');
  }
}
let dog=new Dog();
let cat=new Cat();
dog.speak();
cat.speak();

6 抽象方法

抽象类和方法不包含具体实现，必须在子类中实现
抽象方法只能出现在抽象类中

abstract class Animal{
    abstract speak():void;
}
class Dog extends  Animal{
    speak(){
        console.log('小狗汪汪汪');
    }
}
class Cat extends  Animal{
    speak(){
        console.log('小猫喵喵喵');
    }
}
let dog=new Dog();
let cat=new Cat();
dog.speak();
cat.speak();

接口

接口是一种规范的定义，定义了行为和动作的规范
接口定义了某些类必须遵守的规范
接口不关心类的内部状态数据，也不关心细节
类似与抽象类，还增加了属性、函数等类型

1 属性类接口

对对象的约束

function getUserInfo(user: {name:string,age:number}) {
    console.log(user.name,user.age);
}
getUserInfo({name:'wang',age:9});
interface userInterface{
    name: string,
    age: number,
    height?:number
}
function getUserInfo(user:userInterface) {
    console.log(user.name,user.age,user.height);
}

getUserInfo({name:'wang',age:9});

2 函数类型接口

对方法传入的参数和返回值进行约束

 interface discount{
  (price:number):number
}
let cost:discount = function (price:number):number {
    return price*.8;
}
console.log(cost(100));

3 可索引接口

对数组对象的约束

interface userInterface{
  [index:number]:string
}
let arr:userInterface=['wang1','wang2'];
console.log(arr);

4 类接口

对类的约束

interface Animal{
  name: string;
  speak(something:string):void
}
class Dog implements Animal{
  name: string;
  constructor(name) {
      this.name=name;
  }
  speak(something:string){
      console.log(something);
  }
}
let dog=new Dog('欢欢');
dog.speak('汪汪汪');

5 接口扩展

接口可以继承接口

interface Animal{
  name: string;
  speak(something:string):void
}
interface EggAnimal extends Animal{
 giveEgg():void
}
class Duck implements EggAnimal{
  name: string;
  constructor(name) {
      this.name=name;
  }
  speak(something:string){
      console.log(something);
  }
  giveEgg() {
      console.log('鸭子下蛋');    
  }
}
let duck=new Duck('欢欢');
duck.giveEgg();