TypeScript Literal types, 함수& methods에 타입 지정, typescript로 HTML 변경 및 조작, class 키워드(JS 문법), class 타입 지정, interface

 

 

 

 

 

 

TypeScript Literal types

Literal types : 해당 변수에 지정한 값의 타입만 들어오게(더 엄격) 한다

방법 : :'kim' = kim만 들어오게 한다 ( |(union type)를 사용하여 설정 가능 )

* 함수에도 사용 가능

 

literal types의 문제점 : 

해당 값을 가져오는게 아니라, 해당 값의 타입을 가져온다

해결방법 : 

가져오는 값 뒤에 as const를 붙여준다 = literal type 지정을 알아서 해준다

(속성들에 모두 readonly 적용)

var 자료 = {
    name : "kim"
} as const


function 내함수(a :'kim'){
}

내함수(자료.name);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TypeScript 함수, methods에 타입 지정

생성 방법 : type 함수타입 = (a: string) => number;

적용 방법 : let 함수 :함수타입 = function(a){ return 1; }

type 함수타입 = (a :string) => number;

let 함수 :함수타입 = function(a){
    return 1;
}

함수("123");

 

* object 안에 함수 만들수 있다

* 함수안에 함수를 넣으려면, 받은 함수를 ()를 붙여서 사용

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TypeScript typescript로 HTML 변경 및 조작

tsconfig.json파일 - "strictNullChecks": true추가

* document.querySelector()를 쓰면, null이 아닌지 narrowing 해줘야한다

narrowing 방법 5가지

1. if (제목 != null) : 무난

2. if (제목 instanceof Element) : 자주 쓴다

3. document.querySelector() as Element : 웬만하면 쓰지 말것

4. if (제목?.innerHTML) : 제목이 있으면 출력, 없으면 undefined (if아니여도 인정해준다)

5. tsconfig.json파일 - "strictNullChecks": true 지우기 : 무식한 방법

 

* href를 바꿀 때, narrowing을 하려면 instanceof HTMLAnchorElement 사용

그 외 HTMLHeadingElement, HTMLButtonElement 등이 있다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TypeScript class 키워드(JS 문법)

<script>

    class Hero{
        constructor(구멍){
            this.q = 구멍;
            this.w = 'snowball';
        }
    }
    
    var nunu = new Hero("consume")
    var garen = new Hero("strike")

</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TypeScript prototype 문법(JS 문법)

prototype : 유전자

해당 클래스를 상속받은 객체들은 해당 클래스의 prototype을 설정해주면 모두 그 값을 받아올 수 있다

<script>

    class 기계{
        constructor(){
            this.q = "strike";
            this.w = 'snowball';
        }
    }
    
    기계.prototype.name = 'kim';

    var nunu = new 기계();
    var garen = new 기계();

    var 어레이 = [4, 2, 1];
    var 어레이 = new Array(4, 2, 1);

    Array.prototype.함수 = function(){}

</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TypeScript class 타입지정

constructor()는 필드값에 변수가 미리 있어야 this.변수명 이 가능하다

class Person{
    name :string;
    constructor(a :string){
        this.name = a;
    }
    함수(a :string){
        console.log('안녕' + a);
    }
}

let 사람1 = new Person("kim");
let 사람2 = new Person("park");

사람1.함수("안녕");

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TypeScript interface

object 타입지정시 interface 사용가능

interface의 장점 : extends로 복사가능

interface Student {
    name : string
}
interface Teacher extends Student{
    age : number
}

let 학생 :Student = {name : 'kim'}
let 선생 :Teacher = {name : 'kim', age : 20}

 

type alias도 &로 extend기능 사용 가능

type Animal = {
    name : string
}
type Cat  = {
    age : number
} & Animal

let 고양이 :Cat = {name : 'kim', age : 20}

 

type vs inteface

interface는 중복선언 가능

type은 중복선언 불가능

interface Student {
    name : string
}
interface Student {
    score : number
}
interface Teacher extends Student{
    age : number
}

let 학생 :Student = {name : 'kim', score : 23}
let 선생 :Teacher = {name : 'kim', age : 20, score : 100}