Type Script基礎入門-基礎タイプ

8472 ワード

転載先
Type Script基礎入門-基礎タイプ
プロジェクト実践倉庫
https://github.com/durban89/typescript_demo.git
tag: 1.0.2


後続の学習プレゼンテーションを保証するためにts-nodeをインストールする必要があります.これにより、後続の各操作が出力の結果を直接実行できます.
npm install -D ts-node

あとは自分で練習するときに使うことができます
npx ts-node src/learn_basic_types.ts
npx ts-node     

ベース・タイプの概要
Typeスクリプトは、JavaScriptとほぼ同じデータ型をサポートします.数値、文字列、構造体、ブール値などが含まれます.また、実用的な列挙タイプも提供され、便利に使用できます.
ブール値
最も基本的なデータ型は簡単なtrue/false値であり、JavaScriptやType Scriptではboolean(他の言語でも同様)と呼ばれています.
//    
let isDone: boolean = false;
console.log('isDone = ', isDone);

運転後の結果は以下の通り
isDone =  false

数値
JavaScriptと同様に、Type Scriptのすべての数字は浮動小数点数です.これらの浮動小数点数のタイプはnumberです.TypeScriptは、10進数と16進数の字面量に加えて、ECMAScript 2015に導入された2進数と8進数の字面量にも対応しています.
//   
let number1: number = 6;
let number2: number = 0xf00d;
let number3: number = 0b1010;
let number4: number = 0o744;

console.log('number1 = ', number1);
console.log('number2 = ', number2);
console.log('number3 = ', number3);
console.log('number4 = ', number4);

運転後の結果は以下の通り
number1 =  6
number2 =  61453
number3 =  10
number4 =  484

文字列
JavaScriptプログラムのもう一つの基本的な操作は、Webページまたはサーバ側のテキストデータを処理することです.他の言語と同様にstringを使用してテキストデータ型を表します.JavaScriptと同様に、二重引用符(")または一重引用符(')を使用して文字列を表すことができます.
let title: string = "gowhich"
console.log('title = ', title);

運転後の結果は以下の通り
title =  gowhich

また、複数行のテキストと埋め込み式を定義するテンプレート文字列も使用できます.この文字列は逆引用符で囲まれ(`)、式を${expr}として埋め込む
let firstName: string = "Durban";
let age: number = 42
let sentence: string = `==
Hello,    ,  ${firstName}

     ${age}   。
`;
console.log(sentence);

運転後の結果は以下の通り
==
Hello,    ,  Durban

     42   。

はいれつ
TypeScriptはJavaScriptのように配列要素を操作できます.配列を定義するには2つの方法があります.1つ目は、要素タイプの後に[]を付けることで、このタイプの要素からなる配列を表すことができます.
let list1: number[] = [1,2,3];

運転後の結果は以下の通り
[ 1, 2, 3 ]

2つ目の方法は配列汎用を使用し、Array:
let list2: Array = [1,2,3];

運転後の結果は以下の通り
[ 1, 2, 3 ]

タプルTuple
メタグループタイプを使用すると、既知の要素の数とタイプの配列を表すことができます.各要素のタイプは同じである必要はありません.たとえば、stringタイプとnumberタイプのペアの値を定義できます.
//       
let x: [string, number]
//       x
x = ["durban", 42]
//       
// x = [42, "durban"]
console.log('x = ', x);

運転後の結果は以下の通り
x =  [ 'durban', 42 ]

既知のインデックスの要素にアクセスすると、正しいタイプが得られます.
console.log(x[0].substr(1));
// console.log(x[1].substr(1)); // number   substr

境界を越えた要素にアクセスすると、次のように結合タイプが使用されます.
x[3] = "world"
console.log(x[5])
console.log('x = ', x);
// x[6] = true // Error,     (string | number)  

運転後の結果は以下の通りです.
undefined
x =  [ 'durban', 42, <1 empty item>, 'world' ]

コンビネーションタイプは高度なテーマで、後で紹介します.
列挙
Enumタイプは、JavaScript標準データ型の補完です.C#などの他の言語のように、列挙タイプを使用すると、数値のセットに友好的な名前を付けることができます.
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
console.log('c = ', c)

運転後の結果は以下の通り
c =  1

デフォルトでは、0から要素番号が付けられます.メンバーの数値を手動で指定することもできます.たとえば、上記の例を1から番号付けに変更します.
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
console.log('c = ', c)

運転後の結果は以下の通り
c =  2

または、すべて手動で値を割り当てます.
enum Color {Red = 1, Green = 4, Blue = 8}
let c: Color = Color.Green;
console.log('c = ', c)

運転後の結果は以下の通り
c =  4

列挙タイプが提供する便利さの一つは、列挙に値する名前であることです.たとえば、数値が2であることは知っていますが、Colorにマッピングされている名前が分からない場合は、対応する名前を検索できます.
enum Color {Red = 1, Green = 4, Blue = 8}
let c: string = Color[4];
console.log('c = ', c)

運転後の結果は以下の通り
c =  Green

Any
プログラミングフェーズでタイプが不明な変数にタイプを指定したい場合があります.これらの値は、ユーザー入力やサードパーティコードライブラリなどの動的なコンテンツから生じる可能性があります.この場合、タイプインスペクタがこれらの値をチェックするのではなく、コンパイルフェーズのチェックを直接通過させることを望んでいません.anyタイプを使用して、これらの変数をマークできます.
let notSure: any = 4
notSure = false
notSure = "A string"

既存のコードを書き換える場合、anyタイプは非常に有用であり、コンパイル時にタイプチェックを選択的に含むか削除することができます.他の言語のようにObjectは似たような役割を果たしていると思います.しかし、Objectタイプの変数は、任意の値を割り当てることを許可するだけです.しかし、実際にこれらの方法があっても、任意の方法を呼び出すことはできません.
let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

一部のデータのタイプしか知らない場合はanyタイプも役に立ちます.たとえば、異なるタイプのデータを含む配列があります.
let list: any[] = [1, true, 'durban'];
console.log(list[1])
list[1] = 100;
console.log(list[1])

運転後の結果は以下の通り
true
100

Void
ある程度、voidタイプはanyタイプとは逆のようで、タイプがないことを示しています.関数に戻り値がない場合、通常、戻り値のタイプはvoidです.
function noReturn(params:string): void {
    alert("HaHa");
}

voidタイプの変数を宣言するのはあまり役に立ちません.undefinedとnullしか与えられないからです.
let unusable: void = undefined;
console.log('unusable = ', unusable);

運転後の結果は以下の通り
unusable =  undefined

NullとUndefind
Type Scriptではundefinedとnullの両方に独自のタイプがあり、それぞれundefinedとnullと呼ばれています.voidと似ていますが、それら自体のタイプはあまり役に立ちません.
let u: undefined = undefined
let n: null = null
n = undefined
u = null

デフォルトではnullとundefinedはすべてのタイプのサブタイプです.つまりnullとundefinedをnumberタイプの変数に割り当てることができます.
ただし、strictNullChecksタグを指定すると、nullとundefinedはvoidとそれぞれに値を割り当てるしかありません.これは多くのよくある問題を避けることができる.stringまたはnullまたはundefinedを入力したい場合は、コンビネーションタイプstring|null|undefinedを使用することができます.
注意:strictNullChecksをできるだけ使用することを奨励しますが、このマニュアルではこのマークが閉じていると仮定しています.
Never
neverタイプは、存在しない値のタイプを表します.たとえば、neverタイプは、常に例外を投げ出すか、戻り値がまったくない関数式または矢印関数式の戻り値タイプです.変数はneverタイプでもあり、真のタイプ保護に拘束されない場合です.
Neverタイプは任意のタイプのサブタイプであり、任意のタイプに値を割り当てることもできます.ただし、neverのサブタイプまたはneverに値を割り当てることができるタイプはありません(never自体を除く).anyでもneverに値を割り当てることはできません.以下に、neverタイプを返す関数を示します.
//   never              
function error(message:string): never {
    throw new Error(message);
}

//          never
function Failed() {
    return error("Fauled");
}
//   never              
function infiniteLoop(): never {
    while (true) {

    }
}

Object
objectは、number,string,boolean,symbol,null,or undefined以外のタイプを表すObjectタイプを用いる.create等APIs.次のコード
declare function create(o: object | null) :void ;
create({ prop: 0 })
create(null)
// create(42) //    
// create("string") //    
// create(false) //    
// create(undefined) //    

タイプブレークスルー
TypeScriptよりも値の詳細を知っている場合があります.通常、エンティティが既存のタイプよりも正確なタイプを持っていることをよく知っています.
タイプ断言では、「私を信じて、自分が何をしているか知っています」とコンパイラに伝えることができます.タイプ断言は他の言語のタイプ変換のようなものですが、特別なデータチェックや解構は行われません.実行時の影響はなく、コンパイルフェーズでのみ機能します.Type Scriptはあなた、プログラマーを仮定して、すでに必要な検査を行いました.タイプ断言には2つの形式があります.1つは「かっこ」構文です.
let someValue: any = "this is a string";

let strLength: number = (someValue).length;

もう1つはas構文です.
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

二つの形式は等価である.どちらを使うかは個人の好みによるものが多い.しかし,TypeScriptでJSXを使用する場合,as文法断言のみが許される.
letについて
ご存知のJavaScriptキーワードvarの代わりにletキーワードを使用していることに気づいたかもしれません.letキーワードはJavaScriptの新しい概念であり、Type Scriptが実現した.後で詳しく紹介しますが、よくある問題はletを使うことで解決できることが多いので、varの代わりにできるだけletを使うようにしましょう.
ここでは、コンパイルが必要なファイルを処理する論理に注意してください.
"include": [
    "src/**/*.ts"
],

あいまいなマッチングを行い、一致するファイルをコンパイルできます.
"files": [
    "src/main.ts"
],

特定のファイルマッチングを行い、出力するディレクトリを指定してcompilerOptions構成に追加します.
"outDir": "./dist",

この例では、実践プロジェクトの終了アドレスを共有します.
https://github.com/durban89/typescript_demo.git
tag: 1.0.3