TypeScript x React

【TypeScript】 Assignment Compatibility。Sは右側(source)、Tは左側(target)

【TypeScript】 Assignment Compatibility。Sは右側(source)、Tは左側(target)

TypeScript x React TypeScript x React[/caption]
playground


// [仕様](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#3.11.4)

type A = {
    name: string
}

type B = {
    age: number
}

type AB = A & B

const obj:AB = {
    name: "morita",
    age: 200
}

const aObj = {
    name: "morita"
}
const person = (obj: AB) => {
    return obj.name    
}

const result = person(obj)
const result2 = person(aObj)

///////////////////////////////////////////////////////////////

const y: Y = { x: "x", y: "y", z: "z" }
type Y = {x: string, y: string, z: string}
type X = {x: string, y: string}
let x: X = y
x

///////////////////////////////////////////////////////////////

// [仕様](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#3.11.4)
// Sは右側(source)、Tは左側(target)
// no excess 一回代入した上で(オブジェクトリテラルでない)
// SがTとイコールで、一回代入した上で下記なら互換性がある... 

// 例えばこれ
// S and T are identical types.
// は
// SとTの型が同じなら ok

// S is a string literal type and T is the primitive type String.

let target10 = "target" // String
let source10: "source" = "source" // string literal

target10 = source10 // ok
target10 // string

/// 例
/// 下の例題は仕様書通り、右がSource、左がTargetになっていることに注意

let target = "hi"
let source: "hi" = "hi"
target = source // ok。target is SuperType of source

///////////////////////////////////////////////////////////////

enum Color {
    Red,
    Blue
}
let targetEnum = Color.Blue
let sourceB = 999

targetEnum = sourceB // ok。targetEnum is SuperType of source

// 逆も入れれる。number型にColor型も入れれる。Enum型とnumber型は互換性がある

enum Color2{
    Green
}
let targetEnum3 = Color2.Green
targetEnum = targetEnum3 // enum同士は無理

///////////////////////////////////////////////////////////////
//関数の引数の場合は

let targetFun = (a: string) => { }
let sourceFun = (a: string) => { }

targetFun = sourceFun

/// sourceFuncの引数が多い場合

let targetFun2 = (a: string) => { }
let sourceFun2 = (a: string, b: string) => { }

targetFun2 = sourceFun2 // error 
//2つの引数を取る関数が代入されている。 関数の場合の引数はsourceの方は少なくなければならない

targetFun2("fafa")

/// sourceFuncの引数が少ない場合

let targetFuntest2 = (a: string, b: string) => { }
let sourceFuntest2 = (a: string) => { }

targetFuntest2 = sourceFuntest2 // ok 

///////////////////////////////////////////////////////////////
//関数の戻り値の場合は?
//sourceの方がプロパティが多いオブジェクト、targetが少ないオブジェクト

let targetFun3 = (a: string) => { return {name: "fafa", age: 100, live: "tokyo"} } // sourceより少なくなければならない
let sourceFun3 = (a: string) => { return {name: "fafa", age: 900}} // targetより少ない

targetFun3 = sourceFun3 // error 2つの引数を取る関数が代入されている。 関数の場合の引数はsourceはSuperTypeでなければならない
targetFun3("fafa")

let targetFun4 = (a: string) => { return {name: "fafa", age: 100, } } // sourceより少なくなければならない
let sourceFun4 = (a: string) => { return { name: "fafa", age: 900, live: "tokyo" } } // targetより少ない

targetFun4 = sourceFun4 // ok
targetFun3("fafa")

///////////////////////////////////////////////////////////////
// classの場合は?

// ok
class AClass {
    name: string = ""
}

class BClass {
    name: string = ""
}

let sourceClass = new AClass()
let targetClass = new BClass()

targetClass = sourceClass

///error

class AClassTest {
    private name: string = ""
}

class BClassTest {
    name: string = ""
}

let sourceClassTest = new AClassTest()
let targetClassTest   = new BClassTest()

targetClassTest = sourceClassTest // private、protectedをつけたものがtargeにあるとエラー。それらは同じインスタンスの代入しか認めない

// ok

class AClassTest2 {
    private name: string = ""
}

class BClassTest2 {
    name: string = ""
}

let sourceClassTest2 = new AClassTest2()
let targetClassTest2 = new AClassTest2() // 同じインスタンスならok
targetClassTest2 = sourceClassTest2

「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

サイトTOP
私は何者か
29歳よしもと芸人がWebデザイナー未経験で学校に通い5年後フリーランスのフロントエンドエンジニアになるためにやった9つのこと

フロント記事
フロントエンドエンジニア
フロントエンド記事(タグ)
TypeScript
TypeScript練習問題集(外部ページ)
GraphQL「Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)」
JavaScript練習問題
recomposeと仲良くなりたい
機動戦士FlowType
styled-componentsの使い方
初めてReactNativeWebを触ってみて
フロントエンドエンジニア豚汁の作り方
いちごタルトの作り方
SCSS問題集
Ramda.jsシグネチャの読み方
環境変数の話


「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
株式会社TerraceTech

SNS
インド旅 instagram
適当な日常写真 instagram
シュールさーん instagram
シュールさーん LINEスタンプ
もりたけんじTwitter
ネタ帳Twitter
note

FaceBook -kennji.morita-

わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。