タイプ差異タイプ推論

スタティツクタイピング

タイプを宣言し、宣言したタイプに一致する値のみを割り当てまたは返す必要があります.
たとえば、

let a = 5;
a = "hello"

JavaScriptでは、通常再割り当てされている文です.
タイプスクリプトの場合:

let a = 5;
a = "hello" // a 밑에 빨간 밑줄이 그어진다.

コンパイルも実行されません.
タイプスクリプトは、タイプタグがない場合にタイプを推定してタイプ情報を提供します.
変数に割り当てられる値は数字5であるため、数字によって決まる.
タイプスクリプトは、タイプタグなしでコードを読み取り、分析してタイプを推定できます.
これがタイプ推理
なんて頭がいいんだろう.

let student = {
  name : "Shin",//string
  course : "Getting Started with TypeScript", // string
  codingIQ : 80, // number
  code : function(){ // function
    console.log('brain is working hard'); // return void
  }
}
function calculateCodingIQ(lostPoints){ // function parameter:any
  return 100 - lostPoints; // return number
}

タイプ宣言

変数を宣言するときに変数値のタイプを指定することで、変数値のデータ型を指定します.

構文(Syntax)

let x : string = "Shin"x変数はstringのみを割り当てることができます.

let studentID :number = 12345;
let studentName :string = "Shin";
let age:number = 27;
let gender:string = 'male';
let subject:string = 'Ts';
let courseCompleted:boolean = false;

function getStudentDetails(studentID:number)
:object { //함수반환값 타입명시는 여기서
  return null
}

function getStudentDetails(studentID:number):{
	studentID :number,
	studentName :string,
	age:number,
	gender:string,
	subject:string,
	courseCompleted:boolean,
} {
  return null
}

このようにオブジェクトの内部設計を完全に示すこともできます.
しかし、複雑すぎて、コードが面白くありません.
だから一番いいのはインタフェースです.

インタフェース

インタフェース

interface Student { // 인터페이스 네이밍컨벤션 앞에 대문자 -> 다른언어에서는 i를 붙이는경우가있으나 TS에서는 안붙이는게 관습적이다.
 	studentID :number;
	studentName :string;
	age:number;
	gender:string;
	subject:string;
	courseCompleted:boolean;
}

function getStudentDetails(studentID:number):Student
{
 	return {
    	studentID :12345,
        studentName :"Shin",
        age:27,
        gender:"male",
        subject:"TS",
        courseCompleted:false // 이 propery중 하나라도 없으면 바로 컴파일에서 error가 발생한다. 만약  있어도되고 없어도되는 프로퍼티라면? "?" 사용하자. 선택적프로퍼티
    }
}

選択的な番組?

interface Student { 
 	studentID :number;
	studentName :string;
	age?:number; // age property는 있어도되고 없어도되는 값이다.
	gender:string;
	subject:string;
	courseCompleted:boolean;
}
function getStudentDetails(studentID:number):Student
{
 	return {
    	studentID :12345,
        studentName :"Shin",
		//age:27 없다면      
        gender:"male",
        subject:"TS",
        courseCompleted:false,
    }
}

//이렇게 작성한다면 문제가없다. ?를 사용해서 선택적 프로퍼티를 지정해서 인터페이스를 구상할수있다.

function saveStudentDetails (student:Student) :void { // 코드의 재사용
  
}

let student1 = {
  studentID :12345,
  studentName :"Shin",
  age:27,
  gender:"male",
  subject:"TS",
  courseCompleted:false,
}
saveStudentDetails(student1)

方法

オブジェクトで宣言された関数
インタフェース内で定義できます.
2つの方法があります.

addCommnet (comment:string):string;

addComment: (comment:string)=>string;

読み取り専用プロパティ

読み取り専用プロトコル
オブジェクトの作成時に割り当てられたプロパティの値は変更できません.

interface Student{
  readonly studentID : number;
  studentName:string;
  age?:number;
  gender:string;
  subject:string;
  courseCompleted:boolean;
  // addComment (comment:string):string;
  addComment?: (comment:string)=> string;
}

function saveStudentDetals (student:Student):void{
  student.studentID = 1123323; // 읽기 전용이기때문에 error를 띠운다.
}

実際、コードをレンダリングするとき、インタフェースは
影響力がないためTS->JSのコンパイル時に消失する.
インタフェースの存在は、TypeScriptに作成中のコードに関する詳細情報を提供するためである.
タイプスクリプトが提供する情報が多ければ多いほど、タイプスクリプトが提供するヘルプが多くなります.

EnumとTerral

Enum

Enumは、リストされた関連項目のセットです.
国の列挙型資料があれば.
中にはアメリカ韓国中国日本があります.など、いろいろな国の名前があるかもしれません.
列挙型を使うメリットは?
通常、性別のGenderといえば、男、女です.
他の値の入力を制限する場合はifを入力しますか?
タイプスクリプトを使用すると、Enumタイプを使用してタイプ宣言に制限できます.

enum GenderType {
  Male,
  Female
}

interface Student{
  readonly studentID : number;
  studentName:string;
  age?:number;
  gender:GenderType;
  subject:string;
  courseCompleted:boolean;
  // addComment (comment:string):string;
  addComment?: (comment:string)=> string;
}

// 실제 값 부여시에는 GenderType.male 이런식으로 `.`을 사용해서 접근한다. 즉 객체처럼 쓴다.

コンパイルされた内容から見るとenum列挙データのように
js内部宣言の順序で、0、1、2の順序で値を入力します.
オブジェクトが作成されます.

GenderType = {
	Male:0,
    Female:1,
    //...
}

これをデジタル列挙型デジタルEnumと呼ぶ.
string Enumを使用するには

enum GenderType {
  Male="male",
  Female="female"
}
// 숫자가 자동증가하는 기능은없지만 코드를 실행할때 조금더 읽기 쉬운 값을 주는 장점이있다.

文学作品.

interface Student{
  readonly studentID : number;
  studentName:string;
  age?:number;
  gender:"male"|"female"|"genderNeutral";// 이런식으로 간단하게 해결가능
  subject:string;
  courseCompleted:boolean;
  // addComment (comment:string):string;
  addComment?: (comment:string)=> string;
}