アップルをコードしたTypescript:Part 2-2から
30695 ワード
8. React + Typescript
ファイル拡張子.tsxを使用して作業します.
JSX構文の位置付け関数なので良く見えます. コピーを別途作成する必要はありません. 取付
.jsの変数を指定します.tsで使用したい場合
すべてのtsファイルは環境モジュール(グローバルモジュール)によって共有される.
つまり、実際にexport、importを行う必要はありません.
ただし、exportとimportを区別する場合は、ローカルモジュールに変更できます.
ファイル拡張子.tsxを使用して作業します.
JSX構文の位置付け
let 박스 :JSX.Element = <div></div>
//또는 좀 더 정확하게 표현하고자 할때에는
let 박스 : JSX.IntrinsicElements['div'] = <div></div>
コンポーネントタイプ定義function App(){
return (
<div>
<h4>안녕하십니까</h4>
<Profile/>
</div>
)
}
function Profile () :JSX.Element {
return (
<div>프로필입니다.</div>
)
}
Props目標位置決めfunction App(){
return (
<div>
<h4>안녕하십니까</h4>
<Profile name='철수'/>
</div>
)
}
function Profile (props : {name : string}) :JSX.Element {
return (
<div>프로필입니다.</div>
<div>{props.name}입니다.</div>
)
}
useStateターゲット位置決めfunction App(){
let [user, setUser] = useState('kim')
// 자동으로 타입지정
// 또는 useState<string | number >('kim')
return (
<div>
<h4>안녕하십니까</h4>
<Profile name='철수'/>
</div>
)
}
function Profile (props : {name : string}) :JSX.Element {
return (
<div>프로필입니다.</div>
<div>{props.name}입니다.</div>
)
}
9. React + Typescript + Reduxconst 초기값 :{count:number} = { count: 0 };
function reducer(state = 초기값, action :{type:string}) {
if (action.type === '증가') {
return { ...state, count : state.count + 1 }
} else if (action.type === '감소'){
return { ...state, count : state.count - 1 }
} else {
return initialState
}
}
const store = creatStore(reducer)
// 하기 타입을 export 해서 useSelectort에서 편하게 가져다 쓴다.
// store의 타입이 자동으로 나온다.
export type RootState = ReturnType<typeof store.getState>
function App() {
const 꺼내온거 = useSelector( (state :RootState) => state );
// 코드 상단에서
// import {Dispatch} from 'redux'; 추가해서 쓴다.
const dispatch :Dispatch = useDispatch();
return (
<div className="App">
{ 꺼내온거.count }
<button onClick={()=>{dispatch({type : '증가'})}}>버튼</button>
<Profile name="kim"></Profile>
</div>
);
}
redux toolkitnpm install @reduxjs/toolkit
import { createSlice, configureStore, PayloadAction } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
const 초기값 = { count: 0, user : 'kim' };
const counterSlice = createSlice({
name: 'counter',
initialState : 초기값,
reducers: {
increment (state){ // return 을 따로 안써줘도 된다.
state.count += 1
},
decrement (state){
state.count -= 1
},
incrementByAmount (state, action :PayloadAction<number>){
state.count += action.payload
}
}
})
let store = configureStore({
reducer: {
counter1 : counterSlice.reducer
}
})
//state 타입을 export 해두는건데 나중에 쓸 데가 있음
export type RootState = ReturnType<typeof store.getState>
//수정방법 만든거 export
export let {increment, decrement, incrementByAmount} = counterSlice.actions
import { useDispatch, useSelector } from 'react-redux'
import {RootState, increment} from './index'
function App() {
const 꺼내온거 = useSelector( (state :RootState) => state);
const dispatch = useDispatch();
return (
<div className="App">
{꺼내온거.counter1.count} // 미리 지정한 변수명을 사용
// 전통방식 대신 미리 지정한 함수만 쓰면 된다.
<button onClick={()=>{dispatch(increment())}}>버튼</button>
</div>
);
}
10. tuple typelet 멍멍 : (string | boolean)[] = ['dog', true]
// 위치, 타입도 지정하는 방법 => tuple type
let 멍멍 : [string, boolean] = ['dog', true]
let 멍멍 : [string, boolean?] = ['dog', true]
let 멍멍 : [string, boolean?, number] = ['dog', true] // 에러 발생
function 함수 (...x : number[]) {
console.log(x) // [1,2,3,6,3,4]
}
//tuple type 사용
function 함수 (...x : [number, string]) {
console.log(x) // [111,'222']
}
함수(111,'222')
rest構文+tuple typelet arr : number[] = [1,2,3]
let arr2 : [number, number, ...number[]] = [4,5,...arr]
11. declare.jsの変数を指定します.tsで使用したい場合
// data.js 파일
var a = 10
var b = {name : 'kim'}
// index.ts 파일
console.log(a+1) // 에러 발생, but 실행은 된다.
declare let a : number; // 위의 에러를 지우는법, 변수 a를 재정의해준다.
// index.html 파일
<script src="data.js"></script>
<script src="index.js"></script>
.tsの変数を指定します.tsで使用したい場合すべてのtsファイルは環境モジュール(グローバルモジュール)によって共有される.
つまり、実際にexport、importを行う必要はありません.
ただし、exportとimportを区別する場合は、ローカルモジュールに変更できます.
// data.ts 파일
export var a = 10
// index.ts 파일
import {a} from './data'
console.log(a+1)
ローカルモジュールでグローバル変数を作成する場合は、次の操作を行います.declare global {
type Dog = string;
}
export {}. // 로컬 모듈 파일임을 명시하기 위하여
Reference
この問題について(アップルをコードしたTypescript:Part 2-2から), 我々は、より多くの情報をここで見つけました https://velog.io/@bleach7/Typescript-from-코딩애플-Part2-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol