TS初步學(xué)習(xí)

TS學(xué)習(xí)

1. 基礎(chǔ)類型:number、string、Boolean、null、undefined、Array、Tuple、void、Never、enum、Any、
(1)元組 Tuple:表示一個(gè)已知元素?cái)?shù)量和類型的數(shù)組,各個(gè)元素類型可以不同??梢詐ush,不能跨界訪問和取值。
2.類
(1)當(dāng)成員被標(biāo)記成 private時(shí),它就不能在聲明它的類的外部訪問
(2)構(gòu)造函數(shù)也可以被標(biāo)記成 protected。 這意味著這個(gè)類不能在包含它的類外被實(shí)例化,但是能被繼承。
(3)抽象類

? 抽象類做為其它派生類的基類使用。 它們一般不會直接被實(shí)例化。 不同于接口,抽象類可以包含成員的實(shí)現(xiàn)細(xì)節(jié)。 abstract關(guān)鍵字是用于定義抽象類和在抽象類內(nèi)部定義抽象方法。

3.枚舉

TypeScript支持?jǐn)?shù)字的和基于字符串的枚舉。

4.泛型

組件不僅能夠支持當(dāng)前的數(shù)據(jù)類型,同時(shí)也能支持未來的數(shù)據(jù)類型。

(1)泛型接口

定義公共接口和傳入?yún)?shù)的類型(參數(shù)的類型,編譯器自己判斷)

interface Identities<V, M> {
    value: V,
    message: M
}
function identity<T, U>(value: T, message: U): Identities<T, U> {
    console.log("T:", value,":",typeof value);
    console.log("U:", message,":",typeof message);
    let identities: Identities<T, U> = {
        value,
        message
    }
    return identities
}
console.log(identity(true, "hello,world"))
(2)泛型類

泛型類可確保在整個(gè)類中一致地使用指定的數(shù)據(jù)類型.

interface Identities<T> {
    value: T,
    getIdentity: () => T
}
class IdentityClass<T> implements Identities<T> {
    value: T
    constructor(value: T) {
        this.value = value
    }
    getIdentity(): T {
        return this.value
    }
}

let idClass = new IdentityClass<string>("aaa")
console.log(idClass.getIdentity()) //aaa
let idClass2 = new IdentityClass(68)
console.log(idClass.getIdentity()) //68, 編譯會根據(jù)傳入的值判斷其類型
5. 類型別名

類型別名就是給一種類型起個(gè)別的名字,之后只要使用這個(gè)類型的地方,都可以用這個(gè)名字作為類型代替。它只是起了一個(gè)名字,并不是創(chuàng)建了一個(gè)新類型。使用type關(guān)鍵字。

(1) 使用type關(guān)鍵字
type StringType = string
let s:StringType
s = "hello";
s = 123 //error
(2)類型別名可用于使用泛型
type PositionType<T> = { x: T, y: T }
let p1: PositionType<number> = {
  x: 3,
  y: 5
}
let p2: PositionType<string> = {
  x: 'right',
  y: 'top'
}
(3)使用類型別名時(shí)也可以在屬性中引用自己:
type Next<T> = {
  val: T,
  next?: Next<T> // 這里屬性引用類型別名自身
}
let list: Next<string> = {
  val: 'first',
  next: {
    val: 'second',
    next: {
      val: 'third',
      next: 'test' // 這里不符合類型別名規(guī)定,導(dǎo)致最外層 next 報(bào)錯
    }
  }
}
6.模塊 的導(dǎo)出和導(dǎo)入
(1)先聲明再導(dǎo)出
//導(dǎo)出: test1.ts
class Earth{
    name: string = 'earth';
    rotation(){
        let oneday: string = 'A rotation takes 24 hours.';
        console.log(oneday);
    }
}

let human: string = 'Human being lives on Earth.';

//導(dǎo)入
import {Earth, human} from "./test1.ts"
let ourEarth: Earth = new Earth();

(2)在聲明時(shí)導(dǎo)出
//導(dǎo)出: test1.ts
export class Mars{
    name: string = 'Mars';
    status: string = 'China will explore Mars in the following several decades.';
}

export function exploring(){
    console.log('Launching Changzheng-5 rocket.');
    console.log('Add oil, 胖五.');
}
//導(dǎo)入
import {Mars, exploring} from './test1.ts'

(3) 默認(rèn)的導(dǎo)出導(dǎo)入
// Jupiter.ts
class Jupiter{
    name: string = 'Jupiter';
    feature: string = 'very very big.';
}
let jupiterStatus: string = 'Jupiter is absorbing material from the sun.';
export default {Jupiter, jupiterStatus};


//導(dǎo)入
import SpectacularJupiter from './Jupiter'; // 這里SpectacularJupiter相當(dāng)于Jupiter和jupiterStatus的集合體
let beautifulJupiter = new SpectacularJupiter.Jupiter();
console.log('NASA report: ' + beautifulJupiter.name + ' is ' + beautifulJupiter.feature);
console.log(SpectacularJupiter.jupiterStatus);
(4)常見的導(dǎo)出語句
// 普通導(dǎo)出
export {something1, something2, ..., somethingN};
export {something1 as rename1, something2 as rename2, ..., somethingN as renameN};
export let something = '100';
export function func(){/* some actions here */};

// 默認(rèn)導(dǎo)出
export default something;
export default {something1, something2, ..., somethingN};
export default let something = '100';
export default function func(){/* some actions here */};

// 重新導(dǎo)出
export {something1, something2, ..., somethingN} from 'modulename';
export {something1 as rename1, something2 as rename2, ..., somethingN as renameN} from 'modulename';
export * from 'modulename'; //可以作為中間ts

// 兼容CommonJS和AMD的導(dǎo)出
export = {something1, something2, ..., somethingN};
export = something;

(5)常見的導(dǎo)入語句

// 普通導(dǎo)入
import {something1, something2, ..., somethingN} from 'modulename';
import {something1 as rename1, something2 as rename2, ..., somethingN as renameN} from 'modulename';

// 默認(rèn)導(dǎo)入
import theNewModuleNameYouLike from 'modulename';

// 導(dǎo)入全部
import * as theNameYouLike from 'modulename';

// 兼容CommonJS和AMD的導(dǎo)入
import theNewModuleNameYouLike = require('modulename');
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容