TypeScript の構造部分型

TypeScript の構造部分型のため以下のようにFooBarBaz型の構造部分であるFooBarに値を代入しても型エラーにならない

type FooBar = {
  foo:string;
  bar:number;
}
 
type FooBarBaz = {
  foo:string;
  bar:number;
  baz:boolean;
}
 
const obj: FooBarBaz = {
  foo:"1",
  bar:1,
  baz:true
}
 
const obj2: FooBar = obj //型エラーにならない

https://numb86-tech.hatenablog.com/entry/2020/02/02/100816

TypeScriptのreadonly修飾子とReadonly型

TypeScriptではプロパティにreadonly修飾子とつけることで再書き込みができないプロパティを定義することができます。

interface Foo {
  readonly prop: string
}
const foo: Foo = {
  prop: `ok`
}
foo.prop = `ng` // Error

Classプロパティも同様でreadonly修飾子をつけたものは変更ができない

class Foo {
  readonly prop = `ok`
  constructor() {
    this.prop = `ng` // ng
  }
}

また、Readonly型も用意されておりReadonly型にキャストすることで変更不可にすることもできる。

type Foo = {
  prop: string
}
type FooReadonly = Readonly<Foo>
const foo: FooReadonly = {
  prop: `ok`
}
foo.prop = `ng` // Error

参考: Readonly · TypeScript Deep Dive

TypeScriptのPartial

Partialを利用すると既存の型から、項目を部分的に共有できる型を作成できます。

ちなみにPartialは部分的という意味

たとえば以下のような型があり

interface Foo {
  a: string
  b: string
  c: string
}

aかbかcを含む型を作りたい場合は以下のように定義しなくてはいけないですが、

interface PartialFoo {
  a?: string
  b?: string
  c?: string
}

Partialを利用すると以下のように定義できます。

type PartialFoo = Partial<Foo>

ちなみにPartialの実態は以下のように定義をされています。

type Partial<T> = {
    [P in keyof T]?: T[P];
};

TypeScriptのPick

TypeScriptのPickを利用すると特定の型から特定の項目を抜き出した型を作成することができます。

export enum Gender {
  man,
  woman,
  etc
}
 
export interface PersonData {
  name: string
  age: number
  gender: Gender
}
 
const personData: PersonData = {
  name: 'yamada tarou',
  age: 12,
  gender: Gender.man
}

PersonDataにはnameとageとgenderという3つのプロパティが存在しますが、以下のようにPickを利用してnameとageの型を作成できます。

export type SimpleData = Pick<PersonData, 'name' | 'age'>
 
export const simpleData: SimpleData = {
  name: 'yamada tarou',
  age: 12
}

export interface CompanyData {
companyName: string
address: string
tell: string
}

型作成時に&でつなげることで複数の型を連結した型を作成することもできます。

export type StaffSimpleData = Pick &
  Pick

export const staffSimpleData: StaffSimpleData = {
  name: 'yamada tarou',
  age: 12,
  companyName: 'toyota',
  address: '名古屋'
}

特定の型を追加して行くことも可能です。

export type StaffData = Pick &
  Pick & {
    staffId: number
  }
 
export const StaffData: StaffData = {
  name: 'yamada tarou',
  age: 12,
  companyName: 'toyota',
  address: '名古屋',
  staffId: 100
}

TypeScriptのジェネリック

TypeScirptのジェネリックは以下のように関数実行時に型を定義すると関数内で型を利用できる。

function sample1<T>(arg: T): T {
  return arg
}
sample1<string>('string')
sample1<number>(1)

型推論が行われるため必ずしも実行時に明示的に型を指定する必要はない

sample1('string')
sample1(1)

関数式の場合は上記のように定義できるけど、関数リテラルの場合か以下のように定義します。

const sample2: { <T>(arg: T): T } = arg => {
  return arg
}
sample2<string>('string')
sample2<number>(1)

interfaceを利用して以下のように定義することもできる

interface MyFuncParam<T> {
  (arg: string): T
}
interface MyFuncResponse {
  type: string
  text: string
}
const sample3: MyFuncParam<MyFuncResponse> = text => {
  return {
    type: 'aaaa',
    text
  }
}
sample3('foo')

TypeScriptの基本

TypeScriptの環境作成方法。続きを読む

TypeScriptのas

TypeScriptのasオペレーターというのがあってハマった。このググラビリティの低いワードどうかにかして欲しい。続きを読む