TypeScript 是對 JavaScript 的補充，將 JavaScript 由動態型別、弱型別語言轉為靜態型別、強型別的語言
簡介
TypeScript 由三個部分組成：
- 型別：為 JavaScript 代碼添加型別與型別檢查來確保健壯性，進入學習
- 語法：提前使用新語法或新特性來簡化代碼，進入學習
- 工程：最侄訓得可用的 JavaScript 代碼，進入學習
環境
npm i typescript ts-node ts-node-dev -g # 安裝 typescript 和 執行工具
tsc --init # 在當前目錄生成 typescript 組態檔 tsconfig.json
ts-node index.ts # 將 typescript 編譯成 nodejs 并執行，常用引數有
# -P：指定 ts 組態檔位置，默認使用專案下的 tsconfig.json 檔案
# -T：禁用型別檢查
# --emit --compilerHost：執行并輸出編譯后的檔案在 .ts-node 檔案夾下
ts-node-dev index.ts # 監聽檔案改變并自動執行
# --respawn：啟用監聽重啟
# --transpile-only```：禁用型別檢查，更快的編譯速度
原始型別
const nam: string = 'zsg'
const bol: boolean = false
const age: number = 18
const bigint: bigint = 222222222n
const undef: undefined = undefined
const nul: null = null
const symbol: symbol = Symbol('hell')
const obj: object = {}
null 和 undefined
在 JavaScript 中 null 表示這里有值，但是個空值， undefined 表示這里沒有值
在 TypeScript 中沒有開啟 strictNullChecks 檢查的情況下 null 和 undefined 會被視作其他型別的子型別
const str: string = null
const num: number = undefined
const nul: undefined = null
const undef: null = undefined
void
void 在 JavaScript 中表示執行后面的運算式或括號中的運算式并回傳 undefined
void 在 TypesScript 中用于描述一個沒有 return 任何值的函式的回傳值，undefined 能夠賦值給 void
const s: void = undefined
function f():void { }
陣列的型別注解
有兩種方式宣告一個陣列
const arr1: string[] = ['a', 'b']
const arr2: Array<number> = [3, 4]
對于定長的陣列，使用 Tuple 型別，越界訪問就會報錯
const arr3: [string, string, number] = ['a', 'b', 4]
為陣列的設定可選成員，可選成員值默認為 undefined
const arr4: [string, string?, number?] = ['a', undefined]
使用具名元組
const arr5: [name: string, age: number, sex?:boolean] = ['z', 10]
物件的型別注解
使用 interface 宣告一個介面結構，使用這個結構作為物件的注解
interface People {
name: string,
age: number,
sex: boolean
}
const obj1: People = {
name: 'z',
age: 10,
sex: true
}
可選屬性和只讀屬性
interface People {
name: string,
readonly age: number,
sex?: boolean
}
const obj2: People = {
name: 'z',
age: 10
}
Object 和 object
Object 包含了所有的型別，object 包含所有非原始型別的型別即陣列，物件，函式
const s1: Object = 12
const s2: Object = []
const s3: object = {}
const s4: object = []
const s5: object = () => {}
字面量型別和聯合型別
字面量型別主要包括字串字面量，數字字面量，布爾字面量，物件字面量，他們可以直接作為型別標注
const str1: 9 = 9
聯合型別是一組型別的可用集合
const str2: 9 | 'a' | true = true
type users = {bol: true, aaa: string} | {bol: false, bbb: string} // 創建型別別名
const user: users = { // 實作互測驗性
bol: false,
bbb: 'a'
}
列舉
數字列舉默認從 0 開始，以 1 遞增，數字列舉是可以雙向映射的，而字串列舉是單向的
enum Items1 {
name = 'zsg',
age = 1,
sex
}
console.log(Items1.name, Items1.age, Items1.sex, Items1[1]) // zsg 1 2 age
常量列舉，只能通過列舉成員訪問列舉值，不能反向訪問
const enum Items2 {
name = 'zsg',
age = 1,
sex
}
函式
function fun1(name: string): number{
return name.length
}
const fun2: (name: string) => number = function(name) {
return name.length
}
type Fun1 = (name: string) => number // 使用別名
const fun3: Fun1 = name => name.length
interface Fun2 { // 使用介面
(name: string): number
}
const fun4: Fun2 = name => name.length
function fun5(): void{ } // 函式沒有回傳值就是 void 型別
函式引數
function fun1(name: string, age?: number): void { } // 可選引數，默認為 undefined
function fun2(name: string, age: number=12): void { } // 可選引數，并設定了默認值
function fun3(name: string, ...rest: string[]): void{ } // rest 引數為一個陣列
函式多載，實作與入參關聯的回傳值型別，最后是函式的實作需包含所有可能情況
function fun1(name: string): string
function fun1(name: number): number
function fun1(name: string | number): number | string {
return name
}
Class 類
class Foo{
public name: string // 此類成員在類／類的實體／子類中都能被訪問
readonly version = "1.0.1" // 只讀成員
static size = "1024G" // 靜態成員
constructor(name: string) {
this.name = name
}
log(text: string): void {
this._name = text
}
protected get _name(): string { // 此類成員只能在類與子類中被訪問
return this.name + '!'
}
private set _name(v: string) { // 此類成員僅能在類的內部被訪問
this.name = v
}
}
在建構式中的引數加上訪問性修飾符即可自動賦值
class Foo{
constructor(public name: string, private age: number) { }
}
繼承中使用 override 覆寫基類中原有的屬性或方法，若基類不存在會報錯
class Foo { name = 1 }
class Boo extends Foo{
override name = 2
}
使用抽象類
abstract class Boo{
abstract name: string
abstract log(text: string): string
}
class Foo implements Boo{
name = 'zzz'
log(text: string) {
return 'zzz'
}
}
使用介面 interface
interface Boo{
// new(): Foo 類似于描述函式的方式
name: string
log(text: string): string
}
class Foo implements Boo{
name = 'zzz'
log(text: string) {
return 'zzz'
}
}
面向物件的五項基本原則
- S 單一功能原則：一個類應該僅具有一種職責
- O 開放封閉原則：一個類應該是可擴展但不可修改的
- L 里式替換原則：一個派生類可以在程式的任何一處對其基類進行替換
- I 介面分離原則：類的實作方應當只需要實作自己需要的那部分介面
- D 依賴倒置原則：對功能的實作應該依賴于抽象層
any，unknown，never
any 型別
- TypeScript 提供了的內置型別 any，來表示接收任意型別
- 只宣告未提供初始值的變數和不為函式引數提供型別標注時，都將被隱式推導為 any
- 當啟用了
noImplicitAny時，不為函式引數提供型別標注時會報錯 - 它可以在宣告后再次接收任意型別，同時可以賦值給任意型別的變數
let bol: any = true
bol = 1
let str: string = bol
let arr: any[] = [1, true, 'a']
function fun(a, b) {}
unknown 型別
- unknown 表示任意型別，且可以再次賦值為任意型別
- 只能賦值給 any 和 unknown 型別
let unk: unknown = true
unk = 1
let b: any = unk
never 型別是空型別，不攜帶任何型別資訊，描述根本不存在的型別
type sn = string & number // never
function aa(): never {
throw new Error()
}
型別斷言
型別斷言能夠顯式告知型別檢查程式當前這個變數的型別，其實就是一個將變數的已有型別更改為新指定的型別
let unk: unknown = { name: 'zzz' }
console.log((unk as {name: string}).name, (<{name: string}>unk).name)
使用雙重斷言
let str: string = 'zz'
console.log((str as unknown as {name: string}).name)
使用非空斷言，使用 ! 和可選鏈 ? 的用法類似，表示前面的生命一定非空，即排除了 null 和 undefined 型別
let str: {func?: () => number|null} = {
func: () => null
}
console.log(str.func!()!.toFixed)
console.log(str.func?.()?.toFixed)
實作部分介面
interface a{
name1: string,
age: number
}
const b = <a>{
name1: 'aa'
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/533553.html
標籤：其他