[TS] TypeScript맛보기

 

 

니코의 타입스크립트 강의를 하나 들어보자.

 

 

#1 세팅

---

2. 노드버전 확인

node -v
// 18.0.0 임을 확인

 

1. Visual studio Code

TypeScript도 VSC도 MS가 만들었으니 찰떡궁합으로 써보자.

 

 

 

#2 TypeScript 사용해보기

---

 

The starting point for learning TypeScript

작동방식

1. 개발자가 코드 작성

2. 타입스크립트가 코드 확인

3. JS를 통한 컴파일 시점 이전에 자바스크립트의 기존의 잠재적 오류가능성을 방지 

=> TS가 런타임에 작동되는 것이 아니다

 

예시

자료타입 명시하기

/* 기본 자료 타입 */
let a : number = 1;
let a2 : number[] = [1,2];
let a1 = [1,2]; // 이렇게 써도 number의 배열임을 인식함

let b : string = "i1";
let c : boolean[] = [true];

객체 만들기

/* 객체만들기, 오브젝트 타입만들기 */
const player : {
    name:string,
    age?:number  // ?: optional
} = {
    name: "kgyury",
    age : 23
}

/* optional 속성을 가진 객체에 접근시, 존재하는지와 원하는 조건을 같이 건다 */
if(player.age && player.age < 10){

}


/* 객체에 Alias, 클래스화 시키기 */
type Age = number;
type Player = {
    name:string,
    age?: Age
}
const playerKyury : Player = {
    name: "kyu",
}
const playerKim : Player = {
    name: "kim",
    age: 100
}

/* 함수만들기, Player 객체에 대한 반환을 하도록 만들자 */
function nameMaker(name: string){
    return {
        name: name
    }
}

/* Player 객체에 대한 반환을 하도록 만들자 */
function playerMaker(name: string) : Player{
    return {
        name: name
    }
}

/* 화살표함수를 통해 함수 작성하기 */
const playerMaker2 = (name:string) : Player => ({name})

const test1 = nameMaker("test1");
// test1.age = 12 //age 프로퍼티에 접근 불가

const test2 = playerMaker("test2");
test2.age = 30 // age프로퍼티에 접근 가능

 

프로퍼티 접근권한 만들기, 그리고 any

const numbers: readonly number[] = [1,2,3,4]
// numbers.push(1) // push를 통한 number의 변경 불가

const names: readonly string[] = ["1", "2"]

let a = [] // Type: any, 나 걍 아무렇게나 다 넣을래! 라는 뜻. 이럴 거면 ts를 쓰는 목적 손실
// 그러나 가끔은 type에게 그냥 풀어줘 라고 할 때가 있을 순 있다

 

타입다루기 (unknow, void, naver)

 

/* type 가지고 놀기 */
let a:unknown; //변수의 타입을 미리 알지 못할 떄 unknown사용

if(typeof a ==='number') {
    //다음의 연산이 정상적으로 실행되는지 조건문으로 확인하여 ts가 통과시킴
    let b = a+1;
}

if(typeof a === 'string'){
    let b = a .toUpperCase; //문자열 내장함수 사용가능
}

/* void 함수 */
function hello() :void {  // :void 생략가능
    console.log('x');
}
const test = hello(); // 사실 return값 없는 함수를 실행시킴
// test.toUpperCase(); 

/* naver타입, 함수가 절대 return하지 않을 때 발생 */
function hello2(name:string | number):never{
    if(typeof name === 'string') {
        name

    } else if (typeof name === 'number'){
        name
    } else {
        name // 여기에 들어오는 name이 바로 never. 절대 실행될 일이 없다
        // 왜 실행될일이 없느냐? 파라미터는 string,number이외에 들어올 일이 없도록 했으니까.
        // 절대 여기가 실행되면 안 된다구.
    }
}

 

함수다루기

함수의 리턴값

// 파라미터 type명시: default
function add(a:number, b:number) {
    return a + b
}
// 파라미터 type명시: arrow function.ver
const add2 = (a:number, b:number) => a+b

// custom function
type Add = (a:number, b:number) => number; // 리턴값이 number임을 알려줌
const add3:Add = (a,b) => a + b; // return값이 a+b, 즉 number임
// const add4:Add = (a,b) => {a+b}; // return값이 void란 의미이므로 오류발생

 

 

next: 오버로딩, 다형성 등