基本設定プロセス

npm install -g typescript
::グローバルインストール

tsc -v
::バージョンの確認

index.htmlの生成

tsファイルの作成
::タイプスクリプトファイルの拡張子はtsです.
(ex. app.ts)

tsc app.ts
:::tsファイルをjsファイルに変換

tsc --init
::tsconfig.jsonファイルの追加
::tsconfig.jsonファイルを追加すると、重複関数実装エラーが消失することがわかります.

tsc -w app.ts
:自動コンパイル

Live Serverを使用した実装の検証

特長

1.降格

ECMAScriptのサブバージョンでは、親バージョンのコンテンツを互換性に変換するプロセスをダウングレードと呼びます.特定のファイルをES 6バージョンと一致させるには、次のコードを入力します.
:: tsc --target es2015 파일명 (input.ts 등)

2.類型推論

タイプスクリプトは、言ったようにタイプを推定できます.次のコードを見てください.

let test = 5;
test = 'five'; // error

変数テストのタイプは宣言されていないが,5が割り当てられた瞬間,変数テストのタイプはnumberと推定される.言い換えれば、コンピュータはlet test:number = 5;とされている.したがって、文字列を変数testに割り当てるとerrorが返されます.

3.明確なタイプ

タイプスクリプトは、宣言時にデータ型を宣言するために作成される言語であり、タイプ説明はタイプスクリプトの本質と言える.タイプはstring、number、string[]、number[]、booleanのほかにも多くの種類があり、선언할 때、변수、関数の매개변수、함수의 반환값に明記できます.
注意:PoiemaWeb

1)変数

let greeting: string = 'hi';
greeting = 'welcome';

2）関数のパラメータ

function sendGreeting(message: string, userName: number) {
  return `${message}, ${userName}`;
}

sendGreeting('hi', 'Jack') // hi, Jack
sendGreeting('hi', 1) // 매개변수와 타입이 다르므로 error 반환
sendGreeting('hi') // 매개변수와 인자의 수가 일치하지 않으므로 error 반환

特別事項
::パラメータと타입이 다른 인자는 에러가 발생한다.::매개변수 수와 인자 수는 일치でなければなりません.

2-1)オプションパラメータ

入力しても入力しなくてもよいパラメータを作成するにはoptionalを使用します.オプションの変数(またはパラメータなど)にしたい場合は疑問符を付けてください.userName?: numberのように

function sendGreeting(message: string, userName?: number) {
  return `${message}, ${userName}`;
}

sendGreeting('hi', 'Jack') // hi, Jack
sendGreeting('hi') // hi, undefined
sendGreeting('hi', 1) // 매개변수와 타입이 다르므로 error 반환

特別事項
:ただし、パラメータが渡されていない場合はundefinedを返します.
:オプションのパラメータは필수 매개변수 뒤에 위치でなければなりません.

2-2)デフォルトパラメータ

オプションのパラメータを使用する場合は、基本パラメータundefined가 반환되는 것을 방지を使用します.また、基本パラメータを使用する場合、タイプ推論はタイプを指定する必要はなく、オプションパラメータも適用されません.

function sendGreeting(message = 'Hello', userName = 'there') {
  return `${message}, ${userName}`;
}

sendGreeting(); // hello, there
sendGreeting('Good Morning'); // Good morning, there
sendGreeting('Good afternoon', 'Jenny'); // Good afternoon, Jenny

3）関数の戻り値

また、パラメータのカッコの後にタイプを指定するだけで、関数の戻り値のタイプを指定することもできます.例えば、function greeting (msg = 'Hello', user = 'there'):string { }はこのように使用することができる.

function sendGreeting(message = 'Hello', userName = 'there'):string {
  return `${message}, ${userName}`;
}

特別事項
::タイプvoid는 오로지 반환값이 없는 함수만 명시할 수 있다.::指定した戻り値のタイプが実際の戻り値と異なる場合、エラーが発生します.

3-1) void

タイプvoidにはnullとundefinedしか割り当てられません.
ただし、nullは--strictNullChecksがtrueの場合、anyおよびnull 타입에만 할당할 수 있다.である(定義されていない場合を除きvoidに割り当てることができる)

3-2)矢印関数に変換

const sendGreeting = (message: 'Hello', userName = 'there'):void => {
  console.log(`${message}, ${userName}`);
}

特別事項
::上記のコードに示すように、戻り値がない場合は、voidを戻り値のタイプとして指定します.

3-3)オブジェクト構造としてタイプを指定する

関数の戻り値をオブジェクトシェイプのタイプとして指定することもできます.

function getData(data:number):{
  studentID: number;
  studentName: string;
  gender: string;
  data: number;
} {
  return data;
}

4.タイプブレークスルー

タイプを混同しないように、一つのタイプで断言します.断言の方法はangle-batch文法とas文法がある.JSX와 함께 사용할 때는, as문법의 단언만 허용된다.4-1)angle-backet構文

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

4-2)as-構文

let div = document.querySelector('div') as HTMLDivElement // let div: HTMLDivElement
div.innerText;

断言する前に、divにはHTML DivElement|nullの汎用タイプがあります.nullの場合、エラーが発生するため、エラーが発生します.この場合、에러를 미연에 방지アサーションタイプです.

5. Interface

オブジェクトの形態のタイプを指定すると、効率と可読性が向上するのがインタフェースです.インタフェースはtsがjsにコンパイルされたときに削除されるため、レンダリングに影響しません.

interface Student {
  studentID: number;
  studentName: string;
  gender: string;
  data: number;
}

function getData(data:number):Student{
  return {
    studentID: number;
    studentName: string;
    gender: string;
    data: number;
  };
}

特別事項
:大文字で始まる必要があります.
::インタフェースの構造と戻り値の構造は同じでなければなりません.戻り値がインタフェースの構造と異なる場合、戻りエラーを決定できます.

4-1)インタフェースの使用方法

interface Student {
  studentID: number;
  studentName: string;
  gender?: string;
  data: number;
  addComment? (comment: string): string;     
  deleteComment?: (comment:string) => string;
}

function getData(data:number):Student{
  return {
    studentID: number;
    studentName: string;
    data: number;
  };
}

4-2)プリフェッチプログラム

特定番組の前にreadonlyをつければいいです.読む前に使うのは재할당이 불가능です.
例1.

interface Student {
  readonly studentID: number;
  studentName: string;
  gender?: string;
  data: number;
  addComment? (comment: string): string;     
  deleteComment?: (comment:string) => string;
}

function getData(data:number):Student{
  return {
    studentID: number;
    studentName: string;
    data: number;
  };
}

例2.

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // 오류!
ro.push(5); // 오류!
ro.length = 100; // 오류!
a = ro; // 오류!

4-3)オプション

returnの時にインタフェースの内容を消したいなら?!このとき使えるのはオプションです.オプションのパラメータと同じ方法を使用できます.

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100}; // 기본값
  if (config.color) {
      newSquare.color = config.color;
  }
  if (config.width) {
      newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});