ts の基礎となるタイプ

公式サイトによると覚えやすいとのこと

番号 - 番号

let a: number = 0;
a = 5;

ブール値 - ブール値

let result: boolean = true;

文字列 - 文字列

let name: string = "";
name = "小明"

配列 - 数値[] / 文字列[]

4.1 数値要素で構成される配列を定義します。各要素の型は数値でなければなりません

let list: number[] = []; //数组中只能包含数字
list = [1,2,3] //Ok
list = ['a', 'b', 1] //Error: Type 'string' is not assignable to type 'number'

4.2 文字列要素で構成される配列を定義します。各要素の型は文字列である必要があります。

 let data: string[] = []; //数组中只能是字符串
 data = ['a','b','c'] //Ok
 data = [1,2,3] //Error: Type 'number' is not assignable to type 'string'

4.3 任意の要素で構成される配列を定義します。各要素の型は同じである必要はなく、任意の型を使用できます。

let arr: any[] = [];
arr = ['a',1,'c'] //Ok

タプルは、
既知の数と型の要素を持つ配列を表し、各要素の型が同じである必要はありません。

  let result: [number, string]; //数组中的第一项只能是数字，第二项只能是字符串
  result =  [1, 'red'] //Ok
  result = [1,2] //Error: Type 'number' is not assignable to type 'string'

列挙 - 列挙

enum Color {red, green}
let color: Color = Color[0];// red
let colorIndex = Color[red];//0

応用例は独自の記述方法を参照

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
 switch ( status ) {
   case 0:
     return <Tag color="#108ee9">未提交</Tag>;
   case 1:
     return <Tag color="#2db7f5">待复核</Tag>;
   case 2:
     return <Tag color="#87d068">已通过</Tag>;
   case 3:
   default:
     return <Tag color="#f50">已驳回</Tag>;
 }
}

次のように列挙した後:

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

enum Status {total = -1, unSubmit = 0, waitCheck = 1, passed = 2, rejected = 3}

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
 switch ( status ) {
   case Status.unSubmit:
     return <Tag color="#108ee9">未提交</Tag>;
   case Status.waitCheck:
     return <Tag color="#2db7f5">待复核</Tag>;
   case Status.passed:
     return <Tag color="#87d068">已通过</Tag>;
   case Status.rejected:
   default:
     return <Tag color="#f50">已驳回</Tag>;
 }
}

any は任意のタイプを意味します

let list: any = []

変数のメソッドを呼び出すときは、any 型を使用します。オブジェクト型では、次のように代入のみが許可されます。
エラーを報告するError: Property 'toFixed' doesn't exist on type 'Object'か、Don't use `Object` as a type. The `Object` type actually meansオブジェクト型を間違って使用してください。メソッドを呼び出したい場合は、any 型を使用する必要があります。オブジェクトを任意に変更します。

let notSure: any = 4;
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'.

void は型がないことを意味します。関数が値を返さない場合、その戻り値の型は void であることがわかります。

function test(name: string){
  console.log('-----')
}

上記のコードは、関数の型が void であることを宣言していません。VS コードをチェックすると、警告プロンプトが表示されます: をMissing return type on function次のように変更するだけです。

 function test(name: string): void{
  console.log('-----')
}

null および未定義

let value: null = null

ただし、--strictNullChecks フラグを指定すると、null と unknown は void とそのそれぞれにのみ割り当てることができます。これにより、多くの一般的な問題が回避されます。おそらく、文字列、null、または未定義を渡したい場合は、ユニオン型 string|null|unknown を使用できます。繰り返しになりますが、共用体型については後ほど説明します。

Never は決して存在しない値の型を表します
公式 Web サイトの説明: Never 型は、常に例外をスローするか戻り値をまったく持たない関数式またはアロー関数式の戻り値の型です。変数は次の場合もあります。 true にならないタイプガードによってバインドされている場合は、type Never を使用します。
簡単に言うと、次の例のように、例外をスローし戻り値を持たない関数は Never 型として定義されます。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

オブジェクト - 非プリミティブ型、つまり数値、文字列、ブール値、シンボル、null、または未定義以外の型を表します。
注意：Object类型的变量只是允许你给它赋任意值，却不能够在它上面调用任意的方法，即便它真的有这些方法，不然会报错
タイプアサーション - [as 構文 | <> 構文]

12.1 「山括弧」の構文:

let someValue: any = "this is a string"
let strLength: number = (<string>someValue).length

12.2 の構文:

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length

vue の ts を使用した型アサーションは、構文としてのみサポートされます。

おすすめ