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

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練習問題集
・【TypeScript】TypeSript中級者になる為に知っておくと良い108個のこと
・JavaScript練習問題
・styled-componentsの使い方
・SCSS問題集
・GraphQL「Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)」
・recomposeと仲良くなりたい
・機動戦士FlowType
・初めてReactNativeWebを触ってみて
・Ramda.jsシグネチャの読み方
・環境変数の話
・いちごタルトの作り方
・フロントエンドエンジニア豚汁の作り方

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

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

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

・FaceBook -kennji.morita-

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

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