dkrkのブログ

npx create-react-app ts-sample --typescript

yarn eject

let foo: string = 'bar'; // fooには文字列のみ入る

let foo: any = 'bar'; // fooにはなんでも入る

let foo: string | undefined = 'bar'; // fooには文字列かundefinedが入る

let name: string | null = null;
name.length; // 「nullの可能性があります」と出てエラー

let comment: string | undefined;
comment.length; // 「undefinedの可能性があります」と出てエラー

let foo: 'bar' | 'baz' = 'bar'; // fooには'bar'か'baz'が入る

// addOneには、数値しか渡せない
// 返り値はないので、voidにする
function addOne(num: number): void {
  console.log(num + 1);
}

let foo: number = 3;
addOne(foo); // 4

const addOne = (num: number): void => {
  console.log(num + 1);
};

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

const taro: {
  name: string;
  age: number;
} = {
  name: '太郎', // Personのnameなので、stringが入る
  age: 18, // Personのageなので、numberが入る
};

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

const taro: Person = {
  name: '太郎', // Personのnameなので、stringが入る
  age: 18, // Personのageなので、numberが入る
};

interface Person {
  name: string;
  age?: number; // 省略可能
}

const taro: Person = {
  name: '太郎',
  // ageはなくてもいい
};

let foo = 'bar'; // fooはstringになる

// addOneには、数値しか渡せない
function addOne(num: number): void {
  console.log(num + 1);
}

const foo = 'bar'; // barは型推論でstringになる
addOne(foo); // addOneにstringは渡せないのでエラー

export const ADD = 'ADD' // ADDは、'ADD'しか入らない
export const REMOVE = 'REMOVE' // REMOVEは、'REMOVE'しか入らない

type Name = string; // Nameはstring

const hifumiName: Name = 123; // 123は数値なのでエラー

// Profileには、nameとageが入る
interface Profile {
  name: string;
  age: number;
}

// SecretProfileには、weightが入る
interface SecretProfile {
  weight: number;
}

// AllProfile型には、ProfileとSecretProfileのプロパティが入る
type AllProfile = Profile & SecretProfile;

const taroProfile: Profile = {
  name: '太郎',
  age: 18,
};

const jiroProfile: AllProfile = {
  name: '二郎',
  age: 51,
  weight: 68, // SecretProfileのプロパティも必要
};

// 引数の値をそのまま返す
function returnArg(arg: string): string {
  return arg;
}

returnArg('文字列'); // '文字列'

// <T>がジェネリクス
// argで任意の型を受け取る、返り値は型推論
function returnArg<T>(arg: T) {
  return arg;
}

returnArg('文字列'); // '文字列'
returnArg(123); // 123

// propsの型を定義
type FooProps = {
  id: string;
}

// propsにFooPropsの型を渡す
const Foo: React.FunctionComponent<FooProps> = props => (
  <>
    <h2 id={props.id}>{props.children}</h2>
  </>
);

enum Foo {
  HOGE,
  FUGA,
  PIYO
}

console.log(Foo.FUGA); // 1

// ActionTypesというenumでADD、REMOVEを定義
export enum ActionTypes {
  ADD = 'ADD',
  REMOVE = 'REMOVE',
}

// interfaceでActionを定義
export interface Action {
  type: ActionTypes;
  num: number;
}

// add
export function add(num: number): Action {
  return ({
    type: ActionTypes.ADD,
    num
  })
}

// remove
export function remove(num: number): Action {
  return ({
    type: ActionTypes.REMOVE,
    num
  })
}

const enum Foo {
  HOGE,
  FUGA,
  PIYO
}

let fuga = Foo.fuga;

var fuga = 1 /* FUGA */;

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

interface Product {
  name: string;
  price: number;
}

const taro = {}
taro.name = '太郎' // taroは{}なのでnameにはアクセスできない

const taro = {} as Person // taroにPerson型を上書き
taro.name = '太郎' // taroはPerson型の持つnameにアクセスできる

const taro = <Person>{} // taroにPerson型を上書き
taro.name = '太郎' // taroはPerson型の持つnameにアクセスできる

const taro = '太郎' as Person // エラー

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

interface Product {
  name: string;
  price: number;
}

const taroPerson: Person = {
  name: '太郎',
  age: 18,
}

const taroProduct: Product = {
  name: '太郎',
  price: 1980,
}

// taro.ageの有無で判定
function getTaro(taro: Person | Product): string {
  // taro.ageはProductにないのでエラー
  if(taro.age) {
    return `太郎は${taro.age}歳で人`;
  } else {
    // taro.priceはPersonにないのでエラー
    return `太郎は${taro.price}円の商品`;
  }
}

// taro.ageの有無で判定
function getTaro(taro: Person | Product): string {
  // ProuctもPerson型として扱う
  if((taro as Person).age) {
    return `太郎は${(taro as Person).age}歳で人`;
  } else {
    return `太郎は${(taro as Product).price}円の商品`;
  }
}

function isTaroPerson(taro: Person | Product): taro is Person {
  return (taro as Person).age !== undefined;
}

function getTaro(taro: Person | Product): string {
  // 引数がPersonかProductかチェック
  if(isTaroPerson(taro)) {
    return `太郎は${taro.age}歳で人`;
  } else {
    return `太郎は${taro.price}円の商品`;
  }
}