2021/04/28
TypeScript /フロントエンド /
Basic type of TypeScript

基本的な型を載せていこうと思います。
型推論が大変優れているので、基本型はエディタがサポートしてくれます。
ですが、自分で書いていかないといけない時もあります。
下の方に載せている合併型や交差型、エイリアスは結構出現頻度高いです。
type-string
const sampleString: string = "TypeScript"
type-number
const sampleNumber: number = 1234
type-boolean
const sampleBlooean: boolean = true
type-Array
const sampleArray: number[] = [1,2,3]
type-Tuple
let x:[string, number]
x = ["TypeScript", 1]
type-any
const sampleAny: any = "TypeScript"
type-unknown
anyに似ていますが、型安全なanyをしてしたい場合に使用します。
値の代入には寛容ですが、値の利用についてはエラーになります。
const sampleUnknown00: string[] = [1,2,3] //error
const sampleUnknown01: any[] = [1,2,3]
const sampleUnknown02: unknown[] = [1,2,3]
sampleUnknown01[0].toFixed(1)<br>sampleUnknown02[0].toFixed(1) //error
type-void
戻り値がない時に利用します。
function samplaeVoid(message: string):void{
console.log(message)
}
samplaeVoid("TypeScript")
type-null/type-undefined
let sampleUndefind = undefined
let sampleNull = null
// --strictNullChecks: true
// 厳密なヌルチェックを有効にします
type-never
発生し得ない値の型
function sampleNever(message: string): never {
throw new Error(message)
}
sampleNever("TypeScript")
type-object
非プリミティブ型を表す {}の時はエラーにならない
let sampleObject01:{}
let sampleObject02: object
sampleObject01 = true
sampleObject01 = 0
sampleObject01 = "TypeScript"
sampleObject02 = false //error
sampleObject02 = 0 //error
sampleObject02 = "TypeScript" //error
type-enum
列挙型
enum sampleEnum {
RED = '#FF0000',
WHITE = '#FFFFFF',
GREEN = '#008000',
BLUE = '#0000FF',
YELLOW = '#FFFF00',
BLACK = '#000000'
}
let green = sampleEnum.GREEN;
console.log({ green });
enum sampleEnum {
YELLOW = '#FFFF00',
GRAY = '#808080'
}
let newColor = sampleEnum.YELLOW
console.log({ newColor });
type-aliases
type sampleAliases01 = string
const fooString:sampleAliases01 = 'TypeScript'
type sampleAliases02 = {
name: string;
age: number;
};
const example1 = {
name: 'TypeScript',
age: 7
};
type Profile2 = typeof example1;
const example2: sampleAliases02 = {
name: 'TypeScript',
age: 7
};
type-assertions
型推論では追いつかない型を手動で示し、右辺に記載する
const name01: any = 'TypeScript';
const sampleAssertions = (name01 as string);
type-union
合併
和を指します。
パイプ(|)で連結
複数の型のうち一つ成立させるような時
let sampleUnion01: number | string;
sampleUnion01 = 7;
sampleUnion01 = "TypeScript";
sampleUnion01 = false; // error
let sampleUnion02: (number | string)[];
sampleUnion02 = [7, "TypeScript"];
sampleUnion02 = [7, "TypeScript", false]; // error
type-intersection
交差
共通しているもの
アンパサンド(&)で連結
type sampleInterSection01 = {
name: string
age: number
}
type sampleInterSection02 = {
gender: string
other: string
}
type sampleInterSection03 = sampleInterSection01 | sampleInterSection02 //union
type sampleInterSection04 = sampleInterSection01 & sampleInterSection02 //intersection
const sampleInterSectionObject01:sampleInterSection03 = {
name: "TypeScript",
age: 7,
gender: "male",
other: "masaru",
}
const sampleInterSectionObject02:sampleInterSection04 = { //error
name: "TypeScript",
age: 7,
gender: "male",
}
Interface
interface ObjectInterface {
name: string;
age: number;
}
let object: ObjectInterface = {
name: 'Ham-san',
age: 43
};
- 合併型や交差型が必要な場合には
type
を使います extend
やimplements
をしたいときはinterface
を使います