带你了解Typescript的14个基础语法

Posted 2021-12-28 华为云开发者社区

摘要：Typescript可以说是javascript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。

本文分享自华为云社区《Typescript基础语法全解析》，作者：北极光之夜。 。

一.Ts是什么：

首先，强类型不允许随意的隐式类型转换，而弱类型是允许的。JavaScript就是经典的弱类型语言。而Typescript可以说是JavaScript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。

二. 基本语法：

1.声明原始数据类型：

在变量后面指定一个关键字表示其只能为什么类型。

string类型：

const a: string = 'auroras'

number类型：

const b: number = 666 // 包括 NAN Infinity

boolean类型：

const c: boolean = true

null类型：

const d: null = null

undefined类型：

const e: undefined = undefined

symbol类型：

const h: symbol = Symbol()

2.声明Object类型：

首先，object类型不单单可以指定对象，还可以指定数组或函数：

const foo1: object = ;
const foo2: object = [];
const foo3: object = function();

如果只想指定为对象，如下，对象属性都要提前声明好类型：

const obj: name: string,age: number = 
    name: '北极光',
    age:18

3.1声明数组类型：

可以指定声明Array且通过<>指定元素类型，比如指定声明元素都为数字的数组：

const arr: Array<number> = [1,2,3]

第二种方式如下，也指定声明元素都为数字的数组：

const arr: number[] = [1,2,3]

3.2声明元组类型：

就是要提前指定数组里每个元素的类型，严格一一对应：

const tuple: [number,string,boolean] = [666,'auraros',true]

4.声明枚举类型：

通过关键字enum声明一个枚举类型，如：

enum Status 
    pedding = 1,
    resolve = 2,
    reject = '3'

//访问
console.log(Status.pedding);

如果全不写值，默认值为从0开始递增。如果第一个元素为字符类型，就必须全部定义值。如果第一个元素指定为一个数字，后面元素不写值，那值为第一个元素值按位置大小递增的结果。

5.函数参数与返回类型：

函数声明式：

指定函数传入参数类型，指定返回值类型，调用时传入参数个数与类型都必须相同：

括号里指定每个参数类型，括号右边指定返回值的类型。

function fun (name:string,age:number):string
  return 'sss'

fun('auroras',18);

如果传入参数不确定传不传，那么可以给参数加个‘？’表明它是可选的：

function fun (name:string,age?:number):string
  return 'sss'

fun('auroras');

或者给参数添加默认值，那也会成为可选参数：

function fun (name:string,age:number=666):string
  return 'sss'

fun('auroras');

如果参数个数不确定，可以用扩展运算符加解构赋值表示，当然要传入与指定类型一致的：

function fun (name:string,age:number=666,...res:number[]):string
  return 'sss'

fun('auroras',1,2,3);

函数表达式：

const fun2:(name:string,age:number)=>string = function(name:string,age:number)
  return 'sss'

定义接口时再详细说。

6.任意类型：

通过指定any关键字表示任意类型，跟原来 js 一样，可以任意赋不同类型的值：

let num:any = 1;
num = 'a';
num = true;

7.类型断言：

类型断言就是明确的告诉typescript这个变量就是某种类型的，百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。

可以通过 as+类型 断言它就是某种类型的：

const res = 1;
const num = res as number;

也可以通过 <类型> 形式断言（不推荐）：

const res = 1;
const num = <number>res

8.接口基本使用：

接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。

通过interface定义一个Post接口，这个接口是一个对象，规则为有一个name属性类型为string，age属性类型为number。

interface Post 
    name:string;
    age:number

然后比如有一个函数 printPost ，它的参数 post 使用我们定义的 Post 接口的规则，那么调用此函数传参时要传入符合 Post 接口规则的数据。

interface Post 
    name:string;
    age:number


function printPost(post: Post)
    console.log(post.name);
    console.log(post.age);

printPost(name:'asd',age:666)

当然，函数传参时可能有些参数是可选的，那么我们可以给接口也定义可选的成员，通过属性后加一个‘？’指定可选成员：

interface Post 
    name:string;
    age:number;
    sex?:string;


const auroras: Post = 
    name:'asd',
    age: 18

如果用readonly修饰成员，那么这个成员属性在初始化后便不可修改：

interface Post 
    name:string;
    age:number;
    sex?:string;
    readonly like:string 


const auroras: Post = 
    name:'asd',
    age: 18,
    like: 'natrue'

auroras.name = 'aaaa';
//保错
auroras.like = 'wind';

如果连成员属性名称都不确定，那么可以声明动态成员，要指定成员名字类型与成员值的类型，如：

interface Post 
  [prop:string]:string
 
const auroras: Post = 
    name:'asd',
    like: 'natrue'

9.类基本使用：

描述一类具体事物的抽象特征。ts增强了es6中class类的相关语法。

首先，类的属性使用前必须提前声明好：

class Person 
    name: string;
    age: number;
    constructor(name:string,age:number)
       this.name = name;
       this.age = age;
    
    sayHi(msg:string):void 
        console.log(`hi,$msg,i am $this.name`);
    

10.类的访问修饰符：

private 修饰私有属性，只能在类内部访问。public 修饰公用属性（默认），外部也可访问：

class Person 
  public  name: string;
  private  age: number;
  constructor(name:string,age:number)
       this.name = name;
       this.age = age;
    
  sayHi(msg:string):void 
        console.log(`hi,$msg,i am $this.name`);
        console.log(this.age);
    


const jack = new Person('jack',20);
//Person类公有属性可以访问
console.log(jack.name);
//Person类私有属性不可以访问
console.log(jack.age);

protected修饰为受保护的，外部也不可访问。但与 private 的区别是若是继承的子类是可以访问的。

class Person 
  public  name: string;
  private  age: number;
  // protected
  protected gender: boolean;
    constructor(name:string,age:number)
       this.name = name;
       this.age = age;
       this.gender = true;
    
    sayHi(msg:string):void 
        console.log(`hi,$msg,i am $this.name`);
        console.log(this.age);
    


class children extends Person 
    constructor(name:string,age:number)
        super(name,age,);
        //可以访问
        console.log(this.gender);
    

11.类只读属性：

给属性设置 readonly 则为只读属性，该属性初始化后便不可再修改。

class Person 
  public  name: string;
  private  age: number;
  // readonly
  protected readonly gender: boolean;
    constructor(name:string,age:number)
       this.name = name;
       this.age = age;
       this.gender = true;
    
    sayHi(msg:string):void 
        console.log(`hi,$msg,i am $this.name`);
        console.log(this.age);
    

12.类与接口：

一些类与类之间有些许共同的特征，这些共同的特征可以抽象成为接口。

比如 Person 类和 Animal 类，虽然是不同类，但是人和动物都会吃东西和走路等，这些共同的特征可以由接口定义。最后一个特征就定义一个接口。

//吃接口
interface Eat 
    eat(food:string):void

//行进接口
interface Run 
    run(behavior:string):void

//人
class People implements Eat,Run 
    eat(food:string)
       console.log(`在餐桌上吃$food`);
    
    run(behavior:string)
       console.log(`站着$behavior`);
    

//动物
class Animal implements Eat,Run 
    eat(food:string)
       console.log(`在地上上吃$food`);
    
    run(behavior:string)
       console.log(`爬着$behavior`);
    

13.抽象类：

约束子类必须有某些成员，有点类似接口，不同的是抽象类可以包含一些具体的实现。比如动物类应该为一个抽象类，它的子类有猫，狗，熊猫等。它们都是动物，也有一些共同的特征。定义一个类为抽象类后，就不能再new实例了，只能被其子类继承。

其中abstract 定义抽象类，类里用abstract定义一个抽象方法，子类必须实现抽象方法。

abstract class Animal  
    eat(food:string)
       console.log(`在地上吃$food`);
    
    abstract run (behavior:string):void

//猫
class Dog extends Animal
    run(behavior:string):void
        console.log(behavior);
    

const d1 = new Dog();
d1.eat('骨头')
d1.run('四脚爬行') 
//兔子
class rabbit extends Animal
    run(behavior:string):void
        console.log(behavior);
    

const r1 = new rabbit();
d1.eat('萝卜')
d1.run('蹦蹦跳跳') 

14.泛型：

泛型就是在定义函数，接口或者类的时候没有指定具体类型，等到使用时才指定具体类型。极大程度的复用代码。

比如有一个 identity 函数，这个函数会返回任何传入它的值，且传入的类型与返回的类型应该是相同的。如果传入数字，不用泛型的话，这个函数可能是下面这样：

 function identity(arg:number):number
     return arg
 

如果传入字符串，这个函数可能是下面这样：

 function identity(arg:string):string
     return arg
 

这样的话太麻烦，所以可以使用泛型，一般用大写 T 表示泛型，它可以适用于多个类型，且传入类型与返回类型是相同的。

 function identity<T>(arg:T):T
     return arg
 

点击关注，第一时间了解华为云新鲜技术~