[TypeScript]타입스크립트란?

자바스크립트 + 타입을 지정해준다.

 

자바스크립트 

5 - '3'  number - string 이게 된다고?

자바스크립트의 특징이다.

다이나믹 타이핑 :  알아서 숫자로 바꿔줌

그러나! 프로젝트가 커지면서 JS 특징인 자유도가 높아지고 유연성이 높아지면 독이 됨(대체 어디서 에러가 난거임?)

 

프로젝트를 하면서 undefined를 읽을 수 없다는 콘솔 에러가 참 많이 났다. 이때 항상 타입스크립트를 써보면 어떨까? 하는 생각이 들었다,

----------

타입스크립트

1. 타입을 엄격히 검사해준다.

2. 에러 메세지 퀄리티가 좋아진다. (숫자를 넣어야하는데 님이 문자를 넣었습니다.. 오타 교정 등등)

 

문법 차이점

.js -> .ts .jsx -> .tsx

• 자바스크립트로 변환해야 사용가능하다. tsc -w를 입력하면 자동변환.
• tsconfig.json은 js컴파일 시 옵션 설정을 하는 부분.

 

변수 타입

number, string, boolean, null, undefined, any

 

any : 어떤 데이터가 올지 모를 때. 하지만 Ts를 사용하는 의미가 없으므로 남발하면 안됨.

 

let name :string = 'kim'; 여기에 반드시 문자열을 넣어라. 

let name :string[] = ['kim', 'park'] ; 문자열이 들어간 배열

let person :{name? : string} = {name : 'kim'} ; obj 타입 지정

?은 여기 name이란 속성이 들어올 수도 있고 아닐 수도 있다.

let name :string | number = 'kim'; 다양한 타입은 |으로 구분

let name :string[] | number = 'kim'; -> 이런것도 가능



타입은 변수에 담아쓸 수 있음(보통 대문자로 씀)

type Name = string | number;

let name :Name  =  'kim';


//파라미터, 리턴 타입에 대해서 타입 지정 가능 
function myFunc(x :string) :number{

    return x * 2

}

type Member = [number, boolean] //튜플 타입 : 무조건 첫쨰는 숫자, 둘쨰는 boolean값을 넣어라
let kim :Member = [123, true]

// 지정해야할 속성이 많으면
type Member = {
	[key :string] : string, //문자열로 된 모든 객체 속성의 타입은 문자열
}
let kim :Member = {name : '123', age : '12'}


// class 에도 타입 지정 가능
class User {
	name :string;
    constructor(name :string){
    	this.name = name;
    
    }

}

//enum(비슷한 값끼리 묶어줌) 단방향 매핑. 
enum Os {
	Window, //0
    IOS, //1
    And, //2
}
수동으로 값을 줄 수 있고 하나씩 증가함. 
Os[0] = 'Window' 
Os['Window'] = 0

제네릭

- [nameData, setNameData] = useState([]) 이런 식으로 자바스크립트에서 선언했다고 하면?
-> 타입스크립트가 이 nameData와 setNameData가 뭔 타입인지 알 수 없어서 빨간 줄이 뜬다.

->그런데 useState는 많은 타입들을 인자에 넣을 수 있으니까, 호출하는 순간에 내가 이 타입을 useState에서 쓸 거라고 제네릭을 사용한다.

[nameData, setNameData] = useState<name[]>([])</name[]>

 

그러면 nameData는 Name 객체의 배열 타입이고, setNameData는 인자로 Name 객체의 배열을 받을 수 있다.

// 생성하는 시점에 사용하는 타입. 
useState<타입>()



props로 받아올 떄 : 타입을 새로 지정해줘야.

interface OwnProps {

   name : Name

}



const Store<OwnProps> = ({info}) {}



함수 타입

changeAddress(address:Address) :void



readonly : 수정 불가.

 

type Score = 'A' | 'B'

interface User {
    name : string;
    readonly birth :number;
    [grade:number] : Score;
}

let user : User = {
    name : 'kim',
    birth : 2000,
    1 : 'A'
}

user.birth = 1000; // 리드온리라 수정 불가


function hello(name?: string){
    return `Hello, ${name||'world'}`
}
// 예외처리 되어있지만, 들어오는 name이 없으면 안됨. name이 들어오는지 파라미터에서 ? 붙여줘야 함

 

 

extends 

활용해서 추가 및 확장 가능.

 

타입은 &로 확장 가능

타입에서만 쓸 수 있는 기능이 있음. 제외하고 싶을 떄 

export type Address2 = Omit<Address. '뺴고싶은거'>

 

 

얘만 선택하고 싶어요

export type Onlyname = Pick<User, "픽하고 싶은거">

?의 경우는 받아야 하는 값을 체크 못하는 경우가 있음.

API 콜을 하고 싶을 때 응답값은??

export type APIRes<T>{

   data:T[],

}



export type UserResponse = APIRes<User>


interface User<T> {
    name: string;
    gender: string;
    option: T
}

const user1: User<object>= { // option에 객체를 지정.
    name: "kim",
    gender: 'male',
    option : {
        age: 20,
        height : 170,
    }
}

 

 

 

 

 

참조:

https://www.youtube.com/watch?v=xkpcNolC270