개발 필기장

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}

TypeScript 설치 셋팅

이미 있는 React프로젝트에 설치 방법 : 

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

React 프로젝트를 새로 만들어 설치 방법 :

npx create-react-app my-app --template typescript

그냥 vscode에서 typescript 실행 방법 : 

npm install -g typescript

tsconfig.json파일(ts -> js컴파일시 옵션 설정 가능) 생성 후

{

"compilerOptions":{

"target": "es5",

"module": "commonjs",

}

}

그 후 ts파일을 js로 인식하게 하려면 terminal창에 tsc -w 입력

그러면 코드를 입력하면 js파일이 생성된다

이제 .js 파일을 .ts 파일로 바꿔서 이용가능

TypeScript 타입 지정 

javascript는 Dynamic Typing이 가능하다

typescript는 타입을 엄격히 검사해준다

변수를 만들 때 타입을 지정하는 방법 : let 변수명 :string = 'kim'

해당하는 변수에는 string 타입만 들어올 수 있게 설정

array 타입 지정 방법 : let 변수명 :string[] = ['kim', 'park']

object 타입 지정 방법 : let 변수명 :{name : string} = {name : 'kim'}

* let 변수명 :{name? : string} = {name : 'kim'} = ?를 통해 name이 없어도 에러 발생안하게 설정

object에 타입지정해야할 속성이 너무 많으면

* let 변수명: {[key :string] : string} = {name : 'kim', age : '123'} = 글자로 된 모든 object속성의 타입은 string

여러가지 타입의 데이터를 들어올 수 있게 하는 방법 : let 변수명 :string | number = 123;

* 타입을 따로 변수로 사용하면 만들수 있다

type 타입 = string | number;

let 변수명: 타입 = 123;

함수에 타입지정 하는 방법 : 

function 함수(x :number) :number{

return x * 2;

}

해당 함수는 파라미터로 number, return값으로 number

* class는 미리 타입을 지정해야한다

Tip : 타입지정은 원래 자동으로 된다. 타입지정 문법 생략 가능

TypeScript 타입 지정 (union, any, unknown)

Union type(|)을 통해 두개 이상 타입 지정이 가능하다

array 타입 : let 회원들 :(number | string)[] = [1,'2',3];

object 타입 : let 오브젝트 :{a :(string | number)} = {a : 123};

* union타입은 두가지 타입을 합쳐서 새로운 타입을 만드는 것이다. 

any타입(타입 실드 해제 문법)을 통해 모든 자료형을 허용해줄 수 있다

let 이름 :any;
이름 = 123;
이름 = [];

unknown타입 : 기능은 any와 같으나, 조금 더 안전하다

이유 : any는 다른 곳에서 불러와도 타입실드를 해제한다 (오염)

TypeScript 타입 지정 (함수, void)

타입 지정하는 함수 만드는 방법 :

function 함수(x :number) :number{

return x * 2;

}

함수(6);

함수에서 void타입 활용 방법 : 

function 함수(x :number) :void{

x + 1;

}

함수(2);

:void = return을 했을 경우 error나게 설정

* 함수에서 파라미터값을 설정하면 typescript에서는 무조건 보내줘야한다

이것을 막기 위해서는 파라미터변수 뒤에 ?를 붙이면 된다

* 변수? :number는 변수 :number | undefined와 같다

TypeScript Narrowing & Assertion

type이 아직 하나로 확정되지 않았을 경우(string | number) Type Narrowing을 써야한다

대표적인 Narrowing 방법 : typeof

if문 등으로 Narrowing 해줘야 조작가능

assertion 문법 : 타입 덮어쓰기(확정되지 않은 타입을 변경, 확정된 타입은 변경 불가)

아직 확정되지 않은 변수 뒤에 as type명 = 해당 변수가 지정한 type으로 덮어 써진다

* assertion 문법의 용도 : 

1. Narrowing할 때 쓴다

2. 무슨 타입이 들어올지 100% 확실할 때 쓴다

웬만하면 Narrowing 쓰삼

TypeScript type alias & readonly

type alias : 타입 변수

만드는 방법 : type 변수명(첫번째 대문자) = 내용;

* const 변수명 = 값 : 해당 변수의 값을 바꿀수 없다(const이기 때문에)

하지만 object는 바꿀 수 있다.

따라서, object여도 바꿀수 없게 하는 방법 : 

type을 지정해줄 때, 해당 obejct의 키값 앞에 readonly를 붙여준다 

type girlfriend = {
    readonly name : string
}

* 타입스크립트 에러는 에디터 & 터미널에서만 존재

실제 변환된 js파일은 에러 없음

type변수도 union type으로 extend(합치기) 가능

type Name = string;
type Age = number;
type Person = Name | Age;

object type 변수도 &로 extend(합치기) 가능

type PositionX = {x : number};
type PositionY = {y : number};
type NewType = PositionX & PositionY;

* type변수는 재정의 불가능하다