Help us understand the problem. What is going on with this article?

typescript react

  • 型チェック

    • 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

https://ja.reactjs.org/docs/refs-and-the-dom.html

  • 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))

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away