BLOG

Paakのスタッフが得た知見や情報を発信するブログです。
たまに会社の出来事に関する記事もお届けします。

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を使います
  • extendimplementsをしたいときはinterfaceを使います

CONTACT /

webサイトでお困りのことがあれば、お気軽にご相談ください。

お問い合わせはこちら

CONTACT /

Paakについて、案件のご相談、採用についてはお問い合わせフォームからご連絡ください。