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

●调用实例方法的对象

●正在构造的对象

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试