【typescript】 FirstOne 概論、學習路線、搭建 webstorm 開發環境、預覽

阿新 • • 發佈：2020-07-26

目錄點這裡

ts0715 倉庫 git 程式碼

概論

TypeScript 是由微軟開發的一款開源的程式語言

TypeScript 是 Javascript 的超集，擴充套件了 JavaScript的語法，遵循最新的 ES6、Es5 規範。

推廣：

谷歌的 angular2.x+ 就是基於 Typescript 語法
Nodejs 框架Nestjs、midway中用的就是 TypeScript 語法

預覽

1.npm install -g typescript

如果慢，就npm install -g cnpm --registry=https://registry.npm.taobao.org

然後檢查編譯工具是否安裝成功：tsc -v

用於將 ts 編譯成 js 檔案（因為瀏覽器不支援 ts 以及 ES6，所以需要編譯工具將 ts 檔案編譯成 ES5程式碼）

2.建立一個檔案01_hello_ts.ts

function sayHello(person: string) {
    return "Hello," + person;
}

const tsName = "typescript";
console.log(sayHello(tsName));

tsc01_hello_ts.ts

會在當前資料夾下生成一個 js 檔案

function sayHello(person) {
    return "Hello, " + person;
}
var tsName = "typescript";
console.log(sayHello(tsName));

3. 生成 typescript 配置檔案 tsconfig.json

tsc --init

webstorm 配置自動編譯

Typesctipt

All Places

E:\work\software\node\nodejs\node_global\tsc.cmd

--sourcemap --target "ES5"

$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

$FileDir$

4. 變數/形參的:型別註解

function sayHello(person: string 
) {
    return "Hello," + person;
}

const tsName: string = "typescript";
console.log(sayHello(tsName));

如果傳入一個陣列，再重新編譯，你會看到產生了一個錯誤

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

TypeScript 提供了靜態的程式碼分析，它可以分析程式碼結構和提供的型別註解

要注意的是儘管有錯誤， .js 檔案還是被建立了。

就算你的程式碼裡有錯誤，你仍然可以使用 TypeScript。在這種情況下，TypeScript只會警告你程式碼可能不會按預期執行

5.介面：

作為自定義型別註釋，描述物件引數的欄位型別

interface Person {
    firstName: string;
    lastName: string;
}


function greeter(person: Person) {
    return "Hello," + person.firstName + " " + person.lastName;
}

let user = { 
    firstName: "Jane", 
    lastName: "User" 
};
conosole.log(greeter(user));

6.類

TypeScript 支援基於類的面向物件程式設計

讓我們建立一個 Student 類，它帶有一個建構函式和一些公共欄位。

注意類和介面可以一起共作，程式設計師可以自行決定抽象的級別

在建構函式的引數上使用 public 等同於建立同名的成員變數

// greeter.ts

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string){
        this.fullName = firstName + " " + middleInitial + " " +lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello," + person.firstName + " " + person.lastName;
}

let user = new Student("Jane","M.","User");
console.log(greeter(user));

重新執行 tsc greeter.ts ，你會看到生成的 JavaScript 程式碼和原先的一樣。

TypeScript 裡的類只是 JavaScript 裡常用的基於原型面向物件程式設計的簡寫

在 greeter.html 裡輸入如下內容

<!DOCTYPE html>
<html>
    <head>
        <title>TypeScript Greeter</title>
    </head>

    <body>

        <script src="greeter.js">
        </script>
    </body>
</html>

在瀏覽器裡開啟 greeter.html 執行這個應用

點選這個錘子