-
型チェック
- React.HTMLFormInputElement
- ReactNode
interfaceはオブジェクトに使う （引数のPropsが多い場合も）
interface Props{
name:string;
age:number;
}
calss App extends React.Component<props: Props>
- Propsの持ち方
# 初期
class App entends Component<{nane: string; age:number; }>
# 次
interface Props{
name: string;
age: number;
}
class App entends Component<Props>
- input ref
- import
import {Form } from './Form'
これがあるかないかは`export`がdefaultかどうか
関数型
type MyCompProps = {
name: string;
}
const MyComp = (props: MyCompProps) => {
}
// boolean
let message: boolean = true;
// 数字
let num: number;
num = 6;
// 文字
let red: string;
red = "red";
// Array
let listA: number[];
let listB: Array;
listA = [1,2,3,3]
listB = [2,3,3,4]
// enum
enum Color {Red = "red", Green = "green", Blue = "blue"}
// Any
let notSyure: any;
notSyure = 1;
notSyure = "yellow"
// void
function warnUser(): void {
console.log("this is my warning")
}
// null undefained型があるらしい
// Never 決して発生しない値
// Object型
function create(o: object | null): void {
console.log(create: ${o["props"]})
}
// 型アサーション
// 型アサーションは任意の型に変換できるのが特徴 number をstring的な感じか
let someValue: any = "this is a string"
let strLength: number = (someValue).length;
// これよくわからない
// 書き方2種類
// 1. const num = string
// 2. const num = string as Number
let str: string;
let unknown = str;
let numnum = unknown;
numnum = 8;
console.log(message)
console.log(red)
console.log(listA[0])
console.log(listB[2])
console.log(Color.Red)
console.log(notSyure)
console.log(warnUser())
console.log(create({props: 0}))
console.log(strLength)
console.log(numnum)
console.log(num)
// type 肩に名前をつける
type BirthYear = number | string;
let year: BirthYear;
year = 2019
console.log(year)
// type はオブジェクトの型も扱える
type Person = {
name:string;
age:number;
}
// オブジェクトの型の定義
const postalCodes: {[key: string]: string} = {
"3300000": "東京都",
"3300001": "東京都",
"3300002": "東京都"
}
// interface これはクラスに使うらしい
interface User {
name:string;
age: number;
}
// 関数
// 演習
function isPositive(num:number): boolean{
return num >= 0
}
console.log("isPositive")
console.log(isPositive(2))