TypeScriptの基本の紹介2

関数

jsと同様に、tsは名前付き関数と無名関数を作成できます。

  • 関数を定義する
function add(x: number, y: number): number {
    return x + y;
}//有名字的函数

let myAdd = function(x: number, y: number): number { return x + y; };//匿名函数

函数类型包含了两个部分:参数类型和返回值类型.
所以我们可以给一个变量赋值一个函数类型:
let add2:{x:number,y:number}=>number
  • パラメータ
//可选参数
function add(x: number, y?: number): number {
    return x + y;
}
//ts里面的每个函数都必须有值。当然,如果允许的话,我们也可以传递undefined或者null。参数多一个或者少一个都是不能通过编译时检查的,如果我们希望后续的参数是可选的,可以如上例所示使用?,表示可选参数。注意:可选参数必须跟在必要参数后面。

//默认参数:用户没有传递这个参数或者传递的值是undefined时。
function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}
//默认参数存放的位置没有任何限制,但是如果不是放在最后面,就必须使用undefined或者null对该参数的位置进行占位处理。

//剩余参数
function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
//剩余参数会被当做个数不限的可选参数。 可以一个都没有,同样也可以有任意个。 编译器创建参数数组,名字是你在省略号( ...)后面给定的名字,你可以在函数体内使用这个数组。


  • es8では2つのキーワードasyncとawaitが提案されています。これらは宣言型の方法を使用して、実行時にawaitキーワードでコードの実行を停止し、結果が返されるのを待ち、結果が返されるコードの実行を続行するようにtsに指示します。
async function a(id:string){
    try{
       return await a(id);
    }catch(err){
       console.log(err);
    }
}
  • コールバック機能と約束

promiseは、Promiseコンストラクターによって作成されたプロセス状態であり、resloveとrejectは、それぞれ成功と失敗を処理する2つのパラメーターです。

const promise = new Promise((resolve,reject)=>{
    resolve(2333);
});

promise.then((res)=>{
    console.log("res:"+res);
}).catch((err)=>{
//有异常才会走这段逻辑
    console.log("err:"+err);
})

const promise = new Promise((resolve,reject)=>{
    reject(new Error("出错了"));
});

promise.then((res)=>{
//不会走这段逻辑
    console.log("res:"+res);
}).catch((err)=>{
    console.log("err:"+err);
})

//promise具有链式性的优点,一旦得到一个Promise对象,从那一个promise起,使用Promise会不断地得到新的promise
案例如下:
const fs = require('fs');
function readFileAsync(filePath:string):Promise<any>{
    return new Promise((resolve,reject)=>{
        fs.readFile(filePath,(error,result)=>{
            if(error){
                reject(error)
            }else{
                resolve(result)
            }
        })
    })
};

function loadJSONAsync(filePath:string):Promise<any>{
    return readFileAsync(filePath).then(function(result){
        return JSON.parse(result)
    })
}

loadJSONAsync('test.json')
  .then(function(result){
      console.log(result);
  }).catch(function(error){
      console.log(error);
  })

並列制御フロー

function fethUserInfo(userId:string):Promise<{}>{
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ userId })
        }, 1000);
    })
}
function fethCartInfo(userId:string):Promise<{}>{
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ userId })
        }, 1200);
    })
}

Promise.all([fethCartInfo("1"),fethUserInfo("2")]).then(res =>{
    console.log(res);
})
//执行一系列的异步任务,并在所有任务完成后执行操作。

おすすめ

転載: blog.csdn.net/qq_36828822/article/details/106888407