型システムとTypeScriptの基本的な型を理解する

その他 2021-03-23 12:00:00 訪問数: null

1.プログラムとは何ですか？

プログラム=データ構造+アルゴリズム=さまざまな形式のデータ+データ処理ロジック

2.データはフォーマットされています（タイプ）

  • 文字列、数値、ブール値、ヌル、未定義
  • オブジェクト、配列、関数、コレクション

三、プログラムが間違っているかもしれない

  • 計算エラー（数値以外のデータに対していくつかの数学演算を実行します）
  • 存在しないメソッドを呼び出します。データの種類が異なれば、次のような操作方法やメソッドも異なります。文字列型のデータは数学演算に直接参加しないでください。

4.動的に型付けされた言語と静的に型付けされた言語

[1]動的に型付けされた言語

JavaScriptなど、プログラムの実行中にデータ型チェックを行う言語

[2]静的に型付けされた言語

プログラムのコンパイル中にデータ型をチェックするための言語（Javaなど）

5つ目は、静的に型付けされた言語の長所と短所です。

静的に型付けされた言語のコア：型システム

[1]利点

  • プログラムが実稼働環境で実行された後のエラーを回避するために、プログラムのコンパイル段階（IDE、エディター、またはコーディング段階でさえ）でいくつかの潜在的なエラーを見つけることができます。
  • コーディング標準は、チームの開発とコラボレーションに役立ちますが、大規模なプロジェクト開発とプロジェクトの再構築にも役立ちます
  • IDEおよびエディターと連携して、より強力なコードインテリジェントプロンプト/チェックを提供します
  • コードはドキュメントです

[2]デメリット

  • トラブル
  • 柔軟性の欠如

6、動的型付け言語の長所と短所

動的型付け言語の長所と短所に反して

7.型システムとは

型システムは2つの重要なコンポーネントで構成されています

  • タイプアノテーション（定義、アノテーション）-タイピング
  • 型チェック（チェック）-型チェック

8.タイプラベリング

型注釈は、コード内のデータ（変数、関数（パラメーター、戻り値））に型の説明を追加することです。変数または関数（パラメーター）に注釈を付けると、注釈の型に準拠しない型を格納または渡すことはできません。 。アノテーションを使用すると、TypeScript コンパイラはアノテーションに従ってこれらのデータに対して型の正当な検出を実行できます。アノテーションを使用すると、さまざまなエディター、IDEなどがインテリジェントなプロンプトを提供できます

9、タイプ検出

名前が示すように、データの種類を検出します。ここでは、単語の種類に焦点が当てられていることに注意してください。型システムは、パラメーターの値の範囲（1〜100の間）などの特定の値ではなく（ただし、値を検出できる場合もあります）、型を検出します。この検出を完了するために型システムに依存することはできません。それは私たちのビジネス層の特定のロジックであり、型システムはその値型が数値であるかどうかを検出する必要があります！

10.TypeScript タイプラベリング

では TypeScript 、型注釈の基本的な文法形式は次のとおりです。

数据载体:类型

let name:string = 'dingFY' // name:string
let age:number = 24 // age:number

TypeScript タイプラベル、私たちはそれを分割することができます

  • 基本的な単純型アノテーション
  • 高度な詳細型アノテーション

11個の基本的な単純型アノテーション

  • ベーシックタイプ
  • 空のタイプと未定義のタイプ
  • オブジェクトタイプ
  • 配列型
  • タプルタイプ
  • 列挙型
  • 値タイプなし
  • 入力しないでください
  • いかなるタイプ
  • 不明なタイプ

12.基本タイプ

基本的なタイプには、文字列、数値、ブール値が含まれます

let str: string = '字符串';
let n: number = 100;
let isOk: boolean = true;

13個の空の未定義の型

in Null と Undefined 両方の型は、変数のマークNull と Undefined 型に1つだけの値があるため、変数を 変更できないことを意味します

let a: null;
// ok
a = null;
// error
a = 1;

デフォルトでは、  null sum undefined はすべてのタイプのサブタイプです。つまり、null 合計 undefined を他のタイプの変数に割り当てることができ ます

let a: number;
// ok
a = null;

変数が宣言されているが割り当てられていない場合、変数の値ですが、 undefined注釈付きの型でもない場合、デフォルトの型は次のようになります。 any

// 类型为 `number`，值为 `undefined`
let a: number;
// 类型为 `any`，值为 `undefined`
let a

null と undefined は両方とも他のタイプのサブタイプであるため、 デフォルトでいくつかの隠れた問題があります

let a:number;
a = null;
// ok（实际运行是有问题的）
a.toFixed(1);

ヒント：tsconfig.jsonファイルでstrictNullChecks 構成 を指定して、多くの一般的な問題を true効果的に検出 null または undefined回避します

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es5",
        "watch": true,
        "strictNullChecks": true
    },
    "include": ["./src/**/*"]
}
let ele = document.querySelector('div');
// 获取元素的方法返回的类型可能会包含 null，所以最好是先进行必要的判断，再进行操作
if (ele) {
    ele.style.display = 'none';
}

14.オブジェクトタイプ

[1]組み込みオブジェクトタイプ

には JavaScript 、Object、Array、Date ...などの多くの組み込みオブジェクトがあり、オブジェクトのコンストラクタまたはクラスを介してそれらにマークを付けることができます。

let a: object = {};
// 数组这里标注格式有点不太一样
let arr: Array<number> = [1,2,3];
let d1: Date = new Date();

[2]カスタムオブジェクトタイプ

別のケースでは、多くの場合、オブジェクトの構造をカスタマイズする必要があります。今回はできます

  • リテラル注釈
  • インターフェース
  • クラスまたはコンストラクターを定義する

1.リテラルラベリング：

let a: {username: string; age: number} = {
  username: 'zMouse',
  age: 35
};
// ok
a.username;
a.age;
// error
a.gender;

优点 ：便利で直接

缺点 ：再利用やメンテナンスに役立たない

2.インターフェース：

// 这里使用了 interface 关键字
interface Person {
  username: string;
  age: number;
};
let a: Person = {
  username: 'zMouse',
  age: 35
};
// ok
a.username;
a.age;
// error
a.gender;

优点 ：高い再利用性

缺点 ：インターフェースは、具体的な値としてではなく、型の注釈としてのみ使用できます。これは単なる抽象的な構造定義であり、エンティティではなく、具体的な関数の実装ではありません。

3.クラスとコンストラクター：

class Person {
	constructor(public username: string, public age: number) {
  }
}
// ok
a.username;
a.age;
// error
a.gender;

优点 ：関数は比較的強力であり、エンティティが定義されるときに対応するタイプも定義されます

缺点 ：複雑です。たとえば、特定の関数が受け取るパラメータ構造のみを制約したい場合、クラスを定義する必要はありません。インターフェイスを使用する方が簡単です。

interface AjaxOptions {
    url: string;
    method: string;
}

function ajax(options: AjaxOptions) {}

ajax({
    url: '',
    method: 'get'
});

【3】延長

パッキングオブジェクト：

ここではラッパーオブジェクトが実際にあること JavaScript で String、Number、とBoolean私たちは知っている string タイプと String タイプが同じではない、 TypeScript 同じことが真であります

let a: string;
a = '1';
// error String有的，string不一定有（对象有的，基础类型不一定有）
a = new String('1');

let b: String;
b = new String('2');
// ok 和上面正好相反
b = '2';

15.配列タイプ

TypeScript 配列に格納されている型は同じである必要があるため、配列型にラベルを付けるときは、配列に格納されているデータ型に同時にマークを付ける必要があります。

[1]一般的な注釈を使用する

// <number> 表示数组中存储的数据类型
let arr1: Array<number> = [];
// ok
arr1.push(100);
// error
arr1.push('dingFY');

[2]簡単なラベリング

let arr2: string[] = [];
// ok
arr2.push('dingFY');
// error
arr2.push(1);

 16.タプルタイプ

タプルは配列に似ていますが、格納されている要素タイプは同じである必要はありませんが、次の点に注意する必要があります。

  • 初期化データの数と対応するロケーションラベルタイプは一貫している必要があります
  • 範囲外データは、タプル注釈のタイプの1つである必要があります（範囲外データは、対応する順序共用体タイプなしでラベル付けできます）
let data1: [string, number] = ['dingFY', 24];
// ok
data1.push(100);
// ok
data1.push('100');
// error
data1.push(true);

17の列挙型

列挙型の役割は、関連データのコレクションを整理する方法です。列挙型を使用すると、関連データのグループにフレンドリ名を割り当てることができます。

enum HTTP_CODE {
  OK = 200,
  NOT_FOUND = 404,
  METHOD_NOT_ALLOWED
};
// 200
HTTP_CODE.OK;
// 405
HTTP_CODE.METHOD_NOT_ALLOWED;
// error
HTTP_CODE.OK = 1;

【1】注意事項：

  • キーを数字にすることはできません
  • 値は、数値型列挙型と呼ばれる数値、または文字列型列挙型と呼ばれる文字列にすることができますが、他の値にすることはできません。デフォルトは数値です：0
  • 列挙値は省略できます。省略した場合は、次のようになります。
    • 最初の列挙値のデフォルトは0です。
    • 最初以外の列挙値は、前の数値列挙値+1です。
  • 列挙値は読み取り専用（定数）であり、初期化後に変更することはできません

[2]文字列型の列挙

列挙型の値。文字列型にすることもできます

enum URLS  {
  USER_REGISETER = '/user/register',
  USER_LOGIN = '/user/login',
  // 如果前一个枚举值类型为字符串，则后续枚举项必须手动赋值
  INDEX = 0
}

注：前の列挙値タイプが文字列の場合、後続の列挙項目は手動で割り当てる必要があります

ヒント：列挙名は大文字でも小文字でもかまいません。すべて大文字にすることをお勧めします（通常、値を定数としてマークするには、すべて大文字の命名方法を使用します）

18.値タイプなし

データのない型を示します。これは通常、戻り値のない関数の戻り値型に注釈を付けるために使用されます。関数のデフォルトの注釈型は次のとおりです。void

function fn():void {
  	// 没有 return 或者 return undefined
}

strictNullChecks ある false 場合、undefined および null に割り当てることができる void が、場合 strictNullChecks である true 場合には、のみ undefined に割り当てることができ void

19、入力しないでください

関数が実行できない場合、 return 返されるのは never 、voidとvoidは異なり、実行され returnますが、値never がないためreturn、エラーをスローするなどして実行されず 、関数の実行が終了します。

function fn(): never {
  	throw new Error('error');
}

20、あらゆるタイプ

値がどのタイプであるかわからない場合や、値に対してタイプチェックを実行する必要がない場合は、any タイプとしてマークできます。 

let a: any;
  • 変数が未割り当ておよびマークなしで宣言されると、デフォルトで any タイプになります
  • 任意のタイプの値をに割り当てることができる any タイプ
  • any タイプは任意のタイプに割り当てることもできます
  • any タイプには任意の属性とメソッドがあります

注：any タイプとしてマーク することは、値のタイプ検出を放棄し、IDEのスマートプロンプトを放棄することも意味します

ヒント：noImplicitAny 構成が tsconfig.jsonファイルで指定されて いるtrue場合、関数パラメーターのany型が暗黙的であると エラーが報告されます 

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es5",
        "watch": true,
        "strictNullChecks": true,
        "noImplicitAny": true
    },
    "include": ["./src/**/*"]
}

21.不明なタイプ

unknow、バージョン3.0の新機能、anyのセキュリティバージョンに属しますが、anyとは異なります。

  • unknowは、unknowにのみ割り当てることができます。
  • unknowには属性とメソッドがありません

22、関数型

JavaScriptでは関数が非常に重要であり、TypeScriptも同様です。同様に、関数にも独自の型注釈形式があります

  • パラメータ
  • 戻り値
函数名称( 参数1: 类型, 参数2: 类型... ): 返回值类型;

function add(x: number, y: number): number {
  	return x + y;
}

記事は毎週継続的に更新されます。WeChatで「フロントエンドコレクション 」を検索し て初めて読むと、[ビデオ] [ブック]に返信して、200Gのビデオ資料と30のPDFブック資料を受け取ることができます。

​

おすすめ

転載: blog.csdn.net/qq_38128179/article/details/115062723
おすすめ
ランキング
ワンポイントほぼ3正確なサイズの見積もり46128582
jqueryのIMGタグを削除
Brain-like sensors: Dynamic Vision Sensor and Dynamic Audio Sensor
フラグメントのAndroidドットスライドスイッチページは以下に示すと
C# 抽象クラス (抽象)
論文研究：堅牢なPDFマルウェア分類子のトレーニングについて
入力タグ付きのファイルをアップロードします（1つの記事を実行できます）
フラッター（9） - 引き出しスライドメニューとパッケージ管理
キーボードフック取得で
話し言葉412毎日20の英単語
アーカイブ
もっと
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)
2024-07-27(0)
2024-07-26(0)
2024-07-25(0)
2024-07-24(0)
2024-07-23(0)
2024-07-22(0)
2024-07-21(0)

コードワールド

© 2018 codetd.com