【TypeScript】型アノテーションの使い方

Copy
//string
let moji:string = '文字列'

//数値
let kazu:number = 111

//boolean
let bool:boolean = true

Copy
//リテラル型_string
let retStr:"takeshi" = 'takeshi'//ok
retStr:"takeshi" = 'yoshio'//error

//リテラル型_number
let retNum:0 = 0//ok
retNum:0 = 1//error

//リテラル型_boolean
let retBool:false = false//ok
retBool:false = true//error

Copy
//ステータス管理
let status:'開始'|'処理中'|'終了'　= '開始'
status = '処理中'
status = '終了'

Copy
const func:(引数の型アノテーション)=>戻り値の型アノテーション　= 関数

Copy
//関数の型アノテーション
//戻り値なし
const func:(val:string)=> void = (foo)=>{
  console.log(foo);
}

func("hoge")

// 実行結果
// hoge

//戻り値あり
const func2:(num1:number,num2:number)=>number = (num1,num2)=>{
  return num1 + num2
}
console.log(func2(1,2));
// console.log(func2(1));  //error
// console.log(func2(1,'3')); //error

// 実行結果
// 3

//引数部分のみ型アノテーション
const func3 = (val:string)=>{
  console.log(val);
}

func("hoge")

// 実行結果
// hoge

Copy
let obj: {
  id: string,
  name:string,
  phoneNumber:number
} = {
  id: '1',
  name:'yoshio',
  phoneNumber:111111
}

Copy
//コンパイルエラーとなる
let obj: {
  id: string,
  name:string,
  phoneNumber:number
} = {
  id: '1',
  name:'yoshio',
}

Copy
let obj: {
  id: string,
  name:string,
  phoneNumber?:number
} = {
  id: '1',
  name:'yoshio',
}

Copy
let obj: {  id:string
  [key:string]: string;
} = {
  id: '01',
  name: 'masao'
};

console.log(JSON.stringify(obj,null,3));

// 実行結果
// {
//    "id": "01",
//    "name": "masao"
// }

Copy
let obj: {
  readonly id:string
  readonly [key:string]: string;
} = {
  id: '1',
  name: 'masao'
};

obj.id = '02'//error
obj.name = 'toshio'//error

Copy
let array1: number[];
array1 = [1, 2, 3];

//ジェネリクスを使う
let array2: Array<stirng>;
array2 = ['a', 'b', 'c'];

Copy
const {分割代入するプロパティ}:{型アノテーション} = 分割代入元オブジェクト

Copy
//オブジェクト作成
const user:{
  id: number;
  name: string;
  age: number;
}={
  id:1,
  name:'hoge',
  age:21
}

//分割代入の型アノテーション
const {id,name}:{id:number,name:string} = user

console.log(id);
console.log(name);

Copy
//オブジェクト作成
const user:{
  id: number;
  name: string;
  age?: number;
}={
  id:1,
  name:'hoge',
  age:21
}

//分割代入の型アノテーション
// const {id,name,age}:{id:number,name:string,age:number} = user//error
const {id,name,age}:{id:number,name:string,age?:number} = user//ok

console.log(id);
console.log(name);
console.log(age);

Copy
/** @jsxImportSource @emotion/react */
import { StrStyle } from "./emotionCss";

//オブジェクト定義
type personalData = {
  name: string;
  age: string;
  address: string;
};

//propsの定義
type propsType = {
  data: personalData;
};

//分割代入する
const Person: (props: propsType) => JSX.Element = ({
  data: { name, age, address }
}: propsType) => {
  return (
    <>
      <h1>{name}</h1>
      <h1>{age}</h1>
      <h1>{address}</h1>
    </>
  );
};

export function App() {
  let pdata: personalData = {
    name: "takashi",
    age: "11",
    address: "tokyo"
  };

  return (
    <div css={[StrStyle]}>
      <Person data={pdata} />
    </div>
  );
}