TypeScript Basics #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) 
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とtype-intersection

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 vs interface

最近最適解が出てきているようです。
typescript-jpに記載のある内容を以下に記入致します。
typescript-jpの内容です。

合併型や交差型が必要な場合にはtypeを使います
extendやimplementsをしたいときはinterfaceを使います

以上

結構復習できたなと感じました。
TypeScriptいいねww

TypeScript Basics

型