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的指向:

●调用实例方法的对象

●正在构造的对象

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#