Typescript初期設定とデフォルト構文

1.Typeスクリプトのみ使用する場合

typescriptローカルインストールnpm install typescript --save-dev

typescriptコンパイラのインストール
グローバルインストール:tsc --initローカルインストールの場合:npx tsc --init👉 'tsconfig.jsonファイルが作成されました

/// 컴파일 옵션 설정 할 수 있음
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

ブラウザは.jsファイルしか読み込めないため、.tsファイルを認識できません.
したがって、タイプスクリプトをブラウザに適用する場合、jsのようにすぐに適用することはできません.
したがって、typescriptファイルをjsファイルにコンパイルし、コンパイルしたjsファイルをブラウザに適用する方法を使用する必要があります.

コンパイル命令
グローバルインストール:tscローカルインストール:npx tsc

このコマンドを使用するたびに、タイプスクリプトファイルをjsファイルにコンパイルします.
タイプスクリプトファイルの変更時にjsファイルをリアルタイムでコンパイルする場合は、次の操作を行います.npx tsc -w命令を使用します.
このコマンドを使用すると、typescriptファイルを変更および保存するたびにjsファイルに自動的に適用されます.
.tsファイルの内容が自動的にコンパイルされます.jsファイルに適用されるコード

2.ReactプロジェクトでTypeスクリプトを使用する場合

インストール

Typescript

初回CRA時一括装着create-react-app 프로젝트명 -typescript

CRA完了後にtypescriptをインストールnpm install typescript @types/styled-components @types/react @types/react-dom @types/react-router-dom ...

コンパイラ

をインストール

tslintのインストールnpm install tslint --save-dev npx tslint --init

// tslint 기본 설정
{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

3.Typescript基本構文

タイプスクリプトはオブジェクトのタイプを指定せず、さまざまな問題を引き起こすjsを補います.Jsとほぼ同じですが、各変数、各関数、各オブジェクトは特定のタイプの方法を指定します.
基本的にはconst/let 객체명 : 타입形式で命名されています.

const name = "kim";		// js
const name : string = "kim"	// ts

1.変数

const name : string = "minji";

2.配列

const list : string[] = ["A", "B", "C"];

다음과 같이 해당 인덱스 자리에 어떤 타입이 들어갈 것인지
인덱스마다 지정해주는 방식을 튜플 타입이라고 한다.

const list : [number, boolean] = [12, false];

3.対象

const obj : {name : string, age : number} = {name:"minji", age:10};

4.複数のタイプを指定したい場合

| (or 연산자)と書くタイプを書きます.

// 둘 다 에러 안 남
const gender : string | number = "0";
const gender : string | number = 0;

5.タイプを変数として代入できます

ex 1)

type Type = string | number;
const gender : Type = "1"

ex 2)

type Person = {
  name: string,
  age: number,
  gender: boolean
}

const person : Person {
  name: "John",
  age: 10,
  gender: true
}

6.複数の属性タイプを同時に指定できます

type Person = {
  // key값이 string인 값은 모두 value가 string type
  [key : string] : string	
}

7. '?' 使用する場合、オブジェクトは存在しても存在しなくてもよい

name属性に?が付けられているので、nameがない場合はageだけを明記してもエラーはありません.

type objType = {name? : string, age : number}
const obj : objType = {age : 22}

8.関数タイプの指定

function 함수명(인자값 : 인자타입) : return값 타입 {
  return x * 2;
}

function multiply(x : number) : number {
  return x * 2;
}

const multiply = (x : number) : number => {
  return x * 2;
}

Type ScriptによるEventHandling

jsを使用して作成されたイベント関数は、イベント関数を使用する場合と同じです.
オブジェクト値がnullの場合があります.エラーが発生しました.
Typeスクリプトは値のタイプをよくチェックします.document.querySelectorに誤ったid値が入力された場合、またはレンダリングされていない場合と同じnull値のエラーが発生しました.
Reactを使用する場合、プレゼンテーション後にコンポーネントDidMountを使用して、データが定義されていないときにフロートエラーが発生しないようにする方法.

// 방법 1
if(title !== null) {
     title.innerHTML = "반가워요";
}
// 방법 2
if(title instanceof Element) {
   title.innerHTML = "반가워요";
}
// 방법 3
if(title?.innerHTML) {
	title.innerHTML = "반가워요"; 
}

したがって、eventHandler関数を使用する場合は、次のように記述します.

title?.addEventListener('click', () => {  
   alert("title");
})

2つ目の方法で
tsは、aタグのhref属性をイベントハンドラ関数として指定すると仮定する.

if(address instanceof HTMLAnchorElement) {}

このようなより明確なタイプを指定する必要があります.HTMLAnchorElement、HTMLHeadingElement、HTMLButtonElementなどがあります.

ReactでTypescriptを使う

jsxファイルは、.tsxを拡張子とします.

Hook標準

const関数名:react.フルファンクションタイプ(FC)

Propsタイプ、Generic形式で<Props 타입명>を指定