TypeScript資料型別

Aigu發表於2024-05-21
TypeScript資料型別

目錄
  • TypeScript資料型別
    • 基礎資料型別
      • number、string、boolean、 null 和 undefined、object
    • 其他資料型別
      • 元組 []
      • 列舉 enum
      • 介面 interface
      • 聯合型別 |
      • 交叉型別 &
      • type宣告
    • 物件導向
      • 類class
      • 繼承extends
    • 其他
      • 型別推斷
      • 型別斷言 as
    • 總結
    • 引用

TypeScript資料型別

基礎資料型別

number、string、boolean、 null 和 undefined、object

//1.基礎型別使用
// number：表示數值型別，例如：let age: number = 25;
// string：表示字串型別，例如：let name: string = "John";
// boolean：表示布林型別，例如：let isReady: boolean = true;
// null 和 undefined：表示空值型別，例如：let data: null = null;
// object：表示物件型別，例如：let person: object = { name: "John", age: 25 };\
export{}
let n:number=18;
let str:string="張三";
let b:boolean=true;
let arr:number[]=[1,2,3]; 
let arr2:Array<number>=[1,2,3];
let data:undefined=undefined;
let data2:null=null;
let data3:object={name:"張三",age:18};

其他資料型別

元組 []

類似陣列。陣列只能是一種資料型別，元組多個資料型別。但元組長度不能太長，不然不好理解。

//元組
let tuple:[number,string]=[18,"cts"];

列舉 enum

enum Color{Red,Yellow,Blue};

介面 interface

定義一組 屬性（可以是資料型別或方法），不需要實現。可重複定義相同名稱的介面，重名後將合併屬性。

//介面
interface IPerson {
   readonly id: number;
   name: string,
   age: number,
   color: Color;
   address?:string,
   [propName: string]: any;//可以新增任意屬性
}
 let tom: IPerson = {
    id:1,
    name: 'Tom',
    age:12,
    gender2:'male',
    color:Color.Red
 };

console.log(tom.age);

聯合型別 |

型別可選擇

let union:string|number;
union=18;
union="cts";

交叉型別 &

將多個型別合併成一個新的型別

interface IPrintable {
    print(str:string): void;
}

interface ILoggable {
   isLog?:boolean;
   log(): void;
}
let c:IPrintable & ILoggable={
   print(str:string){
      console.log("Printable")
   },
   log(){
      console.log("Loggable")
   }
};
c.print("你好呀");

type宣告

  • 1type 用於定義型別別名，使得我們可以為一個複雜型別或者一個較長的型別宣告一個簡短的別名。這個別名可以在任何地方使用，以代替原始的型別。
  • 2.如果多次宣告同一個變數、函式或類，這些宣告會被自動合併為一個宣告。這種合併稱為宣告合併。而 type 關鍵字也可以用於宣告合併，允許我們擴充套件已有的型別宣告。
type MyString = string;
type Point = { x: number; y: number };
type Callback = (data: any) => void;
let myStr:MyString="123";

type Person2 = {
   name: string;
 }
 type User2 = {
   age: number;
 }
 let person: Person2 & User2;
 person = {
   name: 'Echo',
   age: 26,
 }

物件導向

類class

//定義類
 class Person{
   name:string;
   age:number;
   address?:string;//?可為空
   [propName: string]: any;//可以新增任意屬性
   constructor(name:string,age:number){
       this.name=name;
       this.age=age;
   }
   sayHello():void{
       console.log(`name:${this.name},age:${this.age}`);
   }
}

//類例項
let  user:Person=new Person('rose',18);
user.sayHello();

繼承extends

class Teacher extends Person{
   sayHello():void{
      console.log( `Teacher,name:${this.name},age:${this.age}`);
  }
}
let  user2:Person=new Teacher('jack',18);
user2.sayHello();

其他

型別推斷

不新增變數或常量資料型別。

let num = 123; // 推斷為 number 型別
console.log(num.toFixed(2)); // 輸出：123.00

型別斷言 as

將資料型別轉換,常用any資料轉換

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
console.log(strLength); // 輸出：16

總結

型別是TS中最重要的部分，因為TS的誕生主要就是解決JS弱型別的問題，增加了程式碼的可讀性和可維護性。

引用

博文原始碼https://github.com/chi8708/TypeScriptDemo/blob/main/Basic2/01Type.ts

相關文章