フロント2週目

を過ぎて

enum Answer {
	Yes = 'Y',
    No = 'N',
}

function askQuestion(answer: string) {
	if(answer=='yes')
    	console.log('정답입니다');
    if(answer=='no')
    	console.log('오답입니다');
}

if(answer == Answer.Yes)
if(answer == Answer.No)

askQuestion('y');
askQuestion('Yes');

このようにすると例外を減らすことができます.
カテゴリ

class Person {
	constructor() {}
}

JavaScriptはプロトコルタイプに基づく言語です.

var user = { name: "hyoseung", age: 20 };
var admin = {};
admin.__proto__ = user;

adminはユーザーを継承します.

//클래스 문법
class Person {
	public name:string;
	private age:number;
}

ジェニーリック
高再利用コードの作成によく使用されます.

function logText(text) {
	console.log(text);
    return text;
}

function logText<T>(text: T):T {
	console.log(text);
    return text;
}

logText<string>('하이');

各パラメータタイプに異なる実行操作がある場合は、関数を記述する必要があります.

function logNumber(num: number) {
	console.log(num);
    return num;
}

しかし、この場合は同じコードを書くのでメンテナンスが悪い.

function logText(text string | number) {
	text. 
}

問題は、unionタイプでパラメータを取得する場合、タイプの共通部分に近づくしかないということです.
この時ジェニーリックを使ってみましょう.

function logText<T>(text: T): T {
	console.log(text);
    return text;
}
const str = logText<string>('abc');
str.split();
const login = logText<boolean>(True);

呼び出し時にタイプに何が含まれているかを決定する概念
インタフェースでJENICを使用する方法

interface Dropdown<T> {
	value: T;
    selected: boolean;
}
const obj: Dropdown<string> = { value: 'abc', selected: false };

類型推論
変数を宣言または初期化すると、属性、パラメータのデフォルト値、関数の戻り値などもタイプ推定されます.

interface Dropdown<T> {
	value: T;
    title: string;
}
var item: Dropdown<string> = {
	value: 'abc', //여기서 문자열이 들어가야 한다고 알려준다
    title: 'hello'
}

タイプスクリプトの内部推定valueにはstringが含まれます
language serverでこのタイプですよね?間違っています.に知らせる
タイプブレークスルー
開発者はタイプスクリプトよりもタイプをよく知っています.
タイプスクリプトは気にしないでください.
操作DOM API

<div id="app">hi</div>
var div = document.querySelector('div');
div.innerText; // 이럴 때 div가 null일 수도 있어서 에러가 난다

こんな時にできる!

var div = document.querySelector('div') as HTMLDivElement;

タイプ互換性
タイプスクリプトコードの特定のタイプは、他のタイプに適していますか?

interface Developer {
	name: string;
    skill: string;
}
interface Person {
	name: string;
}
var developer: Developer;
var person: Person;
person = developer; //오른쪽 값이 더 큰 구조의 경우 호환이 된다

var add = function(a: number) {}
var sum = function(a: number, b: number) {}
sum = add;

interface Empty<T> {
}
var empty1: Empty<string>;
var empty2: Empty<number>;

empty1 = empty2
empty2 = empty1 //안에가 비었기 때문에 둘은 호환된다.

interface NotEmpty<T> {
	data: T;
}
var Notempty1: Empty<string>;
var Notempty2: Empty<number>; //안의 데이터 타입 자체가 다르므로 둘은 호환이 되지 않는다.