簡介

typescript是微軟公司開發(fā)的開源編程語言，Type+Javascript(type是類型，在js的基礎(chǔ)上添加了類型支持)

簡稱：ts,是Javascript的超集

安裝

node.js或者我們的瀏覽器，他只認(rèn)識js代碼，不認(rèn)識ts代碼，所以我們需要把我們的ts轉(zhuǎn)換為我們的js代碼，然后進(jìn)行運(yùn)行操作

安裝命令

npm i -g typescript

yarn global add typescript

ts包就是用來編譯TS代碼的包，提供了tsc的命令,實(shí)現(xiàn)ts->js

檢驗(yàn)是否安裝成功：

tsc -v

注意：Mac 電腦安裝全局包時(shí)，需要添加 sudo 獲取權(quán)限：sudo npm i -g typescript yarn 全局安裝：sudo yarn global add typescript

使用原因

類型推演與類型匹配

開發(fā)編譯時(shí)報(bào)錯(cuò)

極大程度的避免了低級錯(cuò)誤

支持JavaScript最新特性（包含ES6/7/8）

Hello TypeScript

hello.ts文件

function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));

執(zhí)行命令

tsc hello.ts

這時(shí)候會自動給我們生成一個(gè)helio.js文件

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

從上面我們可以看出，我們使用：指定的變量的類型，在自動生成的js文件中卻消失了

這是因?yàn)門yperScript只會在編譯時(shí)對類型進(jìn)行靜態(tài)檢查，如果發(fā)現(xiàn)有錯(cuò)誤，編譯的時(shí)候就會進(jìn)行報(bào)錯(cuò)，而在運(yùn)行時(shí)，與普通的Javascript文件一樣，不會對類型進(jìn)行檢查

TypeScript類型概述

我們可以細(xì)分為兩類

JS原有的類型

原始類型，簡單類型（number/string/boolean/null/undefined）

特點(diǎn)：簡單，這些類型，是完全按照J(rèn)S中的類型的名稱來書寫

復(fù)雜數(shù)據(jù)類型（數(shù)組，對象，函數(shù)等）

TS新增的類型

聯(lián)合類型：聯(lián)合類型使用|分割每個(gè)類型，取值可以為多種類型的一種

自定義類型（類型別名）

接口：是一個(gè)非常靈活的概念，接口一般首字母大寫，有的編程語言中會建議接口加上I前綴

元組：元組類型是另一種類型的數(shù)組，它確切地知道包含多少個(gè)元素，以及特定索引對應(yīng)的類型，number有個(gè)缺點(diǎn)，就是不嚴(yán)謹(jǐn)，該類型中的數(shù)組可以出現(xiàn)任意多個(gè)數(shù)字

字面量類型：字符串字面量類型用來約束取值只能是某幾個(gè)字符串中的一個(gè)

枚舉：枚舉（Enum）類型用于取值被限定在一定范圍內(nèi)的場景，比如一周只能有七天，顏色限定為紅綠藍(lán)等

任意類型：any表示允許賦值為任意類型

void：函數(shù)的返回值類型是void

類型別名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

使用type創(chuàng)建類型別名

泛型

泛型（Generics）是指在定義函數(shù)、接口或類的時(shí)候，不預(yù)先指定具體的類型，而在使用的時(shí)候再指定類型的一種特性

// 基本泛型
let list1: Array<number> = [1, 2, 3]
// 動態(tài)泛型
let makeTuple = <T, Y>(x: T, y: Y) => [x, y];
const v1 = makeTuple(1, 'one')
const v2 = makeTuple(true, 1)

到此這篇關(guān)于JavaScript Typescript基礎(chǔ)使用教程的文章就介紹到這了,更多相關(guān)JS Typescript內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論