TypeScript

TS基础语法

1.声明

语法:

let:类型 = 值(也可不赋初值)

1.1.变量声明

以关键字let开头的声明引入变量,该变量在程序执行期间可以具有不同的值

let hi:string = 'hello'
hi = 'hello,you'

语法:

let 变量名:数据类型 = 初始值

let 变量名:数据类型

1.2.常量声明

以关键字const开头的声明引入只读常量,该常量只能被赋值一次。

const hello:string = 'hello'

语法:

const 变量名:数据类型 = 值

若是对常量重新赋值会造成编译时错误

1.3.自动类型推断

如果一个变量声明时并未指定他的类型,但是给定了初始值,则TS就会根据给定的值进行自动类型推断

let hi = 'hello' // Ts会自动类型推断为String类型,若赋值其它类型的值会编译错误

2.类型

2.1.Number类型

TS提供number和Number类型,任何整数和浮点数都可以被赋给此类型的变量。

let num:number = 3.14

2.2.Boolean类型

boolean类型由true和false两个逻辑值组成。

通常在条件语句中使用boolean类型的变量

let isDone:boolean = false;
if(idDone){
console.log('Done!')
}

2.3.String类型

let s1:string = 'hello'

2.4.Array类型

array,即数组,是由可赋值给数组声明中指定的元素类型的数据组成的对象

let arr:number[] = [1,2,3,4]

语法:

let 变量名:数据类型[] = 值

2.5.Enum类型

enum类型,又称为枚举类型,是预先定义的一组命名值的值类型,其中命名值又被称为枚举常量

使用枚举常量时必须以枚举类型名称为前缀

enum colorSet = {Red,Green,Blue} //也可以赋值
let c:colorSet = colorSet.Red

2.6. undefined类型

表示变量未被声明就被使用

2.7.nulll

表示变量被声明了但并未赋初值

3.语句

3.1 If语句

3.2.Switch语句

3.3.For语句

for in :

可以遍历数组,得到索引值

也可遍历对象,得到键名

for of:

用于遍历数组,得到值

4.函数

4.1.函数声明

语法:

function 函数名(参数:类型,参数:类型):返回类型{

函数体

}

4.2.可选参数

可选参数就是在参数变量后加一个?表示这个参数传不传都可

语法:

function 函数名(参数?:类型,参数:类型):返回类型{

函数体

}

4.3. 返回类型

函数的返回类型可以是上述所列类型中的一种,若是函数没有返回值,则可以设置为viod(表示没有返回值)

4.4.箭头函数

语法:

let 变量名 = (参数:类型,参数:类型)=>返回类型

5.类

在TS种,有两种创建对象的方式:

1.直接进行字面量方式进行创建

 let 变量名 = {键名:值}

2.使用类的方式+new对象的方式(可以大规模的创建很多对象,可以被作为一个模板,集中产出对象)

 class 类名{
 属性:值
 constructor(参数:类型){
 函数体
 }
 方法名(){}
}
创建对象:
let 变量:类名 = new 类名()

5.1静态属性

静态属性(方法),也称为类属性。

使用静态属性无需创建实例,通过类即可直接使用

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

  • 如果类中的方法以static开头的话,就是静态方法也就是类方法,只能被类调用,实例不能调用
  • readonly 表示只读属性,无法修改
  • public默认公共的 私有属性private,外部要想访问,则要使用get,set方法
     //set用于修改private的属性
        setAge(value:number):number
        {
          if(value>1){
            return this.age = value;
         }
      }
    //get方法,用来得到private属性
      getAge():number{
         return this.age
           或者 this.age = 1
      }

5.2类的继承(extends)

一个类可以对另一个进行继承,被称为子类和父类,继承后子类将拥有父类种写的所有东西

  class Animal{
       name:string;
       age:number;
       constructor(name:string, age:number){
           this.name=name;
           this.age=age;
       }
       sayHello(){
           console.log('动物在叫~')
       }
   }

子类继承父类

如果在子类中添加了和父类相同的方法,则子类会覆盖父类的方法

子类覆盖父类方法的形式,称为方法重写

class Dog1 extends Animal {
    run(){
        console.log(`${this.name}在跑`);
    }
    sayHello(){
        console.log('汪汪汪~')
    }
}
class Cat extends Animal {
    sayHello(){
        console.log('喵喵喵~')
    }
}

注意:

当子类中有constructor方法时,会覆盖父类的constructor方法,必须在子类中对父类中的构造器进行显式调用

constructor(参数:类型){
super(父类的参数)
子类函数体
 }

类的继承最重要的是实现多态关系

let b:父类型 = new 子类型()

5.3抽象类

当一个类前有abstract关键字时,代表当前类是抽象类,抽象类是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例

5.4抽象方法

使用abstract开头的方法叫做抽象方法,抽象方法没有方法体只能定义在抽象类中,继承抽象类时抽象方法必须要实现(子类必须对抽象方法进行改写)

6. 类型声明(Type)

描述一个对象的类型,不可以重复声明

type  myType ={
    name:string,
    age:number
};
let obj:myType = {值}

7.接口(interface)

接口的作用类似于抽象类,不同点在于: 接口中的所有方法和属性都是没有实值的,换句话说接口中的所有方法都是抽象方法;
接口主要负责定义一个类的结构

接口可以去限制一个对象的接口:对象只有包含接口中定义的所有属性和方法时才能匹配接口;
同时接口也可以当作类型声明用,接口可以重复声明

interface myInterface{
    name:string,
    age:number
}
interface myInterface{
    gender:string
}

const obj:myInterface ={
    name:'1',
    age:20,
    gender:'male',
}

同时,可以让一个类去实现(implements)接口,实现接口时类中要保护接口中的所有属性;

class MyClass implements myInter{
    name:string;
    constructor(name:string){
        this.name = name
    }
    sayHello() {
        console.log('1111')
    }
}

8.泛型

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

此时泛型便能够发挥作用;

//T可以传任意类型,加大了代码可复用性
   function test<T>(arg: T): T{
       return arg;
   }

9.this关键字

关键字this只能在类的实例方法中使用。

示例

class A {
  count: string = 'a'
  m(i: string): void {
    this.count = i;
  }
}

关键字this的指向:

●调用实例方法的对象

●正在构造的对象

相关推荐
惜.己9 分钟前
Jmeter中的配置原件
java·前端·数据库
家有狸花23 分钟前
CSS笔记(一)炉石传说卡牌设计1
前端·css·笔记
liuweni26 分钟前
Next.js 独立开发教程(三):CSS 样式的完整指南
开发语言·前端·javascript·css·react.js·职场和发展·前端框架
小二·1 小时前
layui树形组件点击树节点后高亮的解决方案
前端·javascript·layui
Minions_Fatman1 小时前
【layui】table的switch、edit修改
前端·javascript·layui
槑带可乐1 小时前
[可乐的随手记 - 6] 并发控制上传大量的文件 (worker + yield )
前端·javascript
小孙姐1 小时前
4——单页面应用程序,vue-cli脚手架
前端·javascript·vue.js
生椰拿铁You1 小时前
15 —— Webpack中的优化——前端项目使用CDN技术
前端·webpack
生椰拿铁You1 小时前
13 —— 开发环境调错-source map
前端
知野小兔2 小时前
【Angular】async详解
前端·javascript·angular.js