TypeScript入門

時間 2019-11-08

標籤 typescript 入門简体版

原文原文鏈接

gitHub：http://www.liu12fei08fei.top/blog/10typescript.htmlhtml

TypeScript入門

課程內容介紹
課程介紹-前置知識
TypeScript的優點
搭建TypeScript開發環境

什麼是compiler？爲何須要compiler？
使用在線compiler開發
搭建本地TypeScript開發環境

TypeScript-字符串新特性（全部例子都是es6語法）
TypeScript-參數新特性

參數類型
默認參數
可選參數

函數新特性

Rest and Spread操做符（...）：用來聲明任意數量的方法參數，即rest參數
generator函數：控制函數的執行過程，手工暫停和恢復代碼執行
destructuring析構表達式：經過表達式將對象或數組拆解成任意數量的變量

表達式和循環

箭頭表達式：用來聲明匿名函數，消除傳統匿名函數的this指針問題
forEach()、for in和for of

forEach：
for in
for of

面向對象特性

類（class）：TypeScript的核心，使用TypeScript開發時，大部分代碼都是寫在類裏面的。

類的定義
返回控制符
類的構造函數，即：constructor方法
類的繼承：兩個關鍵字

extends，得到繼承類中全部屬性和方法
super

調用父類的構造函數
用來調用父類的方法

面向對象特性

泛型-generic：是指參數化的類型，通常用來限制集合的內容
接口-Interface：用來創建某種代碼約定，使得其它開發者在調用某個方法或建立新的類時必須遵循接口所定義的代碼約定
模塊-module：模塊能夠幫助開發者將代碼分割爲可重用的單元。開發者能夠本身決定將模塊中的哪些資源（類、方法、變量）暴露出去供外部使用，哪些資源只在模塊內使用。
註解-annotation：註解爲程序的元素（類、方法、變量）加上更直觀更明瞭的說明，這些說明信息與程序的業務邏輯無關，而是供指定的工具或框架使用的
類型定義文件（*.d.ts）：類型定義文件用來幫助開發者在TypeScript中使用已有的JS的工具包；如：jQuery、zepto等

微軟開發一門編程語言
JavaScript的超集
遵循ES6腳本語言規範

TypeScript擴展了JavaScript的語法，任何已經存在的JS程序，能夠不加任何改動的在TypeScript環境下運行
TypeScript只是向JS中添加一些新的，遵循ES6規範的語法，以及基於類的面向對象編程的這種特性
其次，2016年9月底發佈的Angular2框架，這個框架自己是由TypeScript語言自己來編寫的
TypeScript這門語言是由Microsoft（微軟）和Google（谷歌），在背後支持
所以，TypeScript有可能稱爲前端腳本語言發展的一個主流方向

課程內容介紹前端

學習TypeScript的好處
安裝TypeScript開發環境
TypeScript概念、語法和特性介紹

課程介紹-前置知識git

理解ES五、ES六、JavaScript、TypeScript的概念和關係

ES是客戶端腳本語言的規範，ES五、ES6是不一樣的版本
JavaScript和TypeScript是兩種客戶端腳本語言
JavaScript是實現了ES5規範，TypeScript實現了ES6規範

有基礎的JavaScript開發經驗

TypeScript的優點es6

支持ES6規範
強大的IDE支持
Angular2的開發語言

搭建TypeScript開發環境web

就是安裝TypeScript compiler

什麼是compiler？爲何須要compiler？typescript

它是編譯器，編譯器的做用就是把TypeScript代碼轉化成JS代碼
由於主流瀏覽器沒有徹底支持ES6，須要轉化成ES5

使用在線compiler開發編程

搭建本地TypeScript開發環境數組

TypeScript-字符串新特性（全部例子都是es6語法）瀏覽器

1、多行字符串框架

var str = `111,

222,

333,

444`;

多行字符串使用雙撇號聲明變量（即：反引號），好處是能夠隨意換行無需拼接字符串

2、字符串模板：在多行字符串裏，用一個表達式去插入變量或者用以調用方法

var myName = '怪誕咖啡';

var getName = function () {

return myName;

}

console.log(`Hello ${myName}`); // 調用變量

console.log(`Hello ${getName()}`); // 調用函數

注：字符串模板${}，只有在反引號``中有做用，在雙引號（""）和單引號（''）中只會當字符串輸出

3、自動拆分字符串：當用一個字符串模板去調用一個方法的時候，這個字符串模板裏面表達式的值會自動賦值給被調用方法中的參數

function test(name, age, job) {

console.log(name);

console.log(age);

console.log(job);

}

var myName = "怪誕咖啡";

var getAge = function () {

return 18;

}

test`Hello my name is ${myName}, I'm ${getAge()}`;

調用test函數，進行參數傳遞時候，不須要寫雙括號，直接使用反引號
第一個參數是：字符串模板的值 => ["Hello my name is ",", I'm ",""]
第二個參數是：第一個表達式的值 => 怪誕咖啡
第三個參數是：第二個表達式的值 => 18

TypeScript-參數新特性

參數類型

1、在參數名稱後面使用冒號來指定參數的類型

var myName: string = '怪誕咖啡';

myName = 13;

注：報錯只會在typescript環境下，在編譯後的es5環境下是不會報錯的

2、類型推斷機制，就是當第一次給變量賦值，此變量的類型就固定爲第一次賦值的類型

var myName = '怪誕咖啡';

myName = 13;

注：報錯只會在typescript環境下，在編譯後的es5環境下是不會報錯的

3、要想在typescript環境下任意賦值，就須要賦值爲:any

var myName:any = '怪誕咖啡';

myName = 13;

4、其餘基本類型

數值類型 var num: number = 20;
布爾類型 var boo: boolean = true;
void類型：void不是用來聲明變量的，而是用來聲明變量的返回值的

void類型例子：

function test(): void{

return ''; // 報錯

}

function test(): string{

return ''; // 不報錯

}

5、除了給變量和函數聲明類型外，還能夠給參數聲明類型

function test(name: string, age) {

return name;

}

test(1); // 報錯，只能使用string類型進行調用

注：介紹瞭如何聲明類型、typescript類型推斷機制、五種基本的類型、能夠聲明類型的位置

6、自定義類型：在typescript裏面，能夠經過class或接口來申明自定義類型

class Person{

age: number;

}

var feifei: Person = new Person();

feifei.name = '怪誕咖啡';

feifei.age = 18;

當咱們寫feifei.的時候會提示Person有name和age兩個屬性

默認參數

在參數聲明後面用等號來指定參數的默認值

function test(a: string, b: string, c: string) {

console.log(a);

console.log(b);

console.log(c);

}

test('1','2','3'); // 必須傳遞三個string類型的參數，不然提示錯誤

給參數指定默認值以後，能夠不傳遞參數

function test(a: string, b: string, c: string='攻城獅') {

console.log(a);

console.log(b);

console.log(c);

}

test('1', '2'); // 只傳遞兩個參數，第三個參數使用默認值

默認值的設定應該遵循從右向左一次設定，不然沒法起到合理的做用

可選參數

在方法的參數聲明後面用問號來標明此參數爲可選參數

function test(a: string, b?: string, c: string='攻城獅') {

console.log(a);

console.log(b);

console.log(c);

}

test('1'); // 只傳遞一個參數，第二個參數爲undefined，第三個參數爲默認值

注意幾點：

b設置爲可選參數，要處理可選參數沒傳的狀況

function test(a: string, b?: string, c: string='攻城獅') {

console.log(a);

console.log(b.length);

console.log(c);

}

說明：b參數爲可選參數，在不傳遞參數值的狀況下是不容許調用undefined的length屬性的

和默認值同樣，可選參數不能聲明在必選參數的後面的

function test(a?: string, b: string, c: string='攻城獅') {

console.log(a);

console.log(b);

console.log(c);

}

說明：我給a設置爲可選參數，b爲必選參數，會直接報錯；和設置默認值是同樣的，不容許在必選參數前面設置默認值

函數新特性

Rest and Spread操做符（...）：用來聲明任意數量的方法參數，即rest參數

function fun(...args) {

args.forEach(function (arg) {

console.log(arg);

});

}

fun(1, 2, 3);

console.log('******'); // 分隔符

fun(10,8,18,49,100,7)

一個Rest and Spread操做符，反方向使用的方法--目前版本2.6不支持

設置傳遞固定數量的參數，在使用的時候傳遞不定數量的參數

function fun(a, b, c) {

console.log(a);

console.log(b);

console.log(c);

}

var args = [1, 2];

fun(...args); // 在typescript中報錯，在轉化的es5中支持，返回值爲：1 2 undefined

console.log('*****');

var args2 = [7, 8, 9, 10, 12];

fun(...args2); // 在typescript中報錯，在轉化的es5中支持，返回值爲：7 8 9

generator函數：控制函數的執行過程，手工暫停和恢復代碼執行

在es5中，調用一個方法的時候，沒有辦法在函數執行到一半的時候，進行暫停執行
在es6中，新加一個關鍵字yield，這個關鍵字能夠實現方法暫停執行；yield就好像給代碼加上了斷點同樣，能夠經過編程的手段，控制代碼走到某個點暫停執行，而後調用特定方法的時候在進行，能夠往復循環

聲明一個generator函數，只要在function後面添加一個便可：`function fun(){}`

function* fun(){

console.log('start');

yield;

console.log('finish');

}

// fun(); // 這樣調用generator是不起做用的，必須使用下面的方式調用

var fn = fun();

fn.next(); // 打印start

fn.next(); // 打印finish

destructuring析構表達式：經過表達式將對象或數組拆解成任意數量的變量

從對象中經過析構表達式得到相應屬性和方法，對象析構是用{}大括號聲明

function a() {

return {

myName: '怪誕咖啡',

age: {

age1: 18,

age2:80

}

var { myName, age: { age1, age2 } } = a(); // 析構表達式，包括嵌套屬性

var { myName:newName, age: { age1, age2 } } = a(); // 析構表達式，給myName起一個新的名字newName

console.log(age1);

console.log(age2);

解析：返回值，即return返回值，的結構和咱們的析構表達式的結構{ myName, age: { age1, age2 } }一一對應，因此析構表達式，便可理解爲，解析結構得到對象屬性的方法

從數組中經過析構表達式得到相應屬性和方法，數組析構是用[]方括號聲明

var arr = [1, 2, 3, 4];

var [num1, num2, ...other] = arr; // 獲取第一個和第二個，其他變量賦值給other

var [,,num3,num4] = arr; // 獲取第三和第四個值

析構表達式好處：當你須要從一個對象的屬性或者是數組的元素裏面，用其中的值賦值給其他變量的時候，可讓咱們寫更少的代碼

表達式和循環

箭頭表達式：用來聲明匿名函數，消除傳統匿名函數的this指針問題

// 無參數表達式

var sum = () => {}

// 只有一個參數的表達式

var sum = arg => {}

// 單行表達式

var sum = (arg1, arg2) => arg1 + arg2;

// 多行表達式

var sum2 = (arg1, arg2) => {

return arg1 + arg2;

}

實際例子：

var arr = [1, 2, 3, 4, 5];

var flt = arr.filter(val => val % 2 == 0);

console.log(flt);

箭頭函數的優點：

簡化書寫
最大的優點，消除了js裏，this關鍵字的問題

this指向問題

function fn(myName: string) {

this.myName = myName;

setInterval(function () {

console.log('myName is：'+this.myName);

},1000);

}

var myName = 1; // 全局myName，後面的this指向了全局，而不是a

var a = new fn('怪誕咖啡');

改用箭頭函數，消除this指向問題

function fn(myName: string) {

this.myName = myName;

setInterval(() => {

console.log('myName is：'+this.myName);

},1000);

}

var myName = 1;

var a = new fn('怪誕咖啡'); // 消除指向問題

forEach()、for in和for of

forEach：

var arr = [1, 2, 3, 4];

arr.desc = 'I am number type!'; // 這行在typescript裏面會報錯

arr.forEach(val => console.log(val));

問題：

forEach會把desc屬性忽略掉
foeEach裏面沒法打斷循環，break不支持

for in

var arr = [11, 22, 33, 44];

arr.desc = 'I am number type!';

for (var item in arr) {

console.log(item); // key=> 1,2,3,4,desc

console.log(arr[item]); //value=>11,22,33,44,I am number type!

}

問題：

不光把數組裏面的值循環出來，一樣會把定義的屬性也循環出來；結果極可能不是咱們但願的樣子

for of

和forEach差不錯，循環的是你對象或數組的值，而不是像for in循環的key
for of和forEach的差異是，能夠用break能夠打斷循環

var arr = [11, 22, 33, 44];

arr.desc = 'I am number type!';

for (var item of arr) {

console.log(item); // key=> 11,22,33,44

}

面向對象特性

類（class）：TypeScript的核心，使用TypeScript開發時，大部分代碼都是寫在類裏面的。

這裏會介紹類的定義，構造函數，以及類的繼承

類的定義

使用class關鍵字聲明類

class Person{

}

能夠指定類的屬性和方法，一個完整的類具備屬性和方法

class Person{

name;

eat() {

console.log('I am eating!');

}

實例化：能夠把類理解成爲一個模子；所謂實例化，就是根據模子作出實際的產品出來

class Person{

name;

eat() {

console.log('I am eating!');

}

var p1 = new Person();

p1.name = 'Hello';

p1.eat();

var p2 = new Person();

p2.name = 'World';

p2.eat();

返回控制符

在聲明類的屬性和方法的時候，能夠爲其指定一個返回控制符
返回控制符的做用是控制類的屬性和方法是否能夠在外部被訪問到
返回控制符有三個：

public共用，默認public
private私有，只有在類的內部才能被訪問到，在外部訪問不到
protected受保護的，能夠在類的內部和子類（繼承）裏面能夠被訪問到，在外部訪問不到

類的構造函數，即：constructor方法

其實是類裏面一個特殊的方法，這個方法只有在類被實例化的時候纔會被調用
並且只會調用一次
外部沒法訪問到constructor構造函數的

class Person{

constructor() {

console.log('構造函數')

};

name='默認值';

eat() {

console.log('I am eating!');

}

var p1 = new Person();

p1.name = 'Hello';

p1.eat();

var p2 = new Person();

p2.name = 'World';

p2.eat();

構造函數的做用：能夠在實例化的時候，指定相應屬性

class Person{

constructor(public name:string) {

};

eat() {

console.log(this.name);

}

var p1 = new Person('Hello');

p1.eat();

var p2 = new Person('World');

p2.eat();

注意：構造函數裏面，定義屬性，要使用控制符來明確聲明，即：public name:any；若是是name:any這樣，說明沒有聲明該屬性，下面沒法訪問到

類的繼承：兩個關鍵字

一個是extends，用來聲明類的繼承關係
另外一個是super，用來調用父類的構造函數和方法

extends，得到繼承類中全部屬性和方法

class Person{

constructor(public name:string) {

};

eat() {

console.log(this.name);

}

class Employee extends Person{

// 定義新的屬性和方法

code: string;

work() {

}

let em = new Employee('coffee');

em.eat();

super

調用父類的構造函數

class Person{

constructor(public name:string) {

console.log('父類構造函數');

};

eat() {

console.log(this.name);

}

class Employee extends Person{

constructor(name: string, code: string) {

// 必須調用父類的構造函數，這是硬性規定

super(name);

console.log('子類構造函數');

this.code = code;

};

code: string;

work() {

}

let em = new Employee('coffee','8');

em.eat();

用來調用父類的方法

class Person{

constructor(public name:string) {

console.log('父類構造函數');

};

eat() {

console.log(this.name);

}

class Employee extends Person{

constructor(name: string, code: string) {

// 必須調用父類的構造函數，這是硬性規定

super(name);

console.log('子類構造函數');

this.code = code;

};

code: string;

work() {

// 調用父類的方法

super.eat();

};

// 返回控制符

private doWork() {

}

let em = new Employee('coffee','8');

em.work();

面向對象特性

泛型-generic：是指參數化的類型，通常用來限制集合的內容

class Person{

constructor(public name:string) {

console.log('父類構造函數');

};

eat() {

console.log(this.name);

}

class Employee extends Person{

constructor(name: string, code: string) {

// 必須調用父類的構造函數，這是硬性規定

super(name);

console.log('子類構造函數');

this.code = code;

};

code: string;

work() {

// 調用父類的方法

super.eat();

};

private doWork() {

}

var workers: Array<Person> = [];

workers[0] = new Person('神經了');

workers[1] = new Employee('神經了', '8');

workers[2] = 3; // 報錯，指定放Person類型的數據

接口-Interface：用來創建某種代碼約定，使得其它開發者在調用某個方法或建立新的類時必須遵循接口所定義的代碼約定

interface IPerson{

age: number;

}

class Person{

constructor(public config:IPerson){}

}

// 聲明屬性

var p1 = new Person({

age:8

});

console.log(p1);

實現對應的接口中的方法：

interface Animal{

eat();

}

class Sheep implements Animal{

eat() {

console.log('I eat grass');

}

class Tiger implements Animal{

eat() {

console.log('I eat meat');

}

模塊-module：模塊能夠幫助開發者將代碼分割爲可重用的單元。開發者能夠本身決定將模塊中的哪些資源（類、方法、變量）暴露出去供外部使用，哪些資源只在模塊內使用。

模塊在typescript裏面就是一個文件，一個文件就是一個模塊
在模塊內部有兩個關鍵字來支撐模塊的特性，export暴露接口、import

// 文件a

import {newName} from "./b"; // 引入b文件，使用b文件中提供的接口newName

// a文件對外提供接口

export var prop1;

var prop2;

export function func1(){

}

function func2(){

}

export class Class1{

}

class Class2{

}

// 得到b文件提供的接口

console.log(newName);

// b文件

import {Class1, func1, prop1} from "./a"; // 引入a文件

// 獲取a文件提供的接口

console.log(prop1);

func1();

new Class1{

}

// 對外提供接口

export var newName;

註解-annotation：註解爲程序的元素（類、方法、變量）加上更直觀更明瞭的說明，這些說明信息與程序的業務邏輯無關，而是供指定的工具或框架使用的

類型定義文件（*.d.ts）：類型定義文件用來幫助開發者在TypeScript中使用已有的JS的工具包；如：jQuery、zepto等

如何找到類型定義文件，確定不能本身一個個的寫；使用tyings來快速啓動

1. Typescript入門
2. TypeScript 入門
3. typescript 入門
4. TypeScript入門
5. TypeScript入門-類
6. TypeScript（入門）
7. 入門 typescript
8. typescript入門
9. React+TypeScript入門
10. typescript入門(一)
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。