TypeScript - 1

タイプスクリプトとは?

JavaScriptタイプを付与する言語
JavaScriptの拡張言語です

なぜタイプスクリプトを書くのですか?

エラーのプロアクティブな予防

誤字は、データの形状が分からない場合に発生する可能性のあるエラーを処理することができます.
結果値は、ブラウザまたはコンソールウィンドウで常に決定されるわけではありません.コード作成中にある程度理解できます.

コードガイドと自動補完

function add(a: number, b: number): number {
  return a + b;
}

前述したように、コードを記述する場合

各パラメータのタイプと戻りタイプが明記されます.この場合、戻りタイプを指定する必要はありません.また、タイプスクリプトを類推してプレゼンテーションすることもできます.
最終的には、この利点にはコードガイドも含まれます.

次のnumber typeで使用可能なapiを自動的に完了します.

//@ts-checkとJSDock

タイプは、JavaScriptにおいても明示することができる.

しかし,JSDockを用いてすべての部分を表記すると,コードの毒性が低下し,コード量もそれに応じて増加することが分かる.
「タイプスクリプトを直接書いたほうがいいでしょう」思わずこんな思いをするしかない.

基本タイプ

12種類の基本タイプ

// TS 문자
let str: string = 'hello';

// TS 숫자
let num: number = 10;

// TS 배열
let arr: Array<number> = [1,2,3];
let arr2: Array<string> = ['hello', 'world', 10]; //10에서는 에러가 난다!
let items: number[] = [1,2,3];

// TS 튜플
let address: [string, string] = ['seoul', 'gyunggi'];

// TS 객체
let obj: object = {};
/* 객체의 key 값에 대한 타입이 X
let person: object = {
  name: 'ejk',
  age: 100
};
*/
let person: { name: string, age: number } = {
  name: 'ejk',
  age: 100
};

// TS 진위값
let show: boolean = true;

n.関数

// 함수의 파라미터에 타입을 정의하는 방식
function sum(a: number, b: number): {
	return a+b;
}
sum(10, 20);

// 함수의 반환 값에 타입을 정하는 방식
function add(): number{
  return 10;
}

// 함수에 타입을 정의하는 방식
function sum(a: number, b: number): number{
  return a+b;
}

sum(10, 20, 30, 40); // error! 2개의 인수가 필요한데 4개의 인수를 가져왔습니다!!

// 함수의 옵셔널 파라미터
function log(a: string, b?: string, c?: string){
  // '?' 가 들어간 파라미터는 optional 하다
}
log('hello wolrd');
log('hello', 'hello');

インタフェース

変数のタイプとして使用できます.この場合、インタフェースがタイプであることを宣言する変数は、インタフェースを遵守する必要があります.これは、新しいタイプを定義するのと同じです.

interface User {
  age: number;
  name: string;
}

// 변수에 인터페이스 활용
let test: User = { 
  age: 33,
  name: 'EJ';
}

let wrongTest: User = {
  name: 'hello';
}

// 함수에 인터페이스 활용
function getUser(user: User){
  console.log(user);
}

getUser(test);
getUser(wrongTest); // 에러! wrongTest 변수는 User의 age를 갖고 있지 않다!!

// 함수의 스펙(구조)에 인터페이스를 활용
// 라이브러리 제작 or 협업에서의 함수 정의 시 유용!
interface SumFunction{
 (a: number, b: number): number; 
}
var sum: SumFunction;
sum = function(a: number, b:number): number {
  return a+b;
}

インデックスとバイナリ・モード

// 인덱싱
interface StringArray{
 [index: number]: string; 
}

let arr: StringArray = ['a','b','c'];

arr[0] = 10; // 에러! 10은 Array에 할당할 수 없다! -> 배열의 인덱싱 방식에 대해서 인터페이스를 정의할 수 있다.

// 딕셔너리 패턴
interface StringRegexDictionary{
  [key: string]: RegExp;
}

let obj = {
 // sth: /abc/,
  cssFile: /\.css$/,
  jsFile: /\.js$/,
}

obj['cssFile'] = 'a'; // 에러! -> 정규식이 아닌 문자열이 들어왔다

// 이점
Object.keys(obj).forEach(function(value){
  // value : string 추론해준다
})

拡張インタフェース

interface Person{
  name: string;
  age: number;
}

// Developer는 Person의 name과 age를 상속한다
interface Developer extends Person{
  language: string;
}

let test: Developer = {
  name: 'EJ',
  age: 100,
  language: 'JS'
}

レッスンの準備:インフラストラクチャレッスンのブリッジリーダー、タイプスクリプト-エントリー