2018年11月15日

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];
};
posted by ねこまんま at 15:42 | TypeScript | 更新情報をチェックする

2018年11月04日

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
}
posted by ねこまんま at 15:24 | TypeScript | 更新情報をチェックする

2018年06月30日

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')
posted by ねこまんま at 01:54 | Comment(0) | TypeScript | 更新情報をチェックする

2017年01月09日

TypeScriptの基本

TypeScriptの環境作成方法。続きを読む
タグ:TypeScript
posted by ねこまんま at 16:55 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする

TypeScriptのas

TypeScriptのasオペレーターというのがあってハマった。このググラビリティの低いワードどうかにかして欲しい。続きを読む
タグ:as TypeScript
posted by ねこまんま at 14:56 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする