個人的Typescriptの型入門① 〜 型の基本

            
            const a: number = 3;

//✘ Type 'number' is not assignable to type 'string'.
const b: string = a;
        

            
            const a: null = null;

//(strictNullChecksがオンの場合)
//✘ Type 'null' is not assignable to type 'string'.
const b: string = a;
        

            
            const a: 'foo' = 'foo';

//✘ Type '"foo"' is not assignable to type '"bar"'.
const b: 'bar' = 'foo';
        

            
            const a: 'foo' = 'foo';
const b: string = a;
        

            
            const a: 3 = 3;
const b: number = a;
        

            
            const a: true = true;
const b: boolean = a;
        

            
            //aは'foo'型(文字列リテラル型)と推論
const a = 'foo';

//✘ Type '"foo"' is not assignable to type '"bar"'.
const b: 'bar' = a;
        

            
            //aはstring型と推論
let a = 'foo';

const b: string = a;
//✘ Type 'string' is not assignable to type '"foo"'.
const c: 'foo' = a;
        

            
            //aは'foo'型
let a: 'foo' = 'foo';

//✘Type '"bar"' is not assignable to type '"foo"'.
a = 'bar';
        

            
            interface MyObj {
    foo: string;
    bar: number;
}

type MyObj = {
    foo: string;
    bar: number;
}
        

            
            interface MyObj {
    foo: string;
    bar: number;
}

const a: MyObj = {
    foo: 'foo',
    bar: 3,
};
        

            
            interface MyObj {
    foo: string;
    bar: number;
}

const a: MyObj = {
    foo: 'foo',
    //✘Type 'string' is not assignable to type 'number'.
    bar: 'BARBARBAR',
};

//✘Property 'bar' is missing in type '{ foo: string; }' but required in type 'MyObj'.
const b: MyObj = {
    foo: 'foo',
};
        

            
            interface MyObj {
    foo: string;
    bar: number;
}

interface MyObj2 {
    foo: string;
}

const a: MyObj = {foo: 'foo', bar: 3};
const b: MyObj2 = a;
        

            
            let obj1: {id: number, name: string};

const obj2 = {id: 1, name: "hoge"};
        

            
            interface MyObj {
    foo: string;
    bar: number;
}

interface MyObj2 {
    foo: string;
}

//✗Object literal may only specify known properties, and 'bar' does not exist in type 'MyObj2'.
const b: MyObj2 = {foo: 'foo', bar: 3};

//あまり意味は無いが以下ならエラーなし
const b: MyObj2 = {foo: 'foo', bar: 3} as MyObj;
        

            
            interface MyObj2 {
    foo: string;
}

function func(obj: MyObj2): void { }

//✗Object literal may only specify known properties, and 'bar' does not exist in type 'MyObj2'.
func({foo: 'foo', bar: 3});

//あまり意味は無いが以下ならエラーなし
func({foo: 'foo', bar: 3} as MyObj2);
        

            
            const foo: number[] = [0, 1, 2, 3];
//もしくは
//const foo: Array<number> = [0, 1, 2, 3];

foo.push(4);
        

            
            function func(arg: string): number {
    return Number(arg);
}

const f: (foo: string)=>number = func;
        

            
            interface MyObj {
    foo: string;
    bar: number;
}

interface MyObj2 {
    foo: string;
}

const a: (obj: MyObj2)=>void = () => {};
const b: (obj: MyObj)=>void = a;
        

            
            interface MyObj {
    foo: string;
    bar: number;
}

interface MyObj2 {
    foo: string;
}

const b: (obj: MyObj)=>void = () => {};

//✗ Type '(obj: MyObj) => void' is not assignable to type '(obj: MyObj2) => void'.
//   Types of parameters 'obj' and 'obj' are incompatible.
//   Property 'bar' is missing in type 'MyObj2' but required in type 'MyObj'.
const a: (obj: MyObj2)=>void = b;
        

            
            const f1: (foo: string)=>void = () => {};
const f2: (foo: string, bar: number)=>void = f1;
        

            
            const f1: (foo: string, bar: number)=>void = ()=>{};

//✗ Type '(foo: string, bar: number) => void' is not assignable to type '(foo: string) => void'.
//   Target signature provides too few arguments. Expected 2 or more, but got 1.
const f2: (foo: string)=>void = f1;
        

            
            const f1: (foo: string)=>void = () => {};

//✗ Expected 1 arguments, but got 2.
f1('foo', 3);
        

            
            const func = (foo: string, ...bar: number[]) => bar;

func('foo');
func('bar', 1, 2, 3);
//✗ Argument of type '"hey"' is not assignable to parameter of type 'number'.
func('baz', 'hey', 2, 3);
        

            
            const a: void = undefined;
        

            
            const a: void = undefined;

//✗ Type 'void' is not assignable to type 'undefined'.
const b: undefined = a;
        

            
            function foo(): void {
    console.log('hello');
}
        

            
            const a: any = 3;
const b: string = a;
        

            
            class Foo {
    method(): void {
    console.log('Hello, world!');
    }
}

const obj: Foo = new Foo();

const obj2: Foo = {
    method: () => {}
};
        

            
            interface MyFoo {
    method: () => void;
}

class Foo {
    method(): void {
    console.log('Hello, world!');
    }
}

const obj: MyFoo = new Foo();
const obj2: Foo = obj;
        

            
            interface User {
    name: string;
}

interface Root extends User {
    isMaster: boolean;
}

//👇Rootは以下と同じ定義

// interface Root {
//     name: string;
//     isMaster: boolean;
// }
        

            
            type A<T> = T;

const str: A<string> = 'moji';
const num: A<number> = 123;
        

            
            interface Foo<S, T> {
    foo: S;
    bar: T;
}

const obj: Foo<number, string> = {
    foo: 3,
    bar: 'hi',
};
        

            
            class Foo<T> {
    constructor(obj: T) {}
}

function func<T>(obj: T): void { }

const obj = new Foo<string>('foo');

func<number>(3);
        

            
            function func<T>(obj: T): void {}

const f: <T>(obj: T)=>void = func;
        

            
            function getId<T>(value: T): T {
    return value;
}

const value = getId(3);

const num: number = value;
const three: 3 = value;

//✘Type '3' is not assignable to type 'string'.
const str: string = value;
        

            
            function f<T>(arg: T): string {
    //✗ Property 'name' does not exist on type 'T'.
    return arg.name;
}
        

            
            interface User {
    name: string;
    age: number;
};

function f<T extends User>(arg: T): string {
    return arg.name;
}

f({ name: 'aaa', age: 123 });

//✗ Argument of type '{ age: number; }' is not assignable to parameter of type 'User'.
//   Property 'name' is missing in type '{ age: number; }' but required in type 'User'.
f({ age: 123 });
        

            
            const foo: [string, number] = ['foo', 5];

const str: string = foo[0];

function makePair(x: string, y: number): [string, number] {
    return [x, y];
}
        

            
            const tuple: [string, number] = ['foo', 3];

tuple.pop();
tuple.push('Hey!');

const num: number = tuple[1];

//"Hey!"
console.log(num);
        

            
            const unit: [] = [];
        

            
            type NumAndStrings = [number, ...string[]];

const a1: NumAndStrings = [3, 'foo', 'bar'];
const a2: NumAndStrings = [5];
//✘ Type 'string' is not assignable to type 'number'.
const a3: NumAndStrings = ['foo', 'bar'];
        

            
            type StrsAndNumber = [...string[], number];

const b1: StrsAndNumber = ['foo', 'bar', 'baz', 0];
const b2: StrsAndNumber = [123];
// ✘ Type '[string, string]' is not assignable to type 'StrsAndNumber'.
//    Type at position 1 in source is not compatible with type at position 1 in target.
//    Type 'string' is not assignable to type 'number'.
const b3: StrsAndNumber = ['foo', 'bar'];
        

            
            //✗ A rest element cannot follow another rest element.
type StrsAndNumber = [...string[], ...number[]];
        

            
            type T = [string, number?];

const t1: T = ['foo'];
const t2: T = ['foo', 3];
        

            
            //✗ A required element cannot follow an optional element.
type T = [string?, number];
        

            
            type Args = [string, number, boolean];

const func = (...args: Args) => args[1];

//vはnumber型
const v = func('foo', 3, true);
        

            
            type Args = [string, ...number[]];

const func = (f: string, ...args: Args) => args[0];

const v1 = func('foo', 'bar');
const v2 = func('foo', 'bar', 1, 2, 3);
        

            
            const func = (...args: string[]) => args[0];

const strings: string[] = ['foo', 'bar', 'baz'];

func(...strings);
        

            
            const func = (str: string, num: number, b: boolean) => args[0] + args[1];

const args: [string, number, boolean] = ['foo', 3, false];

console.log(func(...args));
        

            
            function bind<T, U extends any[], R>(
    func: (arg1: T, ...rest: U)=>R,
    value: T,
): ((...args: U) => R) {
    return (...args: U) => func(value, ...args);
}

const add = (x: number, y: number) => x + y;

const add1 = bind(add, 1);

console.log(add1(5)); // 6

//✗ Argument of type '"foo"' is not assignable to parameter of type 'number'.
add1('foo');
        

            
            let value: string | number = 'foo';
value = 100;
value = 'bar';

//✘ Type 'true' is not assignable to type 'string | number'.
value = true;
        

            
            interface Hoge {
    foo: string;
    bar: number;
}

interface Piyo {
    foo: number;
    baz: boolean;
}

type HogePiyo = Hoge | Piyo;

const obj: HogePiyo = {
    foo: 'hello',
    bar: 0,
};
        

            
            interface Hoge {
    foo: string;
    bar: number;
}

interface Piyo {
    foo: number;
    baz: boolean;
}

function useHogePiyo(obj: Hoge | Piyo): void {
    // objはHoge | Piyo型
    if ('bar' in obj) {
        //barプロパティがあるならHoge型
        console.log('Hoge', obj.bar);
    } else {
        //barプロパティがないならPiyo型
        console.log('Piyo', obj.baz);
    }
}
        

            
            interface Hoge {
    foo: string;
    bar: number;
}
interface Piyo {
    foo: number;
    baz: boolean;
}

function useHogePiyo(obj: Hoge | Piyo): void {
    //objはHoge | Piyo型
    if ('bar' in obj) {
        //barプロパティがある --> objはHoge型
        console.log('Hoge', obj.bar);
    } else {
        //barプロパティがない --> objはPiyo型
        console.log('Piyo', obj.baz);
    }
}

const obj: Hoge | Piyo = {
    foo: 123,
    bar: 'bar',
    baz: true,
};

useHogePiyo(obj);
        

            
            let foo = 'str';

//FooTypeはstring
type FooType = typeof foo;

const str: FooType = 'abcdef';
        

            
            function func(value: string | number): number {
    if ('string' === typeof value) {
        // valueはstring型なのでlengthプロパティを見ることができる
        return value.length;
    } else {
        // valueはnumber型
        return value;
    }
}
        

            
            function func(value: string | null): number {
    if (value != null) {
        //valueはstring型に絞り込まれる
        return value.length;
    } else {
        return 0;
    }
}
        

            
            function func(value: string | null): number {
    return value != null && value.length || 0;
}
        

            
            interface Some<T> {
    type: 'Some';
    value: T;
}
interface None {
    type: 'None';
}
type Option<T> = Some<T> | None;

function map<T, U>(obj: Option<T>, f: (obj: T)=> U): Option<U> {
    if (obj.type === 'Some') {
        //objはSome<T>型
        return {
            type: 'Some',
            value: f(obj.value),
        };
    } else {
        //objはNone型
        return {
            type: 'None',
        };
    }
}
        

            
            interface Some<T> {
    type: 'Some';
    value: T;
}
interface None {
    type: 'None';
}
type Option<T> = Some<T> | None;

function map<T, U>(obj: Option<T>, f: (obj: T)=> U): Option<U> {
    switch (obj.type) {
    case 'Some':
        return {
            type: 'Some',
            value: f(obj.value),
        };
    case 'None':
        return {
            type: 'None',
        };
    }
}
        

            
            interface Hoge {
    foo: string;
    bar: number;
}

interface Piyo {
    foo: number;
    baz: boolean;
}

type HogePiyo = Hoge | Piyo;

function getFoo(obj: HogePiyo): string | number {
    //obj.fooはstring | number型
    return obj.foo;
}
        

            
            const arr: string[] | number[] = [];

    //string[] | number[]型の配列の要素はstring | number型
    const elm = arr[0];
        

            
            //✘ Type '0' is not assignable to type 'never'.
const n: never = 0;
        

            
            //never型の値を作る方法が無いのでdeclareで無理やり宣言
declare const n: never;

const foo: string = n;
        

            
            interface Some<T> {
    type: 'Some';
    value: T;
}
interface None {
    type: 'None';
}
type Option<T> = Some<T> | None;

function map<T, U>(obj: Option<T>, f: (obj: T)=> U): Option<U> {
    switch (obj.type) {
    case 'Some':
        return {
            type: 'Some',
            value: f(obj.value),
        };
    case 'None':
        return {
            type: 'None',
        };
    default:
        //objはnever型
        return obj;
    }
}
        

            
            function func(): never {
    throw new Error('Hi');
}

const result: never = func();
        

            
            interface Hoge {
    foo: string;
    bar: number;
}

interface Piyo {
    foo: string;
    baz: boolean;
}

const obj: Hoge & Piyo = {
    foo: 'foo',
    bar: 3,
    baz: true,
};
        

            
            interface Hoge {
    type: 'hoge';
    foo: string;
}
interface Piyo {
    type: 'piyo';
    bar: number;
}
interface Fuga {
    baz: boolean;
}

type Obj = (Hoge | Piyo) & Fuga;

function func(obj: Obj) {
    //objはFuga型でもありbazを参照可
    console.log(obj.baz);
    if (obj.type === 'hoge') {
        //objはHoge & Fuga型
        console.log(obj.foo);
    } else {
        // objはPiyo & Fuga型
        console.log(obj.bar);
    }
}
        

            
            type Func = (arg: number) => number;
interface MyObj {
    prop: string;
}

const obj : Func | MyObj = { prop: '' };

//✘ Cannot invoke an expression whose type lacks a call signature.
//    Type 'MyObj' has no compatible call signatures.
obj(123);
        

            
            type StrFunc = (arg: string) => string;
type NumFunc = (arg: number) => string;

declare const obj : StrFunc | NumFunc;
//✘ Argument of type '123' is not assignable to parameter of type 'string & number'.
//    Type '123' is not assignable to type 'string'.
obj(123);
        

            
            interface Hoge {
    foo: string;
    bar: number;
}

interface Piyo {
    foo: string;
    baz: boolean;
}

type HogeFunc = (arg: Hoge) => number;
type PiyoFunc = (arg: Piyo) => boolean;

declare const func: HogeFunc | PiyoFunc;

//resは number | boolean 型
const res = func({
    foo: 'foo',
    bar: 123,
    baz: false,
});
        

            
            const arr: string[] | number[] = [];

//✘ Parameter 'x' implicitly has an 'any' type.
arr.forEach(x => console.log(x));
//✘ Cannot invoke an expression whose type lacks a call signature.
const arr2 = arr.map(x => x);
        

            
            //✘ Argument of type '3' is not assignable to parameter of type 'object | null'.
Object.create(3);
        

            
            const obj = { foo: 'foo' };
const obj2: {} = obj;
        

            
            const o: {} = 3;
        

            
            interface Length {
    length: number;
}

const o: Length = 'foobar';
        

            
            interface Options {
    foo?: string;
    bar?: number;
}

const obj1 = { hoge: 3 };

//✘ Type '{ hoge: number; }' has no properties in common with type 'Options'
const obj2: Options = obj1;

//✘ Type '5' has no properties in common with type 'Options'.
const obj3: Options = 5;
        

            
            const u1: unknown = 3;
const u2: unknown = null;
const u3: unknown = (foo: string)=> true;
        

            
            const u: unknown = 3;
//✘ Object is of type 'unknown'.
const sum = u + 5;
//✘ Object is of type 'unknown'.
const p = u.prop;
        

            
            const u: unknown = 3;

if (typeof u === 'number') {
    // この中ではuはnumber型
    const foo = u + 5;
}
        

            
            const u: unknown = 3;

class MyClass {
    public prop: number = 10;
}

if (u instanceof MyClass) {
    //uはMyClass型
    u.prop;
}
        

            
            const func: ()=>number = () => 123;

const f: ()=>void = func;
        

            
            const func: ()=>number = () => 123;

const f: ()=>void = func;

const value: void = f();

//123
console.log(value);