TypeScriptとは?

タイプスクリプトはMSが開発したオープンソースで、JavaScriptの親セット(Superset)である静的タイプ言語です.
ダイナミックタイプ言語JavaScriptに強力なタイプシステムを適用し、コンパイル環境でほとんどのエラーを確認できます.
TSは、JSのすべての環境、プラットフォームを実行し、最新のECMAScript機能をサポートします.
オブジェクト向けのプログラミング環境も提供され、class、interface、extends、jenricなどを直接使用することができます.

タイプスクリプトの利点

静的タイプ-コンパイル時にエラーをキャプチャする利点

ツールのサポート-IDEなどのツールにタイプ情報を提供することで、より高いレベルのコードリスナー、タイプチェック、再構築などのサポートを得ることができます.これらのツールのサポートは、大規模なプロジェクトの必須要素です.

の強力なオブジェクト向けプログラミングサポート-Java、C#などのクラスベースのオブジェクト向け言語の開発者がJavaScriptプロジェクトを実行し、進入障壁を低減するのに役立ちます.

ES 6/ES NEXTサポート-現在ES 6を完全にサポートしていないブラウザを考慮すると、Babelなどのコンバータを使用する必要がある場合、Type Scriptは新しい仕様の有用な機能を安全に導入するのに有利である.

タイプスクリプトの使用

1. npm i typescript
2. tsconfig.json設定

tsconfig.jsonはtypescriptをjavascriptに変換する方法を指定します.

tsc-initで

を作成

{
    "compilerOptions": { // 실제 컴파일 할 경우 적용되는 옵션들
      "module": "commonjs", //어떤 모듈 방식으로 컴파일할지 설정
      "target": "ES2015", // 어떤 버전으로 컴파일할지 작성
      "sourceMap": true, // 해당하는 .map 파일을 생성
      "outDir": "dist" // 컴파일한 것들을 dist에 저장
    },
    "include": ["src/**/*"], // 컴파일할 경로 설정
    "exclude": ["node_modules"] // 컴파일 대상을 제외하는 옵션
}

3.コンパイル
タイプスクリプトは.ts拡張子を使用してファイル、indexを作成できます.tsファイルを作成し、端末にindexとしてtscを入力します.jsとindex.map生成.
(tsc-watchコマンドを使用して、変換ファイルの内容が変更されたことを検出すると、自動的に変換が実行されます.)
node.jsはtypescriptと理解できないため,通常のjavascriptコードを用いてコンパイルする必要がある.

タイプ(Type)

Typeスクリプトは、通常の変数、パラメータ、オブジェクト属性などのタイプを指定できます.

// Javascript
const name = "kevin",
  age = 24,
  gender = "male";

const sayHi = (name, age, gender?) => { // gender 뒤에 ?는 필수가 아닌 선택적으로 값을 받는다는 의미
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

sayHi(name, age, gender);

// TypeScript
const sayHi = (name: string, age: number, gender?: string): string => {
  return `Hello ${name}, you are ${age}, you are a ${gender}`;
};

console.log(sayHi("kevin", 24, "male"));

export {};

タイプ宣言
1.泡立てた:Boolean

let isDone: boolean = false;

2.数字:number

let num: number;
let num: number = 24;
let float: number = 3.14;

3.文字列:string

let str: string;
let name: string = "kevin"
let myName: string = `my name is ${name}`

4.配列:array

let color: string[] = ["red", "white", "black"];
// or
let color: Array<string> = ["red", "white", "black"];

let array: (string | number)[] = ["red", 1, 42, "black"];
// or
let array: Array<string | number> = ["red", 1, 42, "black"];

// 항목의 값을 단언할 수 없다
let arr: any[] = [0, 4, {}, [], 'str', false];

5.凡例:Tuple=>固定長(長さ)の固定タイプ配列

// Tuple
let user: [number, string, boolean] = [1234, 'Hello', true];
console.log(user[0]); // 1234
console.log(user[1]); // 'HEROPY'
console.log(user[2]); // true

// readonly 키워드를 사용해 읽기 전용 튜플을 생성
let a: readonly [string, number] = ['Hi', 123];

6.列挙:Enum

// 기본적으로 0부터 시작하며 값은 1씩 증가
enum Week {
  Sun, //0
  Mon, //1
  Tue, //2
  Wed, //3
  Thu, //4
  Fri, //5
  Sat  //6
}

// 수동으로 값을 변경할 수 있으며, 값을 변경한 부분부터 다시 1씩 증가
enum Week {
  Sun, //0
  Mon = 22, //22
  Tue, //23
  Wed, //24
  Thu, //25
  Fri, //26
  Sat  //27
}

7.すべてのタイプ:any

// 자주쓰지 않는걸 추천
const any: any[] = [1, "hi", true]

8.不明なタイプ:未定義

let a: any = 123;
let u: unknown = 123;

let v1: boolean = a; // 모든 타입(any)은 어디든 할당할 수 있습니다.
let v2: number = u; // 알 수 없는 타입(unknown)은 모든 타입(any)을 제외한 다른 타입에 할당할 수 없습니다.
let v3: any = u; // OK!
let v4: number = u as number; // 타입을 단언하면 할당할 수 있습니다.

9.オブジェクト:object

let obj: object = {};
let arr: object = [];
let func: object = function () {};

let userA: { name: string, age: number } = {
  name: 'kevin',
  age: 123
};

let userB: { name: string, age: number } = {
  name: 'kevin',
  age: false, // Error
  email: '[email protected]' // Error
};

interface

インタフェースをコンパイルせずに、

インタフェースキーコンストレイント値の特定のシェイプを使用します.

interface Human {
  name: string;
  age: number;
  gender: string;
}

const person = {
  name: "kevin",
  age: 24,
  gender: "male"
};

const sayHi = (person: Human): string => {
  return `Hello ${person.name}, you are ${person.age}, you are a ${
    person.gender
  }!`;
};

console.log(sayHi(person));

export {};

classes

インタフェースはコンパイルされませんが、クラスはコードをコンパイルして制御できます.

クラスにどの属性があるべきか、その属性にどの権限があるかを宣言する必要があります.

アクセス制限

パブリック(どこでも利用可能)

プライベート(外部アクセス不可)

保護(内部アクセス可能、サブクラスアクセス可能)

class Human {
  public name: string;
  private age: number;
  public gender: string;
  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}
  
const lynn = new Human("Lynn", 18, "female");

  const sayHi = (lynn: Human): string => {
    return `Hello ${lynn.name}, you are ${lynn}, you are a ${
      lynn.gender
    }!`;
  };
  
  console.log(sayHi(lynn));
  
  export {};