最近入職，發現公司使用到typescript，所以就在此留下一個筆記，方便自己和大家一起學習。

TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個嚴格超集，并添加了可選的靜態類型和基于類的面向對象編程。

大家日常學習可以去TS Playground測試一些代碼

那我們就來開始學習吧！

基本類型的定義

在使用TS之前，我們定義的JavaScript變量都是弱類型語言，它不像C，Java這種，會在編譯的時候對變量進行類型檢查，所以有的時候會出現意想不到的Bug。

使用TS我們可以處理很簡單的數據類型：

Boolean類型

// boolean let isEmpty: boolean = true; // Type '"false"' is not assignable to type 'boolean'. isEmpty = 'false'; isEmpty = false; 復制代碼

Number類型

// number let num: number = 10; // Type '"1"' is not assignable to type 'number'. num = '1'; num = 1; 復制代碼

String類型

// string let github_name: string; github_name = 120; github_name = 'Rain120'; 復制代碼

Array類型

// array let arr: number[]; arr = [1, '2', 3]; arr = [1, 2, 3];let arr1: Array<number>; arr1 = [1, '2', 3]; arr1 = [1, 2, 3];let fe: string[]; fe = [1, 2, 3]; // TS fe = ['Vue', 'React', 'Angular']; 復制代碼

不確定什么屬性

// any let type_con: any; type_con = []; type_con = {}; type_con = 1; type_con = '2'; type_con = true; type_con.func(); 復制代碼

Void

//void let test_void: void = null; test_void = 1; 復制代碼

Function定義

function vo(): void {console.log('這是一個返回值為void的函數'); }function vo1(): void {console.log('這是一個返回值為void的函數');return ''; }function str(): string {console.log('這是一個返回值為string的函數'); } function str1(): string {console.log('這是一個返回值為string的函數');return 'string'; } 復制代碼

當我們在使用函數的時候，有些時候會使用到函數參數默認，或者可選參數，那么在TS中如何寫呢？

function game(name: string, rank?: string, score: number = 0): string {return `${name} ${rank} ${score}` } console.log(game('rainy', 'difficult', 10000)); console.log(game('rainy', 'difficult')); console.log(game('rainy')); 復制代碼

Class類

class Person {name: string;constructor(name: string) {this.name = name;}greet() {console.log(`Hello, ${this.name}`);} }class Student extends Person {name: string;age: number;constructor(name: string, age: number) {super(name);this.age = age;}greet() {console.log(`Hello, My name is ${this.name} and I'm ${this.age}`);}study() {console.log(`${this.name}, you should go to study.`)} }let p = new Person('Rain120'); console.log('p:', p.name) p.greet()let stu = new Student('Rain', 21); console.log('stu:', stu.name, stu.age); stu.greet(); stu.study(); 復制代碼

我們在學習面向對象的語言，C++和Java時候知道類的屬性和方法是有修飾符的，他們決定了外部是否能夠訪問類中的屬性、方法，當用戶為定義是，屬性和方法默認都是public 屬性，其中還有protected 和private 屬性。當你使用private 修飾符定義成屬性或者方法時，如果你需要讓其他使用者使用這個屬性時，你可以定義一個public 的方法，之后用戶只能通過這個API接口來獲取屬性值或者方法的結果，例如：

class Person {private name: string;constructor(name: string) {this.name = name;}getName() {return this.name;} } let p = new Person('Rain120'); console.log('person name:', p.name) console.log('person name:', p.getName()) 復制代碼

雖然這里報錯了，但是編譯結果卻是可以的應為TS在轉換成JS語言后，并沒有真的將name編譯成私有的屬性，TypeScript的核心原則之一是對值所具有的結構進行類型檢查，它的作用只是提示開發者。

protected 修飾符與private 修飾符的行為很相似，但有一點不同，protected 成員在派生類中仍然可以訪問, 這就不詳細講解這些了，大家可以去學習下Java或者C++的類，感受一下。

接口（Interface）

在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。這句話太官方了，我自己理解的就是它定義了一些你自己約定的參數類型。

工作中，我們使用到的是React+Typescript，所以，我把我日常寫法拿出來。

interface SystemsProps {systems: any } export class Systems extends React.Component<SystemsProps, any>...render() {const { systems } = this.propsreturn (<div>{systems.name}</div>)} } 復制代碼

當然，從C++中學到接口也是可以繼承的，例如：

interface Color{color: string; } interface Car extends Color{price: number; } let car = <Car>{}; car.color = "white"; car.price = 10000000; 復制代碼

泛型

在像C++和Java這樣的語言中，可以使用泛型來創建可重用的組件，一個組件可以支持多種類型的數據。 這樣用戶就可以以自己的數據類型來使用組件。

其實我們之前有用到泛型，只是沒有說到這個概念。

let arr: Array<number> = [1, 2, 3, 4]; 復制代碼

這是一個最簡答你的泛型，定義了一個number類型的數組，下面我寫一個復雜點的泛型：

class Fruit {name: string;price: number;constructor(name: string, price: number) {this.name = name;this.price = price;}sold() {console.log(`${this.name} sold $${this.price}`)} }let fruit: Array<Fruit> = [] fruit[0] = new Fruit('apple', 8) fruit[1] = new Fruit('banana', 5) fruit[2] = new Fruit('lemon', 10) console.log(fruit) 復制代碼

這個泛型是一個Fruit類型的數組，這個數組的子元素全是Fruit類型，當我們定義一個其他類型是，例如

fruit[3] = { name: 'watermelon', price: 2 } 復制代碼

類型推斷機制

let num = 10; num = 'str'; 復制代碼

我們平常在使用變量賦值的時候，這樣寫是沒有問題，但是使用TS類型檢查后，它會根據用戶第一次定義或者賦值的類型來推斷該變量的類型，這就是TS的類型推斷機制。

迭代器

這里我們講下我們常見的幾種的迭代器，包括for-in, for-of，用來跟forEach對比，直接上代碼，我們從代碼來分析它們之間的不同

let arr: any = ['a','b','c']; arr.type = 'array'arr.forEach((item, index) => {console.log('forEach', index, item, arr[index]); })for (let i in arr) {console.log('for-in', i, arr[i]); }let obj = {'a': 'I\'m a','b': 'I\'m b','c': 'I\'m c' }for (let i of arr) {console.log('for-of', i, obj[i]); } 復制代碼

從結果上來看，

forEach：只是常見的for循環，它不會遍歷該對象的屬性值； for-in：迭代的是對象的鍵（key）的列表，它會遍歷對象的屬性； for-of：迭代對象的鍵對應的值（value），它也不會遍歷對象的屬性。

模塊

這個地方熟悉CommonJS的都會知道export（導出）， import（導入），所以這里就不詳細講了，直接跳過

最后講一下，tsconfig.json的配置，詳見tsconfig.json

{"compilerOptions": {"moduleResolution": "node","outDir": ./dist", // 生成的所有文件放在dist目錄下"target": "es5", // 將JavaScript代碼降級到低版本ECMAScript 5"lib": ["es6", "dom"],"rootDir": "app/", //僅用來控制輸出的目錄結構。"jsx": "react", // 用于指定按照何種方式生成jsx代碼，可選react和preserve。"module": "esnext", // 用于指定模塊的代碼生成規則，可以使用 commonjs 、 amd 、 umd 、 system 、 es6 、 es2015 、 none 這些選項。"declaration": false, // 是否需要生成定義文件d.ts，設置為true，則生成"allowJs": true, // 接受JavaScript做為輸入"allowSyntheticDefaultImports": true, // 置為true時，則允許從沒有默認導出的模塊中默認導入(也就是不做檢查)。"inlineSourceMap": false, // 是否需要將sourceMap文件生成到js文件中，設置為true，則生成到js文件中。"sourceMap": true, // 把 ts 文件編譯成 js 文件的時候，同時生成對應的 map 文件"noEmitOnError": false, // 設置為true時，如果遇到了錯誤，就不再輸出"emitDecoratorMetadata": false, // 設置為true，則使用元數據特性"experimentalDecorators": true, // 設置為true，則支持ES7的裝飾器特性"noImplicitReturns": true, // 會防止你忘記在函數末尾返回值"noImplicitThis": false,"noImplicitUseStrict": false, // 當設置為true時，編譯輸出時不會調用'use strict'指令（也就是不生成use strict）"noImplicitAny": false, // 如果編譯器無法根據變量的用途推斷出變量的類型，它就會悄悄的把變量類型默認為 any。"noUnusedLocals": false, "baseUrl": "app","paths": {"app": ["app"]}},// 包括app下的所有.ts（對應js文件）, .tsx（對應jsx文件）文件"include": ["app/**/*.ts","app/**/*.tsx"],// 忽略node_modules下所有的文件"exclude": ["node_modules",... //其他要忽略的文件或者正則表達式表示] } 復制代碼

知乎

個人博客

Github

總結

以上是生活随笔為你收集整理的Typescript尝试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。