typescript 的簡單學習

真的只是簡單學習，簡單地記錄我認爲有意思的部分

1、安裝 以及開始使用 

yarn add typescript --dev

然後暴露 對應的配置

 yarn tsc --init

 可以看到 生成了 一個對應的 文件 tsconfig.json

查看裏面的配置之後，修改裏面的幾項內容

"target": "es2015",   // 將文件 轉爲 es2015 ，要不然默認的 es5 不認識 symbol 、promise 等 es6 中的新類型、對象。這裏的轉換結果其實就是 es6 

或者

"lib": ["es2015", "DOM"],    // 增加 es2015 和 DOM 的模塊 ==> 這裏的轉換結果其實還是 es5 ，只不過使用 es5 來模擬 es6

"sourceMap": true,   // 建立 map 文件

"outDir": "dist",         // 輸出

"rootDir": "src",         // 輸入 

"strictNullChecks": false,  // 在嚴格模式下，允許 一個變量 爲 null 或者 undefined

然後在 src 文件夾 下 簡歷一個 ts 文件

yarn tsc

就能很愉快的 看到 生成了 需要的 dist 文件了

然後爲了增加 友好，設置提示的語言

 

2、基本的使用

可以看到，即使是在兩個不同的文件下，定義一個 相同的屬性名稱，依舊會報錯，這裏的屬性都是在全局變量裏進行 定義的。

需要給 其他的文件增加 export，使其變成模塊化

1、數組類型的使用

const arr1: Array<number | string> = ['2', '2', 12]

function max(...args: Array<number>) {
  return Math.max.apply(null, args)
}

2、接口的使用

interface Props {
    [prop: string]: string  // 這樣可以再 對象上 定義任何的參數了
}
const prop: Props = { }
prop.foo = '123'
prop.foo2 = '123'

3、類的使用

class Person {
    name: string   // 要提前 將 對應的屬性 給定義好
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    sayHi() {
        console.log(`hi ${this.name}`)
    }
}

class Person {
    public name: string
    private age: number
    protected readonly salary: number // 只讀，只能在 初始化的時候進行設置，其餘都不能改變
    // 將構造器 設置爲 private 的情況下，就不能使用 new 來進行初始化了
    private constructor(name: string, age: number, salary: number) {
        this.name = name
        this.age = age
        this.salary = salary
    }
    sayHi() {
        console.log(`hi ${this.name}, ${this.age}`)
    }
    // 可以使用 static 靜態方法 來進行 額外的初始化，這樣就提供了 豐富多樣的初始化情況
    static create(name: string, age: number) {
        return new Person(name, age， 1200)
    }
}

4、泛型的使用

function createA<T> (length: number, value: T): Array<T> {
    return Array<T>(length).fill(value)
}
const res = createA<number>(3, 2) // 在調用的時候，將對應的 泛型傳入