タイプスクリプトは、JavaScriptに基づいて静的タイプ構文を追加するプログラミング言語です.

特長

JavaScriptは、実行時にエラーが検出されたのとは逆の動的タイプです.
タイプスクリプトは、コード作成フェーズでタイプをチェックしてエラーを特定し、実行速度が非常に速く、タイプを事前に特定できる静的タイプコンパイル言語です.
また、JavaScript基本構文にタイプスクリプトという構文を追加した言語です.jsを.TSに変更可能で、ES 6に追加された構文が含まれており、オブジェクト向けのプログラミングモードをサポートしています.

設定

npm install -g typescript

tsconfig.jsonを作成した後、次のコードをコピーします.

{   
  "compilerOptions" : {     
    "target": "es6",     
    "module": "commonjs",  
  } 
}

// 자바스크립트로 자동 변환
tsc -w

反応器に取り付けるとき

既存のプロジェクトにインストール
対応する作業フォルダパスを使用して端末を開く

.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

新しいプロジェクトに

をインストールする

npx create-react-app my-app --template typescript

を選択します。

タイプもいろいろあります.
string、number、boolean、null、undefined、bigint、[]、{}、など
指定タイプは次のとおりです.

let 변수명 :타입 = '내용';

let name :string = 'LEE';
let name :string[] = ['LEE', 'SUGNHUN']; // string만 있는 배열 타입
let name :{ name? : string } = { name : 'Lee' } // name 속성은 옵션이다를 표시
let name :string | number = 'lee'; // string or number

// 아래 함수는 파라미터로 number, return 값으로 number
function 함수(x :number) :number {
	return x * 3;
}

関数が何も返さない場合は、voidに設定できます.

function 함수(): void {
	대략함수내용
}

タイプを変数に書き込むこともできます
タイプは大文字で始まる

type Mytype = string | number

// tuple 타입
type Member = [number, boolean];
let Lee:Member = [11, false]; // [첫번째는number, 두번째는boolean];

// 모든 object 속성
type Objects = {
	[key :string] : string,
}
let lee : Objects = { name : 'Lee', age : '26' }

パラメータの後に?を付けると、オプションの状態になります

const sample = (a, b, c?) => {
	console.log('c is optional parameter');
}

React

props

Interfaceを使用してpropsを定義できます

interface NavProps {
	handleToFirst: any;
}

component

関数素子を表すreact.FCの貼り付け

const Example: React.FC<interface명> = () => {
	....
}

リファレンス

https://www.samsungsds.com/kr/insights/TypeScript.html
https://codingapple.com/unit/how-to-install-typescript-in-local-vue-react/