<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                [TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> 原文鏈接: - [TypeScript](https://www.typescriptlang.org/) - [github](https://github.com/microsoft/TypeScript) - [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) - [Triple-Slash Directives(三重斜杠指令)](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) - [Typescript 書寫聲明文件](https://juejin.cn/post/6844904034621456398) - [TypeScript Compiler API 使用簡介](https://meixg.cn/2020/06/24/typescript-compiler-api/) - [使用 TypeScript complier API](https://zhuanlan.zhihu.com/p/141410800) ``` 版本:TypeScript 作用:JavaScript的一個超集,而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程 ``` <br/> # <b style="color:#4F4F4F;">基本語法</b> <br/> # <span style="color:#619BE4">&</span> ***** 聯合類型,將兩個類型合并 <br/> # <span style="color:#619BE4">-</span> ***** 刪除已定義操作符 <br/> # <span style="color:#619BE4">+</span> ***** 添加已定義操作符 <br/> # <span style="color:#619BE4">?:</span> ***** 聲明該內容是可選的,不代表可以定義為null <br/> # <span style="color:#619BE4">[]</span> ***** 任意參數接口 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` // 當string類型和number都存在時,number值必須是string值子類型 interface Point { [key: string]: string, [key: number]: string, } ``` <br/> # <span style="color:#619BE4">abstract</span> ***** 聲明抽象類和抽象方法 <br/> # <span style="color:#619BE4">as</span> ***** 類型斷言 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` let el; // 類似類型轉換,斷言變量是某種類型 (<HTMLImageElement>el).src; // 第二種寫法 (el as HTMLImageElement).src; ``` <br/> # <span style="color:#619BE4">declare</span> ***** 編寫描述文件時,定義聲明內容關鍵字 <br/> # <span style="color:#619BE4">decorator</span> ***** 裝飾器函數,在TS中裝飾器只能作用于類 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` 修飾方法時: function log(target: any, name: any, descriptor: PropertyDescriptor) { let fn = descriptor.value; descriptor.value = function (x: number, y: number): number { console.log(x); console.log(y); let result = fn(x, y); result += 128; return result; } } class Method { @log add(x: number, y: number): number { return x + y } } let m = new Method(); console.log(m.add(1, 2)); ``` <span style="color:red;">2. React HOC使用</span> ``` const Hoc = (Com: ComponentClass<any>) => { return class Go extends Com{ render() { return <div> hello <Com/> world </div>; } } }; @Hoc class TList extends Component<any, any> { render(){ return <div>你好哇</div> } } ``` <br/> # <span style="color:#619BE4">enum</span> ***** 定義枚舉類型 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` enum HTTP_CODE { OK = 200, ERROR = 400, NOT_FOUND = 404 } ``` <br/> # <span style="color:#619BE4">extends</span> ***** 類型繼承,用于泛型時可以約束泛型格式 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` 將T中可以繼承U的內容選出返回never T extends U ? never : T; ``` <span style="color:red;">2. 查找類型 + 泛型 + keyof</span> ``` interface API { '/user': { name: string }, '/menu': { foods: string[] } } const get = <URL extends keyof API>(url: URL): Promise<API[URL]> => { return fetch(url).then(res => res.json()); } get(''); get('/menu').then(user => user.foods); ``` <br/> # <span style="color:#619BE4">infer</span> ***** 表示在 extends 條件語句中待推斷的類型變量 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` type ParamType<T> = T extends (param: infer P) => any ? P : T; 在這個條件語句 T extends (param: infer P) => any ? P : T 中,infer P 表示待推斷的函數參數。 整句表示為:如果 T 能賦值給 (param: infer P) => any,則結果是 (param: infer P) => any 類型 中的參數 P,否則返回為 T。 ``` <br/> # <span style="color:#619BE4">get | set</span> ***** 訪問寄存器關鍵字 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` class Person { constructor() { } private _name: string; public get name() { return this._name; } public set name(name: string) { this._name = name; } } ``` <br/> # <span style="color:#619BE4">in</span> ***** 遍歷類型集體聲明類型,type專屬 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` interface IPerson { name: string, age: number } type IDummyPerson = { [k in keyof IPerson]: string } let obj: IDummyPerson = { name: "", age: "" }; function getVal(k: keyof typeof obj) { return obj[k]; } getVal("name"); ``` <br/> # <span style="color:#619BE4">type</span> ***** 聲明類型變量,可以作用于原始值(基本類型),聯合類型,元組以及其它任何你需要手寫的類型 <br/> ### 示例內容 <span style="color:red;">1. 拓展類型</span> ``` type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; }; ``` <br/> # <span style="color:#619BE4">interface</span> ***** 定義接口 <br/> ### 示例內容 <span style="color:red;">1. 定義函數</span> ``` interface IFunc { (x: number, y: number): number } interface IObj { fn: (x: number, y: number) => number, fn2(x: number, y: number): number, } ``` <span style="color:red;">2. 定義數組</span> ``` let?arr:?number[]?=?[1,?2,?3,?4]?//?數字數組?不允許出現其他數據類型 let?arr2:?string[]?=?['h',?'h',?'h']?//?字符串數組 let?arr3:?any[]?=?[1,?'h',?'h',?3]?//允許數組中出現任意類型 interface?arr {[index:?number]:?number} let?list:?arr?= [1,?2,?3,?4] let arr: Array<string> = ['bonjour', 'hello'] let arr2: Array<number> = [1, 2] let arr3: Array<any> = [1, 2, 'hh'] ``` <span style="color:red;">3. 定義鍵值為symbol</span> ``` const a:unique symbol=Symbol(); interface eventPool { [a]: number, } ``` <span style="color:red;">4. 只讀屬性</span> ``` interface Point { readonly x: number; } interface Preson { name: string; age?: number; [propName: string]: any } ``` <span style="color:red;">5. 類型拓展</span> ``` Interface extends interface interface PartialPointX { x: number; } interface Point extends PartialPointX { y: number; } Type alias extends type alias type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; }; Interface extends type alias type PartialPointX = { x: number; }; interface Point extends PartialPointX { y: number; } Type alias extends interface interface PartialPointX { x: number; } type Point = PartialPointX & { y: number; }; ``` <span style="color:red;">6. 常用類型定義</span> ``` // 定義函數的參數可以不全部接收 interface func { (): string } interface obj { a: string b: (x: number, y: number) => number } interface cla { new(): cla } ``` <span style="color:red;">7. 定義</span> ``` export interface ThunkDispatch<S, E, A extends Action> { <T extends A>(action: T): T; <R>(asyncAction: ThunkAction<R, S, E, A>): R; } export type ThunkAction<R, S, E, A extends Action> = ( dispatch: ThunkDispatch<S, E, A>, getState: () => S, extraArgument: E ) => R; ``` <span style="color:red;">8. 函數泛型</span> ``` export interface ThunkDispatch { <R>(x: R): R; } function f(dispatch: ThunkDispatch) { let a = dispatch<{ x: number }>({x: 1}); a.x } 箭頭函數hack const foo = <T extends {}>(x: T) => x; ``` <span style="color:red;">9. 模板字符串類型前綴</span> ``` type addPrefix<TKey, TPrefix extends string> = TKey extends string ? `${TPrefix}${TKey}` : never; type removePrefix<TPrefixedKey, TPrefix extends string> = TPrefixedKey extends addPrefix<infer TKey, TPrefix> ? TKey : ''; type prefixedValue<TObject extends object, TPrefixedKey extends string, TPrefix extends string> = TObject extends {[K in removePrefix<TPrefixedKey, TPrefix>]: infer TValue} ? TValue : never; type addPrefixToObject<TObject extends object, TPrefix extends string> = { [K in addPrefix<keyof TObject, TPrefix>]: prefixedValue<TObject, K, TPrefix> } ``` <br/> # <span style="color:#619BE4">is</span> ***** 自定義類型保護 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` function canEach(data: any): data is Element[] | NodeList { return data.forEach !== undefined; } function f(elements: Element[] | NodeList | Element) { if (canEach(elements)) { console.log(elements.forEach) } } ``` <br/> # <span style="color:#619BE4">keyof</span> ***** 索引類型查詢操作符 <br/> # <span style="color:#619BE4">typeof</span> ***** 獲取對象type類型 <br/> ### 示例內容 <span style="color:red;">1. 數組內容轉key集合</span> ``` typeof keys[number] ``` <br/> # <span style="color:#619BE4">namespace</span> ***** 命名空間,在模塊內部劃分模塊,同名命名空間會合并 <br/> # <span style="color:#619BE4">new</span> ***** 類型與類類型 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` class Obj { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } interface IObjConstructor { new(name: string, age: number): void } interface IObjClass { name: string; age: number; } function ObjConstructor(Obj: IObjConstructor) { let o = new Obj("", 0); console.log(o); } function ObjClass(o: IObjClass) { console.log(o); } ObjConstructor(Obj); ObjClass(new Obj("", 0)); ``` <br/> # <span style="color:#619BE4">this</span> ***** 描述this對象 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` interface IObj { name: string, fn(): number } let obj: IObj = { name: "SystemLight", fn(this: IObj): number { console.log(this.name); return 1; } }; ``` <span style="color:red;">2. 原型鏈實現</span> ``` interface IBus { } const Bus = function (this: IBus) { const [state, setState] = useState(false); console.log(state); } as any as { new(): IBus; } ``` <br/> # <span style="color:#619BE4">unknow</span> ***** 安全版本的any,只能賦值給any或者unknown,沒有任何屬性和方法 <br/> # <span style="color:#619BE4">never</span> ***** 聲明函數永遠不會返回,如函數拋出錯誤,也可以說是一個無效類型 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` export function a(x: ExpandTouchEvent<{}>): never { throw Error(); } ``` <br/>
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看