Kite的筆記
0%

typescript

發表於 更新於 分類於
8.9k 16 分鐘

1. TypeScript TS 快速入門

1.1. 什麼是TypeScript？

  1. 加強版的javascript(Superset)
  2. 加強了「Type」的部分
  3. 開發完成後，最後還是需要編譯成javascript
  4. 適用於開發前端跟後端，例如：搭配React、Express等框架

1.2. 為什麼需要TyperScript

  1. 開發時的(Type)類型檢查
  2. 補強動態語言JS，Run起來才會出錯的缺點(不小心用字串做加減乘除)
  3. 提高專案程式碼的維護性

2. 環境安裝

2.1. 全局安裝

1
npm install typescript -g

2.2. 專案安裝

1
npm install typescript --save-dev

2.3. 版本檢查

1
tsc -v

2.4. 初始化專案

經過以下指令產生tsconfig.json

1
tsc --init

3. config設定項目

這邊簡單記錄幾個config設定

3.1. 編譯目標版本

1
"target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

3.2. Source path

1
"rootDir": "./src",                                  /* Specify the root folder within your source files. */

3.3. Output path

1
"outDir": "./dist/",                                /* Specify an output folder for all emitted files. */

image-20220730193055247

3.4. 允許撰寫js

1
// "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */

3.5. debug模式指向ts檔案

1
"inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */

image-20220730192733527

image-20220730192703431

4. 如何complier

4.1. 新增index.ts

1
let a: string ="kite"

4.2. 手動編譯檔案

經過以下指令會編譯出index.js檔

1
tsc index.ts

4.3. 持續監控

1
tsc --watch

5. 動手寫程式

image-20220802022320270

5.1. basic

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ------------ 基本類型 ------------

let str: string ='kite'
let str1: string;
str1 ="kite"

let num: number = 1000
let boo: boolean = true

let n: null = null
let un: undefined = undefined

let test: any = true;//任何型別都可以

//陣列
let arr1d: string[] = ['a','b','c']
let arr2d: string[][] = [['a1','b1','c1'],['a2','b2','c2']]


//元組
let tuple1d: [number, string, boolean] = [1,'a',true]
let tuple2d: [string,string][] = [['a','b']]

5.2. Enum 枚舉

1
2
3
4
5
6
7
8
// ------------ Enum 枚舉 ------------
enum LiveStatus {
    SUCCESS = 0,
    FAIL = -1,
    STREAMING = 1
};
const liveStatus = LiveStatus.FAIL
console.log(liveStatus);

5.3. Union

1
2
3
4
// ------------ Union ------------
let union : boolean | string;
union = true;
union = "hi,I'm Support boolean、string type"

5.4. Type

5.4.1. basic

1
2
3
4
5
// ------------ Type ------------
type A = number | string 
let a1: A
a1 = 1
a1 = "type A"

5.4.2. Partial & Readonly

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//保哥 union
type Level = "初階" | "中階" | "高階";
let yourLevel: Level = "中階";

//保哥 Partial & ReadOnly Types
type Person = {
    name: string;
    age: number;
}
type PersonPartial = Partial<Person>;
type PersonReadonly = Readonly<Person>;

var personA: Person = {
    name:"Will",
    age:18
}

var personB:PersonPartial = {
    name: "Will"
}

var personC:PersonReadonly = {
    name: "Will",
    age:123
}

//personC.name="kite";//error

5.5. Interface

1
2
3
4
5
// ------------ Interface ------------
interface User{
    name: string;
    age: number;
}

5.6. Object

思考一下type 與 interface的差異性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// ------------ Object ------------

type Card = {
    name: string 
    desc?: string //可選
}

const card01: Card = {
    name:"kite",
    desc:"...."
}


interface Card2 {
    name: string 
    desc: string
}

interface Card2 {
    age: number
}

const card02: Card2 = {
    name:"dog",
    desc:"won!",
    age:2
}

5.7. Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// ------------ function ------------
function hello(a: string,b: string){
    return a + b;
}

function hello2(a: string,b: string): number{
    return 999;
}

function hello3(a: number,b: boolean,c: string){
    return 100;
}

function test2(a: number){
    console.log(a);
}

//可選參數要放在最後面
function hello4(name: string, age?: number){
    if(age === undefined) return -1;
    test2(age)
    return
}

//箭頭函式
const func = () => {}
const func2 = () => {
    return 1
}

5.8. 斷言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// ------------ 斷言 unknown ------------

type TodoModel = {
    userId: number;
    id: number;
    title: string;
    completed: boolean;
}

async function getData(){
    //https://jsonplaceholder.typicode.com/
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const todoModel = await res.json() as TodoModel;    
    console.log(todoModel);    
}

const data1: TodoModel = {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
}

type Beta = {
    name: string 
}
// 假設data1是動態的，想像data1是response回來的json且動態內容，先unknow 再轉為預計的型別
const beta = data1 as unknown as Beta

getData()

5.9. Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// ------------ class ------------

class Live {
    roomName: string 
    private id: string 
    protected name: string 
    constructor (roomName1: string, id1: string, name1: string)
    {
        console.log('建立直播中...');        
        this.roomName = roomName1;
        this.id = id1;
        this.name = name1;
    }
    start(){
        console.log("class Live start method");        
        console.log(`class Live this.id = ${this.id}`);                
        console.log(`class Live this.name = ${this.name}`);      
    }
}

//繼承 extends
class CarLive extends Live {
    constructor (roomName1: string, id1: string, name1: string)
    {
        super(roomName1,id1,name1)        
    }

}

const live01 = new Live("1號","00001","kite");
console.log(live01);
//console.log(live01.id);//在開發階段會有報錯提示

const live02 = new CarLive("2號","00002","Richard");
console.log(live02);
live02.start();


//私有變數新寫法
class Live2{
    //↓私有變數
    #name
    constructor(name: string){
        this.#name= name;
        console.log(name);        
    }
}

const live2 = new Live2("Mary");
console.log(live2);


//實作介面 implements
interface CarProps{
    name: string
    age: number
    start: () => void
}


class Car implements CarProps{
    name: string 
    age: number

    constructor(name: string,age: number){
        this.name = name
        this.age = age
    }

    start() {

    }
}

5.9.1. public

當一個變數或方法的可視性被宣告為public。這表示這些方法和屬性可以在類別的裡面與外面被存取。

5.9.2. protected

當一個變數或方法的可視性被宣告為protected，該變數或方法只能在類別以及子類別的內部存取。

5.9.3. private

當一個變數或方法的可視性被宣告為private，該變數或方法只能在定義它們的類別內。

實質上，在browser上還是能進行存取，如下圖：

image-20220730235820137

新語法新特性，希望能達到private效果可以使用#符號進行變數宣告。再看一次browser，的確已經限制住存取了。

image-20220731005658972

5.10. 泛型

5.10.1. function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ------------ 泛型 ------------
//function
function print<T>(data:T){
    console.log('data',data);
    
}
print<number>(999)
print<string>("kite")
print<string[][]>([['kite','Richard']])
print<CarProps>({
    name:"kite"
    ,age:123
    ,start(){
        console.log(`I'm start method`);
    }
});

5.10.2. class

1
2
3
4
5
6
7
8
9
10
11
12
//class
class Print<T> {
    data: T
    constructor(d: T){
        this.data = d;
    }
}

const p = new Print<number>(999);
const p1 = new Print<string>('kite');
console.log('p',p);
console.log('p1',p1);

5.11. Utility Types

5.11.1. Record<Keys, Type>

1
2
3
4
5
6
7
8
9
10
11
12
interface CatInfo {
    age: number;
    breed: string;
}
   
type CatName = "miffy" | "boris" | "mordred";

const cats: Record<CatName, CatInfo> = {
    miffy: { age: 10, breed: "Persian" },
    boris: { age: 5, breed: "Maine Coon" },
    mordred: { age: 16, breed: "British Shorthair" },
};

5.11.2. Pick<Type, Keys>

1
2
3
4
5
6
7
8
9
10
11
12
interface Todo1 {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview1 = Pick<Todo1, "title" | "completed">;
 
const todo1: TodoPreview1 = {
  title: "Clean room",
  completed: false,
};

5.11.3. Omit<Type, Keys>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface Todo2 {
    title: string;
    description: string;
    completed: boolean;
    createdAt: number;
  }

type TodoPreview2 = Omit<Todo2, "description">;
 
const todo2: TodoPreview2 = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};

6. 參考連結