[TypeScript] 변수, 함수 타입지정

vs코드는 타입스크립트로 제작되어 친화적이라고한다.

타입은 프리미티브 타입(string,number,boolean,null,undifned..)과 객체타입이 있다.

마우스 커서를 가져다대면 ':'뒤에는 반환값 타입정보를 얻을 수있다.

 

1. DOMelement

const container = document.getElementById('root')

const container: HTMLElement | null = document.getElementById('root')

//사용
  if(container){ //container != null
    container.innerHTML = html
  }else{
    console.error('최상위 컨텐츠가없어 UI진행불가')
  }

container변수는 타입으로 HTMLElement 혹은 null을 받는다.

이제 container가 null일 경우도 염두해야하기때문에 사용예시처럼 if문으로 감싸주지않으면 에러가뜬다.

타입가드코드라고해서 전형적인 방법이다.

 

2.ajax

let ajax = new XMLHttpRequest();

let ajax: XMLHttpRequest = new XMLHttpRequest();

 

3.객체

3-1 타입지정

타입알리야스(타입변수, type alias)방법으로 타입을 지정할수있다.

참고로 타입알리야스는 타입이 너무많을때도 사용한다.

const store = {
    currentPage:1,
    feeds:[],
}

type Store = {
	currentPage: number;
    feeds: [];
}
const store: Store = {
    currentPage:1,
    feeds:[],
}

타입알리야스는 ;으로 구분

 

store.feeds를 명확하게 어떤 타입의 데이터가 이 배열안에 들어가게할거야라고 명시하려면

type Store = {
  currentPage : number;
  feeds: NewsFeed[];
}

type NewsFeed = {
  id:number;
  comments : number;
  url:string;
  user:string;
  time_ago:string;
  points:number
  title: string;
  read?:boolean; //?는 read가 있을수도있고 없을수도있다는뜻
}

//사용예
const store: Store = {
    currentPage:1,
    feeds:[],
}

let newsFeed: NewsFeed[] = store.feeds

실제 API를 불러올때 newsFeed의 응답값

브라우저에 일일이들어가 응답값을 찾는게 번거롭다면 vs코드에서 제공해주는 extension REST client을 활용하자

 

* 타입추론

반복문같은경우 i는 넘버타입을 안해도 에러마크를 표시를 안해주는데 타입스크립트가 코드상에 상황을 인지하여

i를 넘버타입이라고 자동으로 추론하기때문에 타이핑 안해줘도됨

 

3-2 interface

type과 같은 의미이고 =는 필요없고 클래스만드는법과 유사하다.

interface Square { 
  color :string, //,대신 ;도 가능
  width :number, 
} 

let 네모 :Square = { color : 'red', width : 100 }

type도 있는데 왜 interface를 쓰냐면 extends로 복사가 가능하기때문이다. 예를들어 A,B라는 인터페이스가 각각 있는데 중복되는 내용이있으면 이렇게 사용한다.

interface student {
    name : string
}
interface teacher extends student { // name : string
  age:number
}
let 학생: student = {name:'kim'}
let 선생: teacher = { name: "kim", age:23 };

 

사실 type에도 intersection type라고하는 교차기능이있어서 &를 사용하면 interfece의 extends처럼 사용할 수 있다.

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

 

하지만 둘의 가장 큰 차이는 중복 선언의 유무이다. 또한 extends는 복사의 의미가 크지만 &는 교차의 의미가 크다.

interface에서는 중복선언이 가능하기때문에 타입이있는 라이브러리들을 가져와서 커스터마이징할때 유용하다.

다른사람들도 이용할것같을때 interface를 사용하면 유용하다.

interface student {
    name : string
}
interface student {
   	birth : number
}
//자동 extends가 된다고 생각하면됨. 오류안남

 

4. 함수

//파라미터필수
function 함수(x : number) :number{//x와 return값을 number로 제한
	return x * 2
}
함수(2)

//파라미터 있어도되고 없어도됨
function 함수2(x? : number) :numberP{//(x:number|undifned)랑 같은뜻
	return x * 2
}
함수2()

파라미터가 필수가아닐경우 ?를사용한다. 정확한뜻은 x : number | undefined로 union타입이다.

 

만약 return하고싶지않을때 void타입을 쓰면된다.

function 함수3(x:number):void{
	x+1 //return시 에러표시됨
}

 

* narrowing : if문등으로 타입을 정해주는것, typeof 연산자활용. 이외에 in, instance of등이 있다.

* assertion : 여러개 타입들을 하나로 확정(100%확인할때만) -> 남이짠코드가 에러날때만 비상용으로..

function 내함수(x :number | string){
   return x + 1  //에러남 
}

//해결1.
function 내함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

//해결2
function 내함수(x :number | string){ 
    return (x as number) + 1 
}
console.log( 내함수(123) )

 

함수타입알리야스

type 함수타입 = (x : number, y : number ) => number 
let ABC :함수타입 = function(x,y){
  return x + y
}