Typescript的基礎(chǔ)語(yǔ)法有哪些

這篇文章主要為大家展示了“Typescript的基礎(chǔ)語(yǔ)法有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Typescript的基礎(chǔ)語(yǔ)法有哪些”這篇文章吧。

一.Ts是什么

首先，強(qiáng)類型不允許隨意的隱式類型轉(zhuǎn)換，而弱類型是允許的。JavaScript就是經(jīng)典的弱類型語(yǔ)言。而Typescript可以說是JavaScript的超集，在JS的基礎(chǔ)上新增了許多語(yǔ)法特性，使得類型不再可以隨意轉(zhuǎn)換，能大大減少開發(fā)階段的錯(cuò)誤。

二. 基本語(yǔ)法

1.聲明原始數(shù)據(jù)類型

在變量后面指定一個(gè)關(guān)鍵字表示其只能為什么類型。

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類型不單單可以指定對(duì)象，還可以指定數(shù)組或函數(shù)：

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

如果只想指定為對(duì)象，如下，對(duì)象屬性都要提前聲明好類型：

const obj: {name: string,age: number} = {
    name: '北極光',
    age:18
}

2.1聲明數(shù)組類型

可以指定聲明Array且通過<>指定元素類型，比如指定聲明元素都為數(shù)字的數(shù)組：

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

第二種方式如下，也指定聲明元素都為數(shù)字的數(shù)組：

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

2.2聲明元組類型

就是要提前指定數(shù)組里每個(gè)元素的類型，嚴(yán)格一一對(duì)應(yīng)：

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

3.聲明枚舉類型

通過關(guān)鍵字enum聲明一個(gè)枚舉類型，如：

enum Status {
    pedding = 1,
    resolve = 2,
    reject = '3'
}
//訪問
console.log(Status.pedding);

如果全不寫值，默認(rèn)值為從0開始遞增。如果第一個(gè)元素為字符類型，就必須全部定義值。如果第一個(gè)元素指定為一個(gè)數(shù)字，后面元素不寫值，那值為第一個(gè)元素值按位置大小遞增的結(jié)果。

4.函數(shù)參數(shù)與返回類型

函數(shù)聲明式：

指定函數(shù)傳入?yún)?shù)類型，指定返回值類型，調(diào)用時(shí)傳入?yún)?shù)個(gè)數(shù)與類型都必須相同：

括號(hào)里指定每個(gè)參數(shù)類型，括號(hào)右邊指定返回值的類型。

function fun (name:string,age:number):string{
  return 'sss'
}
fun('auroras',18);

如果傳入?yún)?shù)不確定傳不傳，那么可以給參數(shù)加個(gè)‘？'表明它是可選的：

function fun (name:string,age?:number):string{
  return 'sss'
}
fun('auroras');

或者給參數(shù)添加默認(rèn)值，那也會(huì)成為可選參數(shù)：

function fun (name:string,age:number=666):string{
  return 'sss'
}
fun('auroras');

如果參數(shù)個(gè)數(shù)不確定，可以用擴(kuò)展運(yùn)算符加解構(gòu)賦值表示，當(dāng)然要傳入與指定類型一致的：

function fun (name:string,age:number=666,...res:number[]):string{
  return 'sss'
}
fun('auroras',1,2,3);

函數(shù)表達(dá)式：

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

定義接口時(shí)再詳細(xì)說。

5.任意類型

通過指定any關(guān)鍵字表示任意類型，跟原來(lái) js 一樣，可以任意賦不同類型的值：

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

6.類型斷言

類型斷言就是明確的告訴typescript這個(gè)變量就是某種類型的，百分之百確定。不用typescript在一些情況下要自己推斷某些沒有明確定義或者多變的場(chǎng)景是什么類型。

可以通過 as+類型 斷言它就是某種類型的：

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

也可以通過 <類型> 形式斷言（不推薦）：

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

7.接口基本使用

接口可以理解為一種規(guī)范，一種契約?？梢约s束一個(gè)對(duì)象里應(yīng)該有哪些成員，這些成員都是怎么樣的。

通過interface定義一個(gè)Post接口，這個(gè)接口是一個(gè)對(duì)象，規(guī)則為有一個(gè)name屬性類型為string，age屬性類型為number。

interface Post {
    name:string;
    age:number
}

然后比如有一個(gè)函數(shù) printPost ，它的參數(shù) post 使用我們定義的 Post 接口的規(guī)則，那么調(diào)用此函數(shù)傳參時(shí)要傳入符合 Post 接口規(guī)則的數(shù)據(jù)。

interface Post {
    name:string;
    age:number
}

function printPost(post: Post){
    console.log(post.name);
    console.log(post.age);
}
printPost({name:'asd',age:666})

當(dāng)然，函數(shù)傳參時(shí)可能有些參數(shù)是可選的，那么我們可以給接口也定義可選的成員，通過屬性后加一個(gè)‘？'指定可選成員：

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

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

如果用readonly修飾成員，那么這個(gè)成員屬性在初始化后便不可修改：

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

const auroras: Post = {
    name:'asd',
    age: 18,
    like: 'natrue'
}
auroras.name = 'aaaa';
//保錯(cuò)
auroras.like = 'wind';

如果連成員屬性名稱都不確定，那么可以聲明動(dòng)態(tài)成員，要指定成員名字類型與成員值的類型，如：

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

8.類基本使用

描述一類具體事物的抽象特征。ts增強(qiáng)了es6中class類的相關(guān)語(yǔ)法。

首先，類的屬性使用前必須提前聲明好：

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}`);
    }
}

9.類的訪問修飾符

private 修飾私有屬性，只能在類內(nèi)部訪問。public 修飾公用屬性（默認(rèn)），

外部也可訪問：

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修飾為受保護(hù)的，外部也不可訪問。但與 private 的區(qū)別是若是繼承的子類是可以訪問的。

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);
    }
}

10.類只讀屬性

給屬性設(shè)置 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);
    }
}

11.類與接口

一些類與類之間有些許共同的特征，這些共同的特征可以抽象成為接口。

比如 Person 類和 Animal 類，雖然是不同類，但是人和動(dòng)物都會(huì)吃東西和走路等，這些共同的特征可以由接口定義。最后一個(gè)特征就定義一個(gè)接口。

//吃接口
interface Eat {
    eat(food:string):void
}
//行進(jìn)接口
interface Run {
    run(behavior:string):void
}
//人
class People implements Eat,Run {
    eat(food:string){
       console.log(`在餐桌上吃${food}`);
    }
    run(behavior:string){
       console.log(`站著${behavior}`);
    }
}
//動(dòng)物
class Animal implements Eat,Run {
    eat(food:string){
       console.log(`在地上上吃${food}`);
    }
    run(behavior:string){
       console.log(`爬著${behavior}`);
    }
}

12.抽象類

約束子類必須有某些成員，有點(diǎn)類似接口，不同的是抽象類可以包含一些具體的實(shí)現(xiàn)。比如動(dòng)物類應(yīng)該為一個(gè)抽象類，它的子類有貓，狗，熊貓等。它們都是動(dòng)物，也有一些共同的特征。定義一個(gè)類為抽象類后，就不能再new實(shí)例了，只能被其子類繼承。

其中abstract 定義抽象類，類里用abstract定義一個(gè)抽象方法，子類必須實(shí)現(xiàn)抽象方法。

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('蹦蹦跳跳')

13.泛型

泛型就是在定義函數(shù)，接口或者類的時(shí)候沒有指定具體類型，等到使用時(shí)才指定具體類型。極大程度的復(fù)用代碼。

比如有一個(gè) identity 函數(shù)，這個(gè)函數(shù)會(huì)返回任何傳入它的值，且傳入的類型與返回的類型應(yīng)該是相同的。如果傳入數(shù)字，不用泛型的話，

這個(gè)函數(shù)可能是下面這樣：

 function identity(arg:number):number{
     return arg
 }
如果傳入字符串，這個(gè)函數(shù)可能是下面這樣：

 function identity(arg:string):string{
     return arg
 }
這樣的話太麻煩，所以可以使用泛型，一般用大寫 T 表示泛型，它可以適用于多個(gè)類型，且傳入類型與返回類型是相同的。

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

以上是“Typescript的基礎(chǔ)語(yǔ)法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！