1つの記事でTypeScriptのデータ型について学ぶ

基本タイプ

tsではより多くのタイプがサポートされています

let age: number = 10 // 数値
let firstName: string = '凉宸' // 文字列
let lastName: string = '凉宸' // 文字列
let isMary: boolean = true // ブール値
unde: undefined = undefined // 未定義
nu: null = null // null とします

undefinedとnull他の型のサブタイプと見なすことができるため、他の型に値として割り当てることができます。

値を割り当てるときは、定義されたデータ型に従って行う必要があります。そうしないと、次のエラーメッセージが表示されます。

変数を宣言するとき、型が値と一致しません
変数を再割り当てするとき、型が値と一致しません

ここに画像の説明を挿入

あらゆるタイプ

変数の型を決定できない場合は、任意の型として指定できます。

any 型に値を割り当てる場合、エラーを報告せずに任意の値を割り当てることができます。

isAny:any='any type any' とします
任意=520
いずれか=true
isAny=null

ただし、型の曖昧さを避けるために、 any の使用はできる限り少なくするようにしてください。

あらゆるタイプの特性

あらゆるタイプの割り当てが可能
あらゆるプロパティとメソッドにアクセスできる

let userName: any = '凉宸';
// 任意のプロパティにアクセスできます console.log(userName.name);
console.log(ユーザー名.名前.firstName);
// 任意のメソッドを呼び出すことができます userName.setName('David');
ユーザー名.setName('David').sayHello();
ユーザー名.name.setFirstName('David');

配列

配列内の要素の型を指定できます

年齢: 数値[] = [5, 20, 13, 14]とします
let names: string[] = ['Liang Chen', 'Luffy', 'Ming Shiyin', 'Li Yangyong']

ここに画像の説明を挿入

配列のようなもの:

クラス配列には、配列にあるメソッドがありません。tsc はこれら 2 つを自動的に識別できます。

引数 = [555,555,55] とします

関数lei(){
  arr:数値=引数
}

ここに画像の説明を挿入

タプル

基本的には配列に似ていますが、型は複数にすることができます

arr:[number,string,boolean]=[520,'凉宸',true]とします。

ここに画像の説明を挿入

値を割り当てるときは、型の順序を入力する必要があります。

ここに画像の説明を挿入

要素は多いほうが少ないよりも良い

arr:[number,string,boolean]=[520,'凉宸',true]とします。
arr.push('b') // OK arr.push(4) // OK arr.push(true) // OK console.log(arr)

let arr:[number,string]=[520,'凉宸']
arr.push('b') // OK arr.push(4) // OK arr.push(true) // いいえ console.log(arr)

ここに画像の説明を挿入

インタフェース

インターフェースは、比較的抽象的で、特定の動作を指定しないプログラムとして理解できます。つまり、インターフェースでは、プロパティ、メソッド、プロパティの型、および抽象メソッドのみを定義します。プロパティに値を割り当てたり、メソッドの実装を定義したりすることはありません。
クラスの場合、通常はプロパティに値を割り当てる必要があり、メソッドも実装する必要があります。
インターフェース宣言はクラスに似ており、メンバーはクラスというよりはリテラルオブジェクトに似ています。

効果：

物体の形状を説明する
ダックタイピング

インターフェースポイント
  ユーザー名:文字列|番号
  パスワード:番号
} // 現時点では、tsc を実行しても対応する js コードは解析されません。この型は ts に固有であり、制約のみを示すためです。

インターフェースポイント
  ユーザー名:文字列|番号
  パスワード:番号
}

値:ポイント={
  ユーザー名:'[email protected]',
  パスワード:123456
}

val:Point={とします
  ユーザー名:55555,
  パスワード:123456
} // この時点では両方が満たされ、tscが実行される


// 制約なしで次のコードのみが表示されます js
var 値 = {
    ユーザー名: '[email protected]',
    パスワード: 123456
};
var val = {
    ユーザー名: 55555,
    パスワード: 123456
};

オプション属性?

IPerson インターフェイス型変数を作成する場合、変数に値を割り当てるときにインターフェイスで宣言された属性も存在している必要があります。そうでない場合はエラーが報告されます。

しかし、プロパティをオプションとして設定し、変数を作成するときに値を割り当てることができます

インターフェースポイント
  ユーザー名:文字列|番号
  パスワード:数字、
  メールアドレス?:文字列
}

値:ポイント={
  ユーザー名:'[email protected]',
  パスワード:123456
}

val:Point={とします
  ユーザー名:55555,
  パスワード:123456
}

ここに画像の説明を挿入

読み取り専用属性readonly :

インターフェースポイント
  ユーザー名:文字列|番号
  パスワード:数字、
  メールアドレス?:文字列,
  読み取り専用アドレス:文字列
}

値:ポイント={
  ユーザー名:'[email protected]',
  パスワード:123456、
  住所:「保定」
}

val:Point={とします
  ユーザー名:55555,
  パスワード:123456、
  住所:「北京」
}
値.パスワード=65975222
値.アドレス = 'kkk'

ここに画像の説明を挿入

関数

tsの関数は戻り値の型を定義できる

定数値=():数値=>{
  戻り値 1
}

定数val=():文字列=>{
  戻り値 1
}

ここに画像の説明を挿入

自己推論を入力する

型を割り当てずに変数を定義すると、値に応じて推論されます。

値=5555とする

値='文字列'

ここに画像の説明を挿入

結合タイプ（1つ以上選択）

値:文字列|数値
値 = '凉辰'
値=520
値=true

ここに画像の説明を挿入

型アサーション:

関数 get(データ:文字列|数値):数値{
  const str = 文字列としてのデータ
  if(str.length){
    str.lengthを返す
  }それ以外 {
    const num = 数値としてのデータ
    num.toString().lengthを返す
  }
}

console.log(get('凉宸'));
コンソールログ(get(520));

ここに画像の説明を挿入

アサーションを使用する
アサーションは型変換ではありません。変数の型をコンパイラーに伝えるだけであり、後で変数を使用するときにヒントが表示されます。
アサーションを追加しないと、特定のタイプのメソッドを使用するときにエラーが報告されます。

タイプガード:

type guard型ではなく、特定の型を確認できる仕組みです。

関数 get(データ:文字列|数値):数値{
  if(データの種類==='文字列'){
    データの長さを返す
  }それ以外 {
    data.toString().length を返す
  }
}

console.log(get('凉宸'));
コンソールログ(get(520));

ここに画像の説明を挿入

クラス

クラス: クラス、ES6 構文は、js のオブジェクト指向の推進であり、クラスは単なる構文上の糖衣であり、基礎となる実装は依然として関数とプロトタイプに基づいています。

クラス: 設計図や図面など、あらゆるものの抽象的な特性を定義します
オブジェクト: クラスのインスタンス
3つの主要な機能: カプセル化、継承、ポリモーフィズム

次の 3 つの修飾子を使用して、クラス内のメンバーのアクセスレベルを制御できます。

パブリック: 変更されたプロパティまたはメソッドはパブリックであり、どこからでもアクセスできます。デフォルトの動作は
保護済み: 変更されたプロパティまたはメソッドは保護されており、クラス自体とそのサブクラスからのみアクセスできます。
プライベート: 変更されたプロパティまたはメソッドはプライベートであり、クラス内でのみアクセスできます。

クラス Person {
  パブリック名:文字列
  保護された年齢:番号
  プライベートアドレス:文字列
  コンストラクター(名前:文字列,年齢:数値,住所:文字列){
    this.name=名前
    this.age=年齢
    this.address=住所
  }
  話す（）{
    console.log(`人:${this.name}---${this.age}---${this.address}`)
  }
}
const Children = new Person('子供',20,'宝定')
子ども.speak()
//正常に出力できる

ここに画像の説明を挿入

クラス Person {
  パブリック名:文字列
  保護された年齢:番号
  プライベートアドレス:文字列
  コンストラクター(名前:文字列,年齢:数値,住所:文字列){
    this.name=名前
    this.age=年齢
    this.address=住所
  }
  話す（）{
    console.log(`人:${this.name}---${this.age}---${this.address}`)
  }
}

子クラスはPersonを拡張します{
  言う（）{
    console.log(`child:${this.name}---${this.age}`)
  }
}
// const Children = new Person('子供',20,'宝定')
// Children.speak()
const children = new child('凉宸',20,'宝定')
子供たちが言う()

ここに画像の説明を挿入

実行時にエラーも報告される

ここに画像の説明を挿入

クラス Person {
  パブリック名:文字列
  保護された年齢:番号
  プライベートアドレス:文字列
  コンストラクター(名前:文字列,年齢:数値,住所:文字列){
    this.name=名前
    this.age=年齢
    this.address=住所
  }
  話す（）{
    console.log(`人:${this.name}---${this.age}---${this.address}`)
  }
}

子クラスはPersonを拡張します{
  言う（）{
    console.log(`child:${this.name}---${this.age}`)
  }
}
// const Children = new Person('子供',20,'宝定')
// Children.speak()
const children = new child('凉宸',20,'宝定')
子供たちが言う()

ここに画像の説明を挿入

クラス Person {
  パブリック名:文字列
  保護された年齢:番号
  プライベートアドレス:文字列
  コンストラクター(名前:文字列,年齢:数値,住所:文字列){
    this.name=名前
    this.age=年齢
    this.address=住所
  }
  話す（）{
    console.log(`人:${this.name}---${this.age}---${this.address}`)
  }
}

子クラスはPersonを拡張します{
  言う（）{
    console.log(`child:${this.name}---${this.age}`)
  }
}
const Children = new Person('子供',20,'宝定')
子ども.speak()
console.log(子供のアドレス);
console.log(子供の年齢);

// const children = new child('凉宸', 20, '宝定')
// 子どもが言う()

ここに画像の説明を挿入

列挙する

列挙型は、値が特定の範囲に制限されるシナリオで使用されます。

列挙型週 {
  SUNDAY = 「日曜日」、
  MONDAY = 「月曜日」、
  TUESDAY = '火曜日'、
  WEDNESDAY = '水曜日'、
  木曜日 = '木曜日'、
  FRIDAY = 「金曜日」、
  SATURDAY = 「土曜日」
}
関数 getProgramme(date: Week): 文字列 {
  if (date === Week.SUNDAY) {
  「日曜日の余暇と娯楽」を返す
  } そうでない場合 (日付 === Week.MONDAY) {
  「月曜日のブログ投稿」を返す
  } そうでない場合 (date === Week.TUESDAY) {
  「火曜日のスプリント」に戻る
  }
  そうでない場合 (日付 === Week.WEDNESDAY) {
  「水曜日も戦い続ける」
  }
  そうでない場合 (日付 === Week.THURSDAY) {
  「木曜日の新着記事」を返す
  }
  そうでない場合 (日付 === Week.FRIDAY) {
  「金曜日は休む準備ができました」を返す
  }
  それ以外 {
  「土曜日に寝る」を返す
  }
  }
  console.log(getProgramme(Week.THURSDAY));

ここに画像の説明を挿入